Solved

Need JQuery function to set value of hidden field

Posted on 2012-03-30
8
627 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…

737 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