Solved

Need JQuery function to set value of hidden field

Posted on 2012-03-30
8
619 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
Comment Utility
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
Comment Utility
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
Comment Utility
$("#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
 
LVL 9

Author Comment

by:macarrillo1
Comment Utility
Not working yet.
Should the second to the last '}' have a semicolon?
To end the switch?
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 7

Accepted Solution

by:
designatedinitializer earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks Again!
0
 
LVL 7

Expert Comment

by:designatedinitializer
Comment Utility
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

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…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now