?
Solved

Need JQuery function to set value of hidden field

Posted on 2012-03-30
8
Medium Priority
?
629 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
Basic Security of Your VPC

So, you’ve got this shiny new VPC and a fancy new application configured on your EC2 servers ready to go. This application is only accessible from your computer, which is great for security, but you need your users to be able to access it! So, what’s the easiest way to do this?

 
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 2000 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

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses
Course of the Month11 days, 3 hours left to enroll

770 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