• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1001
  • Last Modified:

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

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
norway77
Asked:
norway77
  • 4
  • 4
1 Solution
 
Gurvinder Pal SinghCommented:
<a href="javascript:setValues();">

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

0
 
norway77Author Commented:
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
 
Gurvinder Pal SinghCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
norway77Author Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
norway77Author Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
norway77Author Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now