Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change the value of a form input based on onclick 1

Status
Not open for further replies.

cdck

Programmer
Nov 25, 2003
281
US
I have a form with required fields. Users often don't remember they need all of the required information, and they currently have to leave and start over again once they get it.

I want to offer two different submit buttons, one as a Continue, one as a Save for Later. The onclick for the Continue button runs a validator that would reject the submission if required info was missing. The Save for later would not run this same validator, thus allowing required fields to be empty.

On the page that processes the information, I need something to trigger one of two different redirects once the data is saved - A) a page that allows inputting of the next step, B) a page that tells them how to get back to the information once they're ready to continue.

I envision using a hidden input with a value of either 1 (automatic - Continue) or 2(Javascript-edited - Save). The processing page would then use that field to determine where to send the user next.

Can I use Javascript to change the hidden value when the onclick event is triggered?

Cheryl dc Kern
 
Yup, here's an example:
Code:
<script type="text/javascript">

function setValue() {
   var a = document.getElementById("hiddenValue");
   alert("old value: " + a.value);
   a.value = "some new value";
   alert("some value: " + a.value);
}

</script>

<input type="button" value="click me" onclick="setValue()" />
<input type="hidden" value="" id="hiddenValue" />

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
I tried this, but it hasn't worked. Below is the code as I adjusted it for my form:

<script language="javascript">
function setValue() {
var a = document.getElementById("atStage");
alert("old value: " + a.value);
a.value = "Save";
alert("some value: " + a.value);
}
</SCRIPT>

And in the form:
<INPUT type="hidden" name="atStage" value="Continue">
<INPUT type="image" src="graphics/bButtonPRPause.gif" onclick="setValue()">

On the page that processes the form data, the first thing I do is read the atStage value and print it to the browser. It comes back as

Continue

Did I miss something?


Cheryl dc Kern
 
Your problem is here:
Code:
<INPUT type="hidden" [!]name[/!]="atStage" value="Continue">

In the code above I referenced the element with document.getElementById("elementid") because I had assigned an id to that element. Your element has no id assigned to it. Now, you can either assign an id (which must be unique for each element) or you can access the element thru the forms and elements collections. You didn't post any html for your form so I don't know the name on it, but you'd do it something like this:
Code:
var a = document.forms["[!]formName[/!]"].elements["[!]atStage[/!]"]

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Thank you! I added an ID attribute to the input, and it works great now.

Cheryl dc Kern
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top