...

View Full Version : Is it possible to use this JavaScript INPUT method with SELECT?



FlashDancer
01-20-2012, 04:18 AM
I use this code in a form that posts to two different destinations, I use JavaScript to achieve it.



<SCRIPT type="text/javascript">
function submitTo(where) {
document.form.action = where;
document.form.submit();
}
</SCRIPT>

<FORM action="" method="post" name="form">
<DIV>
<INPUT onClick="return submitTo('1.html')" type="button" value="1">
<INPUT onClick="return submitTo('2.html')" type="button" value="2">
</DIV>
</FORM>


I am still wanting to do is the same thing, but with drop down menu's (SELECT) instead of INPUT.

Is there anyone clever that can think of a solution? I'm still trying to work on it, but haven't thought of anything up yet..

Old Pedant
01-20-2012, 05:20 AM
<form action="" method="post" name="form">
<select onchange="this.form.action=this.value; this.form.submit();">
<option value="#">--choose one--</option>
<option value="1.html"> First </option>
<option value="2.html"> Second </option>
...
<option value="99.html"> Ninety-ninth </option>
</select>
</form>

FlashDancer
01-20-2012, 06:04 AM
Thanks Old Pedant, I moved onto another problem, but I will come back to this soon and let you know how it went.

FlashDancer
01-20-2012, 11:45 AM
Hi Old Pedant,

I didn't quite understand this part:

<select onchange="this.form.action=this.value; this.form.submit();">

What is this.form.action=this.value; and this.form.submit() suppose to be?

felgall
01-20-2012, 07:41 PM
Hi Old Pedant,

I didn't quite understand this part:

<select onchange="this.form.action=this.value; this.form.submit();">

What is this.form.action=this.value; and this.form.submit() suppose to be?

this.form.action=this.value ==> sets the value of the form action to the value of the currently selected option.

this.form.submit() ==> submits the form

FlashDancer
01-20-2012, 11:25 PM
I still can't make sense of the explanation.

Could you please show me an example?

Old Pedant
01-20-2012, 11:25 PM
Not to ask a silly question, but... Why didn't you just TRY it?

Is it the use of this that you didn't understand? Or of this.form?

this refers to the <select> object.

this.form refers to the <form> that contains the <select> object.

I could have done:


<select onchange="document.getElementById('formname').action=this.value;
document.getElementById('formname').submit();">

But why not use this to its full advantage??

FlashDancer
01-21-2012, 12:02 AM
Hi Old Pedant,

I didn't try the code because I couldn't make sense of it.

I just tried this now, but it didn't work:



<FORM action="" method="post" name="form">
<SELECT onchange="document.getElementById('name').action=this.value; document.getElementById('name').submit();>
<OPTION></OPTION>
<OPTION value="1.html">First</OPTION>
<OPTION value="2.html">Second</OPTION>
</SELECT>
</FORM>

jmrker
01-21-2012, 01:20 AM
Hi Old Pedant,

I didn't try the code because I couldn't make sense of it.

I just tried this now, but it didn't work:



<FORM action="" method="post" name="form">
<SELECT onchange="document.getElementById('name').action=this.value; document.getElementById('name').submit();>
<OPTION></OPTION>
<OPTION value="1.html">First</OPTION>
<OPTION value="2.html">Second</OPTION>
</SELECT>
</FORM>

:confused:
Just a question: Why did you change the suggested solution of post #2 to the above it you did not understand it in the first place?
Did you try the original solution before you modified it?

Where did the element 'name' come from? Something new?

FlashDancer
01-21-2012, 02:07 AM
I made a mistake when re-writing Old Pedants code from #2 in my previous post. This happened because I had only been out of bed 7 minutes.

I haven't been able to test Old Pedants solution, as can be seen with my previous post.

This is what I currently have in my HTML file related to this.

JavaScript:


<SCRIPT type="text/javascript">
function validateForm() {
if (document.forms["form"]["paymentmethod"].value == "") {
alert ("Cannot proceed to purchase because a payment method has not been selected.");
return false;
}
}
</SCRIPT>


HTML:


<FORM action="" method="post" name="form" onsubmit="return validateForm()">
<DIV>
<DIV class="paymentmethod">
X accepts payment via:
<BR>
<BR>
Cheque
<BR>
Direct deposit
<BR>
MasterCard
<BR>
Telegraphic transfer
<BR>
Visa
<BR>
Western Union
</DIV>
<DIV class="methodandproceed">
Payment will be via: <SELECT class="verdana" name="paymentmethod" onchange="">
<OPTION></OPTION>
<OPTION value="cheque/">Cheque</OPTION>
<OPTION value="directdeposit/">Direct deposit</OPTION>
<OPTION value="mastercard/">MasterCard</OPTION>
<OPTION value="telegraphictransfer/">Telegraphic transfer</OPTION>
<OPTION value="visa/">Visa</OPTION>
<OPTION value="westernunion/">Western Union</OPTION>
</SELECT>
<BR>
<BR>
<INPUT class="verdana" type="submit" value="PROCEED TO PURCHASE">
</DIV>
</DIV>
</FORM>


I have used Old Pedant's solution to the best of my understanding, but as can be seen in the HTML, the onchange="" attribute inside the SELECT element is empty because I don't understand what is suppose to go in here, which brings me back to:



I didn't quite understand this part:

<select onchange="this.form.action=this.value; this.form.submit();">

What is this.form.action=this.value; and this.form.submit() suppose to be?

felgall
01-21-2012, 03:13 AM
this.form.action - this refers to the SELECT (when you use this in JavaScript attached to a tag this always refers to the tag it is attached to - elsewhere this may have other meanings but in this instance this is attached to the SELECT), form refers to the FORM containing it and action refers to the attribute by that name - so it iis a reference to <FORM action=""

this.value - this still refers to the SELECT and value refers to the current value of that field.

So if <OPTION value="directdeposit/"> is the option selected then running that statement changes the form tag to read <FORM action=""directdeposit/"

this.form.submit(); - this still refers to the SELECT and form still refers to the FORM that contains it. submit() is the instruction to submit the form - which means to transfer the content of the form to the script identified in its action attribute.

<FORM> identifies that what is contained inside this tag is a form that is intended to be submitted - when it is submitted then the script referenced by the action attribute on the tag will be run and all the form fields within the form except those that are disabled will be passed to that script either in the querystring (if the forms method attribute is GET) or as POST variables (if the method="POST"). The form can be submitted by an <INPUT TYPE="submit"> an <INPUT type="image"> or from JavaScript by executing the submit() method on the form tag.

If that still doesn't make sense then please tell us what part of the HTML that the JavaScript is referencing that you don't understand properly.

FlashDancer
01-21-2012, 03:31 AM
I am aware that the value attribute in the OPTION element is what the action attribute in the FORM element is to become, and I know that JavaScript makes the action attribute correspond to what the value attribute is.

What I need to know is what goes in the onsubmit attribute in the SELECT element?

Once I know this, I will be able to work out for myself how everything works together.

felgall
01-21-2012, 03:46 AM
What I need to know is what goes in the onsubmit attribute in the SELECT element?

NOTHING - a SELECT does not have any onsubmit attribute. Only <FORM> tags have an onsubmit attribute and in this instance you don't need to give it a value either as the onchange on the SELECT is submitting the form. Also as there is no <INPUT type="submit"> or <INPUT type="image"> tag in the form there is nothing to trigger the <FORM onsubmit=""> so it will not be triggered even if you were to give it a value.

Actually onsubmit and onchange are NOT even attributes - they are old style JavaScript event handlers (and so JavaScript cannot reference then using getAttribute or setAttribute the way it can with real attributes).

FlashDancer
01-21-2012, 03:54 AM
Sorry, I meant to say all I need to know now is what goes on the onchange attribute. Right?

FlashDancer
01-21-2012, 04:19 AM
I have written up a minimalistic version for teaching:



<FORM action="" method="post" name="form">
<DIV>
Please select MasterCard or Visa:
<BR>
<BR>
<SELECT name="paymentmethod" onchange="">
<OPTION value="mastercard/">MasterCard</OPTION>
<OPTION value="visa/">Visa</OPTION>
</SELECT>
<BR>
<BR>
<INPUT type="submit" value="PROCEED">
</DIV>
</FORM>


Could someone please complete what I am missing? Trying to explain it to me isn't working, as this thread shows.
I will be able to understand if I can see it working, as I am a visual learner.

felgall
01-21-2012, 05:04 AM
When your visitor changes the selected option in the select list the onchange event handler is triggered and runs the code it contains. With your latest example there is no code in that handler and so it does nothing.

Since the first entry is selected by default if you don't specify which is the default one to be selected the only way to trigger that event with your minimalistic code is to select the Visa option (you'd need a blank default option in the list if you want changing to Mastercard to be able to trigger the event first as it isn't triggered until you change the selected option - with the code you have there you'd only trigger the event changing to Mastercard if you'd first changed it to Visa and assuming that the onchange triggered by changing it to Visa doesn't take you away from the page as the full solution previously provided would do).

FlashDancer
01-21-2012, 05:15 AM
Could you give me an example?

Old Pedant
01-21-2012, 05:17 AM
I will say *ONE MORE TIME*:



<SELECT name="paymentmethod" onchange="this.form.action=this.value; this.form.submit();">

THAT WILL WORK WITH THE CODE FROM your post #15.

IF YOU DON'T BELIEVE IT, THEN TRY IT!

But note what Felgall says, too: You can't trigger an onchange by clicking on the first option, because that does *NOT* constitute a change. You need a dummy first option, AS I ALSO SHOWED YOU in my first post.

***********

*HOWEVER* ...

It will *not* work when you have

<FORM action="" method="post" name="form" onsubmit="return validateForm()">

But that is *ALSO TRUE* of the code you showed in your post #1!!!

When you call the form's submit() function *directly* you BYPASS THE onsubmit handler of the <form>!!!

That is *ALWAYS* true.

So *IF* you want to use onchange to submit the form and you *still* want to validate the form, then you have to do it this way:


<select name="paymentmethod"
onchange="this.form.action=this.value; if ( validateForm() ) this.form.submit();">


You had not bothered to show us that you had an onsubmit for your <form> when you first asked the question, so my answer was correct as the question was posed.

Old Pedant
01-21-2012, 05:18 AM
Could you give me an example?

See my first post in this thread.

Old Pedant
01-21-2012, 05:21 AM
Hi Old Pedant,

I didn't try the code because I couldn't make sense of it.

I just tried this now, but it didn't work:



<FORM action="" method="post" name="form">
<SELECT onchange="document.getElementById('name').action=this.value; document.getElementById('name').submit();>
<OPTION></OPTION>
<OPTION value="1.html">First</OPTION>
<OPTION value="2.html">Second</OPTION>
</SELECT>
</FORM>


Well of course it didn't work! You used getElementById('name') but your <form> DOES NOT HAVE ANY ID.

*IF* you had coded

<form action="" method="post" id="name">

then it would have worked.

FlashDancer
01-21-2012, 05:49 AM
<SELECT name="paymentmethod" onchange="this.form.action=this.value; this.form.submit();">



It worked!
I thought you were giving.an.example, but its the actual code! LOL
Thanks! Wow, JavaScript really is so awesome. I thought it was a real hard language, but its actually pretty cool and powerful.

Now all it needs is a specification manual thats not 2500 pages long and written so that 99% of the population can understand it.

Thanks again!

Old Pedant
01-21-2012, 05:52 AM
But watch out!

See my warning about the fact your validateForm method will *NOT* get called using that code.

Assuming you need the validation to be called, see the last code block in my message #18.

jmrker
01-21-2012, 05:57 AM
Sorry, too slow in responding...

FlashDancer
01-21-2012, 05:59 AM
Sure, I left out validation from my minimalistic code. The real code has it and has been tested; works. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum