[Solved] Add Hidden Input onCheck

by


To make it hidden just replace type=”text” with type=”hidden” 🙂

JQuery:

    <form id="myForm">
        <input onclick="addRemoveHiddenInput('testId', 'testName', 'testValue')" type="checkbox" id="mc" name="paymentMethod" value="Mastercard"><label for="mc"> Mastercard</label>
    </form>

    <script>

        function addRemoveHiddenInput(id, name, value) {

            if ( $('#' + id).length > 0 ) {

                $('#' + id).remove();  
            } else {

                $('#myForm').append('<input type="text" name="' + name + '" value="' + value + '" id="' + id + '" />');   
            }

        }

    </script>

Fiddle: http://jsfiddle.net/9w5g3swr/

Plain Javascript:

<form id="myForm">
    <input onclick="addRemoveHiddenInput('testId', 'testName', 'testValue')" type="checkbox" id="mc" name="paymentMethod" value="Mastercard"><label for="mc">Mastercard</label>
</form>

<script>

    function addRemoveHiddenInput(id, name, value) {

        var hiddenInput = document.getElementById(id);

        if ( hiddenInput != null ) {

            hiddenInput.parentNode.removeChild(hiddenInput);
        } else {

            document.getElementById('myForm').innerHTML = document.getElementById('myForm').innerHTML + '<input type="text" name="' + name + '" value="' + value + '" id="' + id + '" />';
        }

    }

</script>

Fiddle: http://jsfiddle.net/uu1ftnhg/

6

solved Add Hidden Input onCheck