Solved

Need JQuery function to set value of hidden field

Posted on 2012-03-30
8
622 Views
Last Modified: 2012-03-31
I am building a form in SharePoint Designer 2007 and I need a JQuery function that will set the value of a hidden field when the value of a specific field changes. I am new to Jquery so I don't know if there is already an event that I can use (onchange).  For example:

Field has no value:

label    Field1

Table style="visibility:hidden"
Hidden Field(no value)



Field has value:

label    Field1=1

Table style="visibility:hidden"
Hidden Field=A
0
Comment
Question by:macarrillo1
  • 4
  • 4
8 Comments
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37789725
use this:

$("#hiddenField").val("A");

in the event handler of your choice.
For instance, if you want to do that onChange of input "Field1", do this:

$("#Field1").change(
function(){
    $("#hiddenField").val("A");
});
0
 
LVL 9

Author Comment

by:macarrillo1
ID: 37791421
How would I write this if Field1 has a value of X1 then hiddenField has a value of A Else
if Field1 has a value of X2 then hiddenField has a value of B Else Hiddenfield has value of C?
0
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37791508
$("#Field1").change(
function(){
    var f=$("#Field1").val();
    if(f=="X1"){
         $("#hiddenField").val("A");
    else if(f=="X2"){
         $("#hiddenField").val("B");
    }else{
         $("#hiddenField").val("C");
    }
});

or:

$("#Field1").change(
function(){
    var f=$("#Field1").val();
    switch(f)
    {
        case "X1":
             $("#hiddenField").val("A");
             break;
        case "X2":
             $("#hiddenField").val("B");
             break;
        default:
             $("#hiddenField").val("C");
    }
});
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 9

Author Comment

by:macarrillo1
ID: 37791553
Not working yet.
Should the second to the last '}' have a semicolon?
To end the switch?
0
 
LVL 7

Accepted Solution

by:
designatedinitializer earned 500 total points
ID: 37791620
this will work:
<?php
print_r($_POST);
?>
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
			$("#Field1").change(
			function(){
				var f=$("#Field1").val();
				switch(f)
				{
					case "X1":
						 $("#hiddenField").val("A");
						 break;
					case "X2":
						 $("#hiddenField").val("B");
						 break;
					default:
						 $("#hiddenField").val("C");
				}
			});
		});
    </script> 
</head> 
<body>
<form id="myForm" action="" method="post"> 
    <label for="Field1">Field1: <input type="text" id="Field1" name="Field1" /></label>
    <input id="hiddenField" name="hiddenField" type="hidden" value="XXX"/>
    <input type="submit" value="Submit" /> 
</form>
</body>

Open in new window

0
 
LVL 9

Author Comment

by:macarrillo1
ID: 37791644
Thanks!  Both work now.
The problem I ran into was with the if statement having the correct number of closing brackets.
As in

    if(f=="X1")
          {
              $("#hiddenField").val("A");
          }
    else
          {
               if(f=="X2")
                    {
                             $("#hiddenField").val("B");
                    }
                else
                    {
                             $("#hiddenField").val("C");
                    }
         }
0
 
LVL 9

Author Closing Comment

by:macarrillo1
ID: 37791647
Thanks Again!
0
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37791732
you're right, i was lacking a bracket.
"else if" is a correct construct, but there was missing a "{" before it.
This will work:
$("#Field1").change(
function(){
    var f=$("#Field1").val();
    if(f=="X1"){
         $("#hiddenField").val("A");
    }else if(f=="X2"){
         $("#hiddenField").val("B");
    }else{
         $("#hiddenField").val("C");
    }
});

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question