How to get values from select list?

Question

I am trying to get a value from a select list that will determine what my form method is, either get or post. I am having trouble doing this though. Any suggestions?

<select name ="optionlist" form ="form" id="test">
  <option value="get">GET</option>
  <option value="post">POST</option>
</select>

<form name="input" action="" method="" id="form">
    <input type="text" name="search">
    <input name="buttonExecute" type="submit" value="Submit"/>
</form>

JS

function myFunction(input){
    alert("You typed in : " + input);
}

function load(){
    alert("Page Loaded! This is the current text in the textbox : "+ document.getElementsByName('search')[0].value);
}

func

window.onload = load;

Any help will be greatly appreciated! Thanks!

I was tempted to just code it for you, but I'll do you more good if I encourage you to help yourself. What have you tried so far? Please show some of your related JS code. — TecBrat, Sep 17 '14 at 19:54
This is a duplicate... http://stackoverflow.com/questions/2780566/to-get-selected-value-of-a-dropdown-select-element-in-jquery http://stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript — Sebastien Daniel, Sep 17 '14 at 19:55
@SebastienD. I'm not sure it's a duplicate. The real question here seems to be "how do I change the `method` attribute of a form" — TecBrat, Sep 17 '14 at 19:57
You're partially right, I suppose there are two question in this. — Sebastien Daniel, Sep 17 '14 at 19:58

Sebastien Daniel · Accepted Answer · 2014-09-17T21:24:04.643

1

First you add an event listener to your select element, to trigger a function when it's value changes:

document.getElementById('test').addEventListener('change', setFormMethod, true);

Second you make sure your triggered function changes the form's method attribute:

function setFormMethod(e) {
  document.getElementById('form').setAttribute('method', e.target.value);
}

EDIT

<html>
 <head>
 </head>
 <body>
  <!-- your HTML here -->
 <script>
  // my code here
 </script>
</body>

edited Sep 17 '14 at 21:24

answered Sep 17 '14 at 20:00

Sebastien Daniel

4,099
2
12
33

This is very close to the solution I'd have used. – TecBrat Sep 17 '14 at 20:09
is there anything missing for it to be an appropriate solution? – Sebastien Daniel Sep 17 '14 at 20:20
I'm confused on where exactly to add these? – John Sep 17 '14 at 20:52

Cyril Duchon-Doris · Answer 2 · 2014-09-17T20:04:56.357

0

I believe this would work

$("#yourDropdownId").change(function() {
    value = $( "#yourDropdownId option:selected").val()
    if (value === 'post')
        $("#yourFormId").attr("method", 'POST')
    else
        $("#yourFormId").attr("method", 'GET') 
});

edited Sep 17 '14 at 20:04

answered Sep 17 '14 at 19:58

Cyril Duchon-Doris

10,472
6
59
124

I am new to javascript and html. Where would I insert this? Within the same file within a "script" tag? – John Sep 17 '14 at 20:01
It's basically the same answer as Sebastien D., posted 1 min before, and using jQuery. – Cyril Duchon-Doris Sep 17 '14 at 20:01
@John yes inside a script tag or in a separate .js file that you would then include. Make sure that you also include the jQuery javascript file. Or just use Sebastien D. answer if you don't want to bother with that. – Cyril Duchon-Doris Sep 17 '14 at 20:02
I like JQuery, but I wouldn't load it JUST for this. – TecBrat Sep 17 '14 at 20:10
Yes, that's why you should go with Sebastien D's answer :D – Cyril Duchon-Doris Sep 17 '14 at 20:13

How to get values from select list?

2 Answers2