Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    Banned
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Is it possible to use this JavaScript INPUT method with SELECT?

    I use this code in a form that posts to two different destinations, I use JavaScript to achieve it.

    Code:
    <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..
    Last edited by FlashDancer; 01-20-2012 at 04:21 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    Code:
    <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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    FlashDancer (01-21-2012)

  • #3
    Banned
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant, I moved onto another problem, but I will come back to this soon and let you know how it went.

  • #4
    Banned
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi Old Pedant,

    I didn't quite understand this part:
    Code:
    <select onchange="this.form.action=this.value; this.form.submit();">
    What is this.form.action=this.value; and this.form.submit() suppose to be?
    Last edited by FlashDancer; 01-20-2012 at 11:48 AM.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by FlashDancer View Post
    Hi Old Pedant,

    I didn't quite understand this part:
    Code:
    <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
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Banned
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I still can't make sense of the explanation.

    Could you please show me an example?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    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:
    Code:
    <select onchange="document.getElementById('formname').action=this.value;
                     document.getElementById('formname').submit();">
    But why not use this to its full advantage??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Banned
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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>

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by FlashDancer View Post
    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:

    Code:
    <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>

    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?

  • #10
    Banned
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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:
    Code:
    <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:

    Quote Originally Posted by FlashDancer View Post
    I didn't quite understand this part:
    Code:
    <select onchange="this.form.action=this.value; this.form.submit();">
    What is this.form.action=this.value; and this.form.submit() suppose to be?
    Last edited by FlashDancer; 01-21-2012 at 02:17 AM.

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    Banned
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.
    Last edited by FlashDancer; 01-21-2012 at 03:34 AM.

  • #13
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by FlashDancer View Post
    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).
    Last edited by felgall; 01-21-2012 at 03:50 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #14
    Banned
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Sorry, I meant to say all I need to know now is what goes on the onchange attribute. Right?

  • #15
    Banned
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I have written up a minimalistic version for teaching:

    Code:
    <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.
    Last edited by FlashDancer; 01-21-2012 at 04:30 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •