Help with script to select and deselect form inputs

ColdFusion 9
MS SQL Server 2005
Javascript

Hi. I need some help with a script.

In brief: In a form, when I select a radio button, then I want to deselect anything that was previously selected in the form's select menu.

Details:

* I have an edit form that allows the user to make a web page into a Parent page or a Child page.

* The edit form has a select menu in which the user chooses a Parent page -- this makes the page a Child page, with the selected Parent in the select menu. See attached image.

* My trouble is, when I select a Parent page for a Child page (from the Select menu), and then change my mind and want to make the Child page into a Parent page, the Selected Parent page stays selected. It should not stay selected.

* So, when the radio buttons "Make this page a Parent page" or "Make this page a Floating Page are selected, then the Select menu should be cleared / deselected. This is the crux of the problem.

* As you can see in the attached image, the Select menu does not get cleared when a radio button is selected.

* So when I update the page, ColdFusion does not know what to do.

I believe I need to change this script, below, to enforce the rule above.

What do you think? I am not sure where to begin or how to usefully edit the script, below. Thank you for any advice!

Eric

Script (I think this needs to change somehow; I am not sure how; nor am I certain of this):

<script language="javascript" type="text/javascript">

$(document).ready(function() {
	$("form").submit(function(e) {
		var IndexSelected = $("select[name='ParentID']").prop("selectedIndex") != -1;
		var RBChecked = $("input[type='radio'][name='ParentID']:checked").length > 0;
		
	if( (!IndexSelected && !RBChecked) || (IndexSelected && RBChecked ) ) {
		e.prLinkDefault();
		
		alert("Please select a navigation option: make this page a parent page or a child page, or exclude the page from navigation.");
		                }                
						})                
	$("select[name='ParentID']").change(function() {
	if($("select[name='ParentID']").prop("selectedIndex") != -1) {
		$("input[type='radio'][name='ParentID']").attr("checked",false);
						}
						});
	$("input[type='radio'][name='ParentID']").change(function() {
	if( $("input[type='radio'][name='ParentID']:checked").length > 0 ) {
		$("select[name='ParentID']").prop("selectedIndex", -1);
						}
						});
						})
</script>

Open in new window



Query to update ParentID forweb page records (I don't think this needs to change, but including it anyway for completion):

<!--- query UpdatePage updates a page record in web site content table --->
            <cfquery name="UpdatePage" datasource="#application.datasource#">
				  UPDATE #REQUEST.contentTable#
				  SET
           PageTitle = <cfqueryparam cfsqltype="cf_sql_varchar" value="#Trim(Left(form.PageTitle,255))#">,   
           buddha_main = <cfqueryparam cfsqltype="cf_sql_varchar" value="#Trim(form.buddha_main)#">,
           DateModified = <cfqueryparam cfsqltype="cf_sql_timestamp" value="#now()#">,
           ParentID = <cfqueryparam cfsqltype="cf_sql_integer" value="#form.parentID#" null="#form.parentID eq -1#">,
           SortOrder = <cfqueryparam cfsqltype="cf_sql_integer" value="#val(form.SortOrder)#">,
           safeURL = <cfqueryparam cfsqltype="cf_sql_varchar" value="#Trim(Left(form.safeURL,255))#">
           WHERE PageID = <cfqueryparam cfsqltype="cf_sql_integer" value="#val(form.PageID)#">
			</cfquery>

Open in new window

         
           
           
Form fields (I don't think this needs to change, but including it anyway for completion):

1. You may make this page a "Parent" page in the main navigation menu.
<cfinput type="radio" value="0" name="ParentID" checked="#editPage.ParentID eq 0#" />

2. Or you may make this page a child page; choose a parent page under which this page should appear in the navigation menu. Choose parent page from the Select menu:

<!--- query to get grandchild pages, so we can OMIT them from SELECT MENU --->
<!--- grandchild pages do not get to be parents of child pages --->
<cfquery name="GetParents" datasource="#application.datasource#">
    SELECT        base.PageID  
                 ,base.PageTitle 
                 ,base.SortOrder 
                 ,base.ParentID  
     
FROM #REQUEST.contentTable# base
            LEFT JOIN #REQUEST.contentTable# p ON p.pageID = base.parentID   <!--- find parent --->
            LEFT JOIN #REQUEST.contentTable# gc ON gc.pageID = p.parentID      <!--- find grandchild ---> 
WHERE gc.PageID IS NULL
AND     base.PageID <>  <cfqueryparam cfsqltype="cf_sql_integer" value="#val(form.PageID)#">
AND     base.ParentID <>  <cfqueryparam cfsqltype="cf_sql_integer" value="100000">           
</cfquery>
    
  
<!--- query getSelectedParents gets ParentID of Parent page that is selected in the form  --->
  <cfquery datasource="#application.datasource#" name="getSelectedParents">
        SELECT  PageTitle, ParentID
        FROM    #REQUEST.contentTable#
        WHERE ParentID = <cfqueryparam cfsqltype="cf_sql_integer" value="#val(form.ParentID)#">
</cfquery>

<cfset selectedParents = valueList(getSelectedParents.ParentID)>
  
  <!--- use this select menu to display and assign parent page Titles --->
  <!--- user should see a human-readable list of parent page titles --->
	  	<cfselect size="8" name="ParentID" value="PageID" display="PageTitle" multiple="no" query="GetParents" queryPosition="below" selected="#selectedParents#" id="ParentID" style="width:250px;">
      
    	</cfselect>                
  <!--- when form is processed, the correct ParentID is populated into content table --->
  <!--- ParentID value 0 means the record / web page is a Parent page included in top-level, main navigation menu --->
  <!--- ParentID value 100000 means the record / web page is EXCLUDED from navigation menu, and is a Floating Page --->

3. Or you may exclude this page from navigation. This page becomes a floating page.

<cfinput type="radio" value="100000" name="ParentID" checked="#editPage.ParentID eq 100000#" />
Exclude this page from the navigation menu.

Open in new window

selectMenu.jpg
LVL 3
Eric BourlandAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Assuming the selectedIndex code here

$("input[type='radio'][name='ParentID']").change(function() {
  if( $("input[type='radio'][name='ParentID']:checked").length > 0 ) {
    $("select[name='ParentID']").prop("selectedIndex", -1);
  }

});

works, try .on("click",function()
instead of .change(function()

but the best way to test is to create a jsfiddle.net with the script and the rendered HTML

I do not understand how you can have selects with name="ParentID" AND radios with name="ParentID"
0
Eric BourlandAuthor Commented:
mplungjan,

Thank you for your note. I tried replacing the two instances of  .change(function() with  .on("click",function()  ... that did not work.

I am vaguely familiar with http://jsfiddle.net/ .... but have never used it. I wonder if there is a working example of this somewhere.

Thank you again for your help. I will keep working on this.

Eric


p.s. >>>>I do not understand how you can have selects with name="ParentID" AND radios with name="ParentID"

These values update the same column in the database. Seems to work acceptably well. =)
0
Eric BourlandAuthor Commented:
mplungjan,

Also, this question, and your reply to it, has helped me codify the question .... to get to the real question behind the question I asked. =) Thanks for that. I might restate the question and share it in the javascript group.

Eric
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Michel PlungjanIT ExpertCommented:
Please replace the select and radio with your rendered html

http://jsfiddle.net/mplungjan/Tfc4n/

I do not by the way think the second radio will not be checked

checked="whatever" will check it

I also strongly suggest you do NOT give different types of form elements the same name. It just does not make any sense
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eric BourlandAuthor Commented:
Got it. That works in your fiddle. Nice!

When I apply your javascript to my edit form in coldfusion, it does not work -- the value in the select menu stays selected. I am working to understand that.

>>>I also strongly suggest you do NOT give different types of form elements the same name. It just does not make any sense

Normally I agree with you, and what you are saying makes sense. However, all of these form inputs do one thing only -- they update the ParentID column in the data table. So all of the inputs have the same name -- ParentID -- because they all update the same column. This has worked for me for about three years now, as long as I have had this form. I hope that makes sense.

But I wonder if having the same name for the inputs (two radio buttons, and one select menu, all with name = "ParentID") is messing up the script when I test it in production.

Your script works great in development. I am working to understand what's going on in production.

mplungjan, thank you again. I will get back to you with my findings soon. Hope your day is going well.

Eric
0
Michel PlungjanIT ExpertCommented:
You are welcome :)
0
Eric BourlandAuthor Commented:
Problem solved. mplungjan, your script works very well. Here was the problem. I was referencing an old version of jquery.

old (broken):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

new (it works):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

mplungjan -- thank you very much for your time and expertise. One result from this is, I get cleaner javascript to run my little ColdFusion CMS. =)

Take care.

Eric
0
Michel PlungjanIT ExpertCommented:
Great, yeah that is an old version - good you found a solution.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.