html - Can I add a parameter to a form through Javascript? - Stack Overflow

I have an HTML form that adds parameters to an URL. I only want the extra parameter added if a certain option is selected in the same form. So let's say I want to add the parameter "addedParameter=1" to the URL if "Commercial" is selected, otherwise I don't want the parameter to appear at all (other wise I get no results for "House" and "Land") Please let me know what I can do.

<select id="pt" value="pt" name="pt" onChange="addParameter()">
<option value="" name="">Select</option>
<option value="1" name="1">House</option>
<option value="2" name="2">Commercial</option>
<option value="3" name="3">Land</option>
</select>

<input type="hidden" id="add" name="" value="1">

function addParameter(){
if(pt.selectedIndex == 1)
document.getElementById("add").name = "addedParameter";
}

I have an HTML form that adds parameters to an URL. I only want the extra parameter added if a certain option is selected in the same form. So let's say I want to add the parameter "addedParameter=1" to the URL if "Commercial" is selected, otherwise I don't want the parameter to appear at all (other wise I get no results for "House" and "Land") Please let me know what I can do.

<select id="pt" value="pt" name="pt" onChange="addParameter()">
<option value="" name="">Select</option>
<option value="1" name="1">House</option>
<option value="2" name="2">Commercial</option>
<option value="3" name="3">Land</option>
</select>

<input type="hidden" id="add" name="" value="1">

function addParameter(){
if(pt.selectedIndex == 1)
document.getElementById("add").name = "addedParameter";
}

• javascript
• html
• forms
• parameters

Share Improve this question Follow asked Aug 23, 2013 at 7:13 MikeMike 44033 gold badges77 silver badges1717 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

I'd suggest that, rather than adding/removing the element based on a condition you should, instead, make use of the disabled attribute (only non-disabled elements are considered 'successful' and, therefore only non-disabled elements will have their names/values submitted):

function addParameter () {
    var sel = document.getElementById('pt'),
        input = document.getElementById('add');
    input.disabled = sel.selectedIndex != 2;
}

document.getElementById('pt').onchange = addParameter;

JS Fiddle demo.

Note, in the demo I've removed the type="hidden" attribute-value, in order to visibly demonstrate the effect, but that's not required for this approach to work. Also, the conditional input has the disabled="disabled" attribute set by default (so if the form is submitted prior to this select being affected by the user it'll still not be accidentally submitted).

You could do it clearer by using jQuery. When html definitions are not enough, I prefer to create and delete the (input) nodes all by dynamic javascript. The two ways you are discussing (changing by select event or by adding a submit event handler) also works with that :

function addParameter() {   
    if ($('#pt').val() == "2")  $('<input/>', { id: 'id_optionalParam', name: 'optionalParam', value: '1234', type: 'hidden' }).appendTo('#TheForm');
    else                        $('#id_optionalParam').remove();
}

<input type="hidden" id="add" name="addedParameter" value="1">

function addParameter(){
if(pt.selectedIndex != 1)
  input = document.getElementById("add")
  parent = input.parentNode
  parent.removeChild(input)
}

This will remove the input when the additionalParameter is not set, otherwise it won't get changed.

Edit: alternative solution:

function addParameter(){
    if(pt.selectedIndex == 1) {
        document.getElementById("add").name = "addedParameter";
    } else {
        document.getElementById("add").name = "";
    }
}

Also see the docs for removeChild

I think that the best approach in this situation is to attach an event handler to the submit event of the form. Do what you need and then submit the form. Adding the input in the html and removing it after that is not so flexible.

<script>
    window.onload = function() {

        var form = document.getElementById("theform"),
            select = document.getElementById("pt");

        form.addEventListener("submit", function(event) {
            event.preventDefault();
            if(select.value == 2) {
                var element = document.createElement("INPUT");
                element.setAttribute("type", "hidden");
                element.setAttribute("name", "addedParameter");
                element.setAttribute("value", "1");
                form.appendChild(element);
            }
            form.submit();
        });

    }
</script>
<form method="get" id="theform">
    <select id="pt" value="pt" name="pt" onChange="addParameter()">
        <option value="" name="">Select</option>
        <option value="1" name="1">House</option>
        <option value="2" name="2">Commercial</option>
        <option value="3" name="3">Land</option>
    </select>
    <input type="submit" />
</form>

You can add extra parameter by adding an extra fidden field fo the form when needed option is selected, and remove it otherwise:

 function addParameter(){
   var addedParameterField = document.getElementById("addedParameter");
   if (pt.selectedIndex != 1) {
     if (addedParameterField) {
       addedParameterField.parentNode.removeChild(addedParameterField);
     }
   } else {
     if (!addedParameterField) {
       var addedParameterField = document.createElement("input");
       addedParameterField.type = "hidden";
       addedParameterField.name = "addedParameter"; 
       addedParameterField.value = "1";
       container = document.getElementById('myform');
       container.appendChild(addedParameterField);
     }
   }
 }