We Keep Coding

Remove INPUT field from SUBMIT with Javascript if value is zero

I have a submit form like this.
<form method="post" id="formCard" name="formCard">
<input type="radio" name="name[]" value="0">
<input type="radio" name="name[]" value="1">
<input type="radio" name="name[]" value="2">
</form>
I want to know if it is possible to remove with javascript the name[] from the POST if value selected was == 0. Remember the form still need to submit, but it can not send name in the POST.
In other words, if in my PHP page i do isset($_POST[name]) it should return not exist, since javascript remove this from submission
$( "#formCard" ).submit();

Disabled controls do not submit their values.
So you can disable the control before the form submits, which allows the user to still select it.
$("form").submit(() => {
$("[name='name[]'][value='0']").attr("disabled", "disabled");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="formCard" name="formCard">
<input type="radio" name="name[]" value="0">
<input type="radio" name="name[]" value="1">
<input type="radio" name="name[]" value="2">
<button type='submoit'>
submit
</button>
</form>
Select 1 or 2, submit, check network tab and payload, the value will be included. Then select 0, submit, check network tab and payload and it won't be included.
Depending on your requirement, you might need to re-enable the radio button (by removing the disabled attribute), eg if the submit does not go ahead due to other validation checks.

This one removes the "name" attribute from the element with value="0"
document.body.querySelector('[value*="0"]').removeAttribute('name');

Form: Post field values to different fields depending on radio selection

I'm building a registration form where registrants have to give their phone number.
As I'm storing land line and mobile in separate contact fields, I need to know which one they are submitting.
I know I can provide the 2 form fields, but want to have the form frontend as simple as possible.
Therefore I've just one text field for the number and radio buttons for selecting land line or mobile.
The value of the text field should be posted in one of 2 hidden fields, based on radio selection.
I could also ask before the input field pops up with correct contact field, but that doesn't look good.
Phone number
<label>Is this a cell phone or a land line?</label><br>
<input type="radio" class="radio1" name="question" value="1">Land Line</input><br>
<input type="radio" class="radio1" name="question" value="0">Cell Phone</input>
<input type="hidden" class="text" name="land line"></input><br>
<input type="hidden" class="text" name="cell phone"></input><br>

The input which you will give to the first input will be given to the hidden field on select of the radio button. If any previous value is given to the hidden fields will also be made empty
$(document).ready(function(){
$('.radio1').change(function(){
if($(this).val()==1)
{$('#landline').val($(number).val());$('#phone').val('')}
else
{$('#phone').val($(number).val());$('#landline').val('')}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="number"/><br>
<label>Is this a cell phone or a land line?</label><br>
<input type="radio" class="radio1" name="question" value="1">Land Line</input><br>
<input type="radio" class="radio1" name="question" value="0">Cell Phone</input>
<input type="hidden" id="landline" value='' class="text" name="land line"></input><br>
<input type="hidden" value='' id="phone" class="text" name="cell phone"></input><br>

How to use tabindex and arrow key over group of radio and input fields

I have a form similar to as shown below. There are group of radios and input field corresponding to it.
Condition it should follow
first tab index select first radio of group 1. Incase selection has to be changed i can use arrow key
second tab index should select first radio from group 2. Incase selection has to be changed i can use arrow key
while in group 2 if i press tab again it should focus on textbox corresponding to radio
pressing tab again should take focus to group 3 textbox
All of above condition are working except when first radio of group 2 is selected. pressing tab does take it to corresponding textbox. But on again pressing tab it goes to another textbox of group 2 (which should not happen).
Please help. HTML code as below
<html>
<body>
Please select gender (Group 1)<br>
<input type="radio" checked name="gender" tabindex="1" value="male"> Male<br>
<input type="radio" name="gender"tabindex="1" value="female"> Female
<br><br>
Please select one of following (Group 2)<br>
<input type="radio" checked name="payment"tabindex="2" value="amount"> $<input type="text" tabindex="2.1"><br>
<input type="radio" name="payment" tabindex="2" value="installment">#<input type="text" tabindex="2.1">
<br><br>
Please select payment date (Group 3)<br>
<input type="text" tabindex="3">
</body>
</html>
<< Try pressing tab key when cursor is at postion as shown in the image >>

Since your post is tagged with javascript, I assume javascript is allowed. Disabling the input-field will prevent 'tabbing' to it. So disable the text-field after the '#' by default (by adding disabled="disabled") and add onchange-events to the radio-buttons to disable the text-field after '$' and enable the text-field after '#' (and vice versa).
onchange="document.getElementById('amount').disabled=null; document.getElementById('installment').disabled='disabled'; "
And add the proper id's to the text-field, so the javascript-selectors will work.
Full code:
<html>
<body>
Please select gender (Group 1)<br>
<input type="radio" checked name="gender" tabindex="1" value="male"> Male<br>
<input type="radio" name="gender"tabindex="1" value="female"> Female
<br><br>
Please select one of following (Group 2)<br>
<input type="radio" checked name="payment"tabindex="2" value="amount" onchange="document.getElementById('amount').disabled=null; document.getElementById('installment').disabled='disabled'; "> $<input type="text" tabindex="2.1" id="amount"><br>
<input type="radio" name="payment" tabindex="2" value="installment" onchange="document.getElementById('amount').disabled='disabled'; document.getElementById('installment').disabled=null; ">#<input type="text" tabindex="2.1" disabled="disabled" id="installment">
<br><br>
Please select payment date (Group 3)<br>
<input type="text" tabindex="3">
</body>
</html>

You could set tabindex="-1" with JavaScript on the not selected textbox, therefore this textbox will be ignored in the tab order by the browser. Then you can get rid of all those manual tabindex definitions as well, because the browser will already follow the desired tab order by default.

AngularJS: disable button when input fields are empty

I have a dropdown menu, two input text box, and a submit button. I want the submit button to be disabled until dropdown item is selected AND both input boxes are filled. I looked at several examples including this one and this one but none of these are working for me. Below is my code. Thanks
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" >
** content for dropDown menu, populating it by using Django
</select>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" />
To Date:
<input type="text" id="dateTo" ng-model="data.date2" />
<button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown && !!data.date1 && !!data.date2)">Submit </button>
</form>
I also tried this method below:
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" >
** content for dropDown menu, populating it by using Django
</select>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" required/>
To Date:
<input type="text" id="dateTo" ng-model="data.date2" required />
<button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit </button>
</form>
So initially when the page loads and all fields are empty by default, the Submit button is disabled and the problem is that after all three fields are filled, it doesn't get enabled. Thanks

Your second method works for me (utilizing myForm.$invalid) if I add required to the dropdown element. I've created a plunkr you can play with here.
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" required>
<option>red</option>
<option>blue</option>
<option>green</option>
</select><br/>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" required/><br/>
To Date:
<input type="text" id="dateTo" ng-model="data.date2" required /><br/>
<button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit</button>
</form>
Note: I used Angular 1.4 in the plunkr as you did not specify which version of Angular you are working with.
Edit: OP stated that issue was created by using JQuery's datepicker. May I suggest using angular-ui boostrap datepicker? Plunker example - Angular-UI Bootstrap docs

Why dont you use ng-disabled="myForm.myName.$pristine" because pristine will check for each variable inserted in textboxes
please check small example here..
ng pristine example

Enable/disable field

I have two fields in my form. One is populated from the site and one is user input. When the field is populated from the site, the field will be disabled, and when the user inputs it should be enabled. I am trying to pass a parameter that changes the value in either case. This doesn't seem to work. Any help will be greatly appreciated. Only one input will be visible in the page.
<input type="text" id="test" name="test" value="" style="text-transform: uppercase;" onchange="updatetest()" enabledisable="disabled" maxlength="32">
or
<input type="text" id="test" name="test" value="" style="text-transform: uppercase;" onchange="updatetest()" enabledisable="disabled" maxlength="32">
function updatetest () {
$("#test").prop( enabledisable, false );
}

Disable:
$('input[name="test"]').attr('disabled', true)
Enable:
$('input[name="test"]').removeAttr('disabled');