CODEWITHSUNDEEP
javascriptjqueryhtml
Andrew
Andrew

Reputation: 465

Use JavaScript to change the nature of an HTML element

I have an html form that has a select menu. The last option on the menu is 'other'. What I would like to do is if the user selects 'other' the select menu turns into a text field. I know this can be done with show/hide feature of jQuery, but I am trying to keep it simple. I have feeling this is not really possible, but is there a JavaScript command (jQuery or not) that will turn the select element into an input element?

Upvotes: 1

Views: 191

Answers (2)

WindsofTime
WindsofTime

Reputation: 611

Pure JavaScript solution: JSFiddle Demonstration

Replaces the select element with a text field. Comment out document.getElementById("choice").remove(); and uncomment the else statement if you want to keep the select element, so that the end user can change their choice.

HTML:

<form id="myForm">
    <select id="choice" onchange="checkOptions(this.value);">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
      <option value="other">Other</option>
    </select>
</form>

JavaScript:

function checkOptions(value) {
    form = document.getElementById("myForm");
    if(value == "other") {
        input = document.createElement("input");
        input.setAttribute("id", "otherText");
        form.appendChild(input);
        document.getElementById("choice").remove();
    }
    /*else {
        if(document.contains(document.getElementById("otherText")))
            document.getElementById("otherText").remove();
    }*/
}

Upvotes: 0

Jason Sperske
Jason Sperske

Reputation: 30426

This could work (demo)

<select id='choices' name='Choice'>
    <option>Ford</option>
    <option>Toyota</option>
    <option>Honda</option>
    <option>Other</option>    
</select>

With this JavaScript

$('#choices').on('change', function() {
    var choice = $(this);
    if(choice.val()=== 'Other') {
        choice.replaceWith('<input name="Choice"/>')
    }
});

Or for a more robust solution (demo)

<div class='ChoiceWithOther'>
    <select name='Choice'>
        <option>Ford</option>
        <option>Toyota</option>
        <option>Honda</option>
        <option>Other</option>    
    </select>
    <input name='Choice' disabled='disabled'/><a href='#' class='UndoChoice'>&times;</a>
</div>

With this JavaScript:

var select = $('select[name=Choice]'),
    input = $('input[name=Choice]'),
    undo = $('.UndoChoice');

select.on('change', function() {
    if(select.val()=== 'Other') {
        select.prop('disabled', true); //Disbaled inptus won't be sent on FORM submits
        select.hide(); //Don't confuse user

        input.prop('disabled', false);
        input.show();
        undo.show();
    }
});

undo.on('click', function() {
    select.prop('disabled', false); //Disabled inputs won't be sent on FORM submits
    select.show(); //Don't confuse user
    select.val($('option:first', select).val()); //reset to first value

    input.prop('disabled', true);
    input.hide();
    undo.hide();
});

input.hide();
undo.hide();

Upvotes: 2

Related Questions