CODEWITHSUNDEEP
javascriptjqueryselecttexttoggle
Thomas Hughes
Thomas Hughes

Reputation: 99

jQuery toggle - Changing from select input to text input

I'm very new to using jQuery and JavaScript but here goes. I am trying to create a toggle function for my website. There is an input to select the name of the event which displays as default as a dropdown list of all the events in the database - but I want there to be an option to change it to manual input and type the name of the event as what ever you want.

I can get this to work fine! However I can't get the link to change the input BACK to a select box to work.

See my code below:

/// jQuery Code ///

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    function toggleEventInput() {
       $("#EventNameDropDown")
.replaceWith('<input type="text" size="35" name="boxEvent" class="FieldInput" />');
        $("#EventNameChange")
.replaceWith('<a href="javascript:toggleEventInputBack();"> (Drop Down Input)</a>');
    }

    function toggleEventInputBack() {
       $("#EventNameDropDown")
.replaceWith('TEST');
        $("#EventNameChange")
.replaceWith('<a href="javascript:toggleEventInput();"> (Manual Input)</a>');
    }   
</script>

/// HTML Code ///

<table>
       <tr>
        <td class="label">Event:</td>
            <td>
                <span id="EventNameDropDown">
                <select name="boxEvent" class="FieldInput" style="width:254px;" />
                <?= $EventNameDropDownList ?>
                </select>
                </span>
                <span id="EventNameChange">
                <a href="javascript:toggleEventInput();"> (Manual Input)</a>
                </span>
            </td>
        </tr>
        <tr>
            <td class="label">Company:</td>
            <td><input type="text" size="35" name="boxEvent" class="FieldInput" /></td>
        </tr>
</table>

As said, when you click the original link to '(Manual Input)' it works fine and changes it to a text box. But then when you click the '(Drop Down Input)' link it does nothing.

Any help would be appreciated.

Upvotes: 0

Views: 1834

Answers (2)

John S
John S

Reputation: 21492

You need to use .html() instead of .replaceWith(). The former replaces the contents of the element. The latter replaces the element itself. By using .replaceWith() you are replacing the <span> that contains the <select> too.

Krishna is suggesting that rather than just replace the html for the <select>, you first store it in a variable so you can put it back later.

You could store it as data on an element, like this:

function toggleEventInput() {
    // Store the html for the <select>.
    $('#EventNameDropDown').data('selectHtml', $('#EventNameDropDown').html());

    $("#EventNameDropDown").html('<input type="text" size="35" name="boxEvent" class="FieldInput" />');
    $("#EventNameChange").html('<a href="javascript:toggleEventInputBack();"> (Drop Down Input)</a>');
}

function toggleEventInputBack() {
    $("#EventNameDropDown").html($('#EventNameDropDown').data('selectHtml'));
    $("#EventNameChange").html('<a href="javascript:toggleEventInput();"> (Manual Input)</a>');

    // Clear the html for the <select>. We will get it again later if we need it.
    $('#EventNameDropDown').data('selectHtml', '');
}

Upvotes: 1

Krishna Raj
Krishna Raj

Reputation: 866

Its better to add the drop-down list inside a div/span and while clicking the toggle button, store the data inside the div/span to a variable and replace the content with the input box. on next toggle, replace the div/span with that data in the variable. a status variable 0/1 will help to toggle the data..

Upvotes: 0

Related Questions