Remove INPUT field from SUBMIT with Javascript if value is zero - javascript

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');

Related

Autosubmit multiple checkboxes as comma separated string in url?

I've looked through some topics but they either have auto-submit where each checkbox is as a separate parameter in the URL or they need submit button. What I am trying to achieve is:
My current HTML form:
<form name="status" id="status" method="get">
<input type="checkbox" name="status[]" value="0" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="1" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="2" onchange="document.getElementById('status').submit()" />
</form>
With this, I have auto-submit whenever a checkbox is checked, but I have an URL like ...&status%5B%5D=0&status%5B%5D=1
What I need is a comma-separated parameter in the URL like &status=0,1 while keeping the auto-submit option. Also, there are some more parameters in the URL, so this must be appended at the end while keeping the rest parameters.
Is this possible? I'm not familiar with javascript but I think there might be a way ...

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 disable only one field in form using javascript?

I have a form with multiple text fields.
In the form at the top is a question of two radio buttons:
Go direct or go public.
Go direct means you have to supply an email address.
Go public means the email box is disabled.
<input type="radio" name="target" value="public" />
<label for "public">Open to anyone </label></br>
<input type="radio" name="target" value="direct"/>
<label for="newEmail">Email address of the person:</label>
<input type="text" name="newEmail" id='newEmail'>
</br>
</br>
</br>
<label for="title">Book title:</label>
<input type="text" name="title" id='title'></br>
<label for="location">Location:</label>
<input type="text" name="location" id='location'>
No other form fields must be affected
You can do stuff like this
$('input:radio').on('click',function(){
if(this.checked && this.value == "public") // this.checked is not necessary as checking value already
$("#newEmail").prop("disabled",true);
else
$("#newEmail").prop("disabled",false);
});
Fiddle
Side Note: I would suggest click instead change() because radio buttons are often toggled in a group, you do not need to add more than one case or conditional logic like you do with checkboxes. though change can also be used
This will trigger the disabled state of the email input based on which radio button is selected.
var $radios = $('input[type="radio"]');
$radios.change(function() {
$('#newEmail').prop('disabled', $radios.first().is(':checked'));
});
JSFiddle

Retain value of text box whose radio button is clicked

I have different radio button, each with a text box value associated to it on my form. A user can select only one radio button at a time and submit the form. However, occasionally a user will enter data in a textbox for one radio button and then choose a different option and enter textbox data in it. Currently it preserves data in both textboxes and submits them as well.
Is there any way I can clear the data and preserve only for the one that got clicked last? Like an onclick event which clears all the data of any other radio button other then the checked one.
just a quick static example code:
<form class="form-horizontal" id="whereEntry" method='post' action=''>
<input type="radio" name="formOption" id="radio1210" value="1210" checked="checked">Waiting on Approval<br>
Comment:<input type="text" name="Comment"><br>
<input type="radio" name="formOption" id="radio1211" value="1211" checked="checked">Waiting on Authorization<br>
Comment:<input type="text" name="Comment">
<input type="Submit" value="Submit">Submit
</form>
Textbox value are displayed when radio button is clicked. So If I click a radio button and I enter a value in the comment textbox and then if click another radio button, both the comment box values are retained.
something like this
Html MarkUp
<input type="radio" id="radio1" name="gender"/>Male
<input type="text" id="txt1">
<br />
<input type="radio" id="radio2" name="gender"/>FeMale
<input type="text" id="txt2">
Jquery
$("input:radio").click(function(){
$("input:text").not($(this).next()).val("");
})
Live Demo

How to submit form field values with a link?

How can I submit the values of the textbox and radio button with "testLink1" in the following code:
<cfform name="frmEdit" method="POST" >
<INPUT type="text" name="txtName" value ="" >
<INPUT type="radio" name="typeA" value ="exempt" checked> Exempt
<INPUT type="radio" name="typeA" value ="non_exempt"> Non-exempt
testLink1
</cfform>
I have my own reason to use <a> tag instead of a submit button.
In order to submit the form via a link you will need to use JavaScript. I have rewritten your code below:
<form name="frmEdit" action="test1.cfm" method="POST">
<input type="text" name="txtName" value="" >
<input type="radio" name="typeA" value="exempt" checked="checked"> Exempt
<input type="radio" name="typeA" value="non_exempt"> Non-exempt
testLink1
</form>
Or as Travis suggested below, change the <a> tag like so:
testLink1
This should work for your simple example. All of the fields will be available to you in the FORM scope in ColdFusion.
There is also no reason to use cfform if you are not using any of it's functionality (which your example is not).

Categories