Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

use jquery instead of javascript to set value of hidden fields and submit form

Posted on 2010-09-21
8
Medium Priority
?
995 Views
Last Modified: 2012-05-10
I have a form, asp  
<form action="page1.asp" method="post" name="Update" id="Update">

hidden fields
        <INPUT TYPE=HIDDEN NAME="pageValue" id="pageValue" value ="">
        <INPUT TYPE=HIDDEN NAME="pageAction" id=pageActon" value ="">


here is the javascript link
<a href="javascript:document.Update.pageAction.value ='value1';document.Update.pageValue.value = 'value2';document.Update.submit() ">

Value1 and Value2 are coming from a database and there is between 20-100 records.
I usually use this method and then it will assign the hidden fields the different values and then it will post to the page and i can do what i want with the data and return to the page or go to another page.

I am now using jquery and want to be able to accomplish the same thing, but don't know how to do it. Especially on a dynamic level with hidden fields.

I bring in the results on the page with jquery and empty and replace a div.  when i use the old method of javascript above,  i get and error saying that the form does not exists.  I don't know if i need to bind the new data to the form somehow,  but I would like to just use jquery to do the submit and hidden field values.

thanks
danny
0
Comment
Question by:norway77
  • 4
  • 4
8 Comments
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 33727130
<a href="javascript:setValues();">

function setValues()
{
     $("#pageAction").val("value1");
     $("#pageValue").val("value2");
     document.Update.submit();
}

0
 

Author Comment

by:norway77
ID: 33727419
Thanks for the quick response.
When i set up <a href="javascript:setValues();"> and click it i get  obviulsy value1 and value2.
But how do i set it up so that i get unique values for each link.

here is the old way
for i =0 to 100

<a href="javascript:document.Update.pageAction.value ='Variable1';document.Update.pageValue.value = 'variable2';document.Update.submit() ">

next

would net me
<a href="javascript:document.Update.pageAction.value ='1';document.Update.pageValue.value = 'cold';document.Update.submit() ">
<a href="javascript:document.Update.pageAction.value ='2';document.Update.pageValue.value = 'warm';document.Update.submit() ">
<a href="javascript:document.Update.pageAction.value ='3';document.Update.pageValue.value = 'hot';document.Update.submit() ">

etc..

would i just add the javascript:setValues(); to the end as another call and then change the
function setValues()
{
     $("#pageAction").val("value1");
     $("#pageValue").val("value2");
     document.Update.submit();
}
to
function setValues()
{
     $("#pageAction").val();
     $("#pageValue").val();
     document.Update.submit();
}

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33728019
do this way

<a href="#" id="a1">A1</a>
<a href="#" id="a2">A2</a>
<a href="#" id="a3">A3</a>

just include this in the document ready

$(document).ready(function(){
var valueArray = ["cold", "warm", "hot"];
$("a[id^='a']").each(function(){
   var idSubstr = parseInt($(this).attr("id").substring(1));
   $(this).bind("click", function(idSubstr){
          $("#pageAction").val(idSubstr);
          $("#pageValue").val(valueArray[idSubstr]);
          document.Update.submit();
   });
});
});

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:norway77
ID: 33728668
var valueArray = ["cold", "warm", "hot"];
will not work because these are coming out of the database.

is there a way to do something like this
combine 2 or 3 values to the id and then split them up in the jquery

<a href="#" id="a1#windy#green">A1</a>
<a href="#" id="a2#cold#blue">A2</a>
<a href="#" id="a3#warm#yellow">A3</a>
...
<a href="#" id="a100#wet#red">A3</a>


$(document).ready(function(){
var valueArray = ["cold", "warm", "hot"];

$("a[id^='a']").each(function(){
   var idSubstr = parseInt($(this).attr("id").substring(1));
   $(this).bind("click", function(idSubstr){
          $("#pageAction").val(idSubstr);
          $("#pageValue").val(valueArray[idSubstr]);
          document.Update.submit();
   });
});
});

NEW CODE

$(document).ready(function(){
var str =parseInt($(this).attr("id").substring(1));
var substr = str.split('#');



$("a[id^='a']").each(function(){
   var idSubstr = parseInt($(this).attr("id").substring(1));
   $(this).bind("click", function(idSubstr){
          $("#pageAction").val(substr[0]);
          $("#pageValue").val(substr[1]);
         $("#pageColor").val(substr[2]);
          document.Update.submit();
   });
});
});

Ths doesn't work, but i didn't think it would i just wanted to try to explain it.
Is this possible

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33728729
hmm, after making the html changes the way you have suggested, you can change the jquery code to

$("a[id^='a']").each(function(){
  var idSubstr = $(this).attr("id").substring(1);
  var items = idSubstr.split("#");
  $(this).bind("click", function( items ){
         $("#pageAction").val( items [0]);
         $("#pageValue").val( items [1]);
        $("#pageColor").val( items [2]);
         document.Update.submit();
  });
});
});

please check
0
 

Author Comment

by:norway77
ID: 33728888
i put in the changes you made
i added some alert boxes
the first one works on page load and shows
value= 1#windy#green
value= 2#cold#blue
value= 3#warm#yellow

the second alert has an empty alert box.  It should show 1.

      $("a[id^='a']").each(function(){
              var idSubstr = $(this).attr("id").substring(1);
              alert("value= "+idSubstr);
              var items = idSubstr.split("#");
              $(this).bind("click", function( items ){
                    alert($("#pageAction").val( items [0]));
                         $("#pageAction").val( items [0]);
                         $("#pageValue").val( items [1]);
                        $j"#pageColor").val( items [2]);
                         document.Update.submit();
              });
            });

did i add it in wrong?
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33728955
and what does it alert when you do this?

 $("a[id^='a']").each(function(){
              var idSubstr = $(this).attr("id").substring(1);
              alert("value= "+idSubstr);
              var items = idSubstr.split("#");
              $(this).bind("click", function( items ){
                    alert( items [0]);
                         $("#pageAction").val( items [0]);
                         $("#pageValue").val( items [1]);
                        $j"#pageColor").val( items [2]);
                         document.Update.submit();
              });
            });
0
 

Author Comment

by:norway77
ID: 33729044
It still said Undefined

I figured it out using your first solution.

here is what i did

jquery
 function setValues(e)
{
       var items = e.split("#");
     $j("#pageAction").val(items[0]);
     $j("#appUID").val(items[1]);
     $j("#suID").val(items[2]);
       //make sure value is not blank or don't submit
     document.Update.submit();
}
html
<a href="javascript:setValues('1#windy#green');">

thank you for all your  help.  
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

927 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