javascript - Add Hidden Input onCheck -

javascript - Add Hidden Input onCheck -

can tell me best way go adding hidden input field form when user checks checkbox , remove if user unchecks checkbox?

below form post paypal. have build of fields before post. want include checkbox in form when clicked add together hidden field "pet fee".

<form id='paypalcheckout' action='https://www.paypal.com/cgi-bin/webscr' method='post' style="margin-bottom: 10px"> <input type="hidden" name="item_name_1" value="demo holiday home" /> <input type="hidden" name="item_number_1" value="demo-vacation-home" /> <input type="hidden" name="amount_1" value="4" /> <input type="hidden" name="quantity_1" value="1" /> <input type="hidden" name="item_name_2" value="refundable harm deposit" /> <input type="hidden" name="item_number_2" value="refundable-damage-deposit" /> <input type="hidden" name="amount_2" value="3" /> <input type="hidden" name="quantity_2" value="1" /> <input type="hidden" name="item_name_3" value="cleaning fee" /> <input type="hidden" name="item_number_3" value="cleaning-fee" /> <input type="hidden" name="amount_3" value="2" /> <input type="hidden" name="quantity_3" value="1" /> <input type="hidden" name="item_name_4" value="12% reservation fee" /> <input type="hidden" name="item_number_4" value="12%-reservation-fee" /> <input type="hidden" name="amount_4" value="0.48" /> <input type="hidden" name="quantity_4" value="1" /> <input type="hidden" name="item_name_5" value="8% taxation rate" /> <input type="hidden" name="item_number_5" value="8%-tax-rate" /> <input type="hidden" name="amount_5" value="0.32" /> <input type="hidden" name="quantity_5" value="1" /> <input type='hidden' name='business' value='juliocpreciado@gmail.com' /> <input type='hidden' name='shopping_url' value='http://www.dreamhomevacationrentals.com/cart/' /> <input type='hidden' name='lc' value='en_us' /> <input type='hidden' name='cmd' value='_cart' /> <input type='hidden' name='charset' value='utf-8'> <input type='hidden' name='upload' value='1' /> <input type='hidden' name='no_shipping' value='2' /> <input type='hidden' name='currency_code' value='usd' id='currency_code' /> <input type='hidden' name='custom' value='|||' /> <input type='hidden' name='notify_url' value='http://www.dreamhomevacationrentals.com/store/ipn/'> <input type='hidden' name='return' value='http://www.dreamhomevacationrentals.com/thank-you/' /> <input id='paypalcheckoutbutton' type='image' src='https://www.paypal.com/en_us/i/btn/btn_xpresscheckout.gif' value='checkout paypal' /> </form>

to create hidden replace type="text" 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/

javascript jquery forms function