Solved

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

Posted on 2010-09-21
8
910 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:
gurvinder372 earned 500 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:gurvinder372
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
 

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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 40

Expert Comment

by:gurvinder372
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:gurvinder372
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
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…

758 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

23 Experts available now in Live!

Get 1:1 Help Now