norway77
asked on
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.pag eAction.va lue ='value1';document.Update. pageValue. value = 'value2';document.Update.s ubmit() ">
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
<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.
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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(funct ion(){
var idSubstr = parseInt($(this).attr("id" ).substrin g(1));
$(this).bind("click", function(idSubstr){
$("#pageAction").val(idSub str);
$("#pageValue").val(valueA rray[idSub str]);
document.Update.submit();
});
});
});
<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(funct
var idSubstr = parseInt($(this).attr("id"
$(this).bind("click", function(idSubstr){
$("#pageAction").val(idSub
$("#pageValue").val(valueA
document.Update.submit();
});
});
});
ASKER
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(funct ion(){
var idSubstr = parseInt($(this).attr("id" ).substrin g(1));
$(this).bind("click", function(idSubstr){
$("#pageAction").val(idSub str);
$("#pageValue").val(valueA rray[idSub str]);
document.Update.submit();
});
});
});
NEW CODE
$(document).ready(function (){
var str =parseInt($(this).attr("id ").substri ng(1));
var substr = str.split('#');
$("a[id^='a']").each(funct ion(){
var idSubstr = parseInt($(this).attr("id" ).substrin g(1));
$(this).bind("click", function(idSubstr){
$("#pageAction").val(subst r[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
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(funct
var idSubstr = parseInt($(this).attr("id"
$(this).bind("click", function(idSubstr){
$("#pageAction").val(idSub
$("#pageValue").val(valueA
document.Update.submit();
});
});
});
NEW CODE
$(document).ready(function
var str =parseInt($(this).attr("id
var substr = str.split('#');
$("a[id^='a']").each(funct
var idSubstr = parseInt($(this).attr("id"
$(this).bind("click", function(idSubstr){
$("#pageAction").val(subst
$("#pageValue").val(substr
$("#pageColor").val(substr
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
hmm, after making the html changes the way you have suggested, you can change the jquery code to
$("a[id^='a']").each(funct ion(){
var idSubstr = $(this).attr("id").substri ng(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
$("a[id^='a']").each(funct
var idSubstr = $(this).attr("id").substri
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
ASKER
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(funct ion(){
var idSubstr = $(this).attr("id").substri ng(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?
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(funct
var idSubstr = $(this).attr("id").substri
alert("value= "+idSubstr);
var items = idSubstr.split("#");
$(this).bind("click", function( items ){
alert($("#pageAction").val
$("#pageAction").val( items [0]);
$("#pageValue").val( items [1]);
$j"#pageColor").val( items [2]);
document.Update.submit();
});
});
did i add it in wrong?
and what does it alert when you do this?
$("a[id^='a']").each(funct ion(){
var idSubstr = $(this).attr("id").substri ng(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();
});
});
$("a[id^='a']").each(funct
var idSubstr = $(this).attr("id").substri
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();
});
});
ASKER
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(item s[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.
I figured it out using your first solution.
here is what i did
jquery
function setValues(e)
{
var items = e.split("#");
$j("#pageAction").val(item
$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
thank you for all your help.
ASKER
When i set up <a href="javascript:setValues
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.
next
would net me
<a href="javascript:document.
<a href="javascript:document.
<a href="javascript:document.
etc..
would i just add the javascript:setValues(); to the end as another call and then change the
function setValues()
{
$("#pageAction").val("valu
$("#pageValue").val("value
document.Update.submit();
}
to
function setValues()
{
$("#pageAction").val();
$("#pageValue").val();
document.Update.submit();
}