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

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>

Related

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

jsp return the radio box value and auto select

I have a order.jsp which has a form containing a list of radio boxes and textfields. When submit button is clicked, it will forward to validate.jsp to validate the input data. If they are not valid, it will return to order.jsp again.
I want to keep the user's input data in the form. I use request.getSession().getAttribute and request.getSession().setAttribute to return the input data and successfully works in text.
String date = (String) request.getSession().getAttribute("date");
<input id="date" name="date" type="text" size="25" value="<%=date%>">
However, I have no idea in radio box. Even i can get the selected value, how it can be used to select that particular button back which is clicked by the user before?
<INPUT TYPE=radio name="weight" value="1" id="weight1">1 pound
<INPUT TYPE=radio name="weight" value="1.5" id="weight2">1.5 pound
<INPUT TYPE=radio name="weight" value="2" id="weight3">2 pounds

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

change value of 2 fields depending on dropdown and radio button selection

I am trying to replicate the sort of functionality which is present on this website. The price, mentioned above the 'Get a Protective Plan' button, updates with respect to different options selected from the dropdown and the radio button selected.
Now I have a form which has 2 read-only input field's for 'Price' and 'Price-2' and I want the value of those fields to be updated depending on the selection of the dropdown options and the radio button by the user. So basically, the values of the read-only input fields, which needs to be updated, will be an addition of the values of the selected dropdown option and the radio button.
Here's a rough example of the form which I've created along with the dropdown and the radio buttons:
<form action="#" method="post">
<label>Last Name*</label>
<input type="text" name="lastname" value="" required="true">
<select id="p1">
<option value="1">$1</option>
<option value="2">$2</option>
<option value="3">$3</option>
<option value="4">$4</option>
<option value="5">$5</option>
</select>
<input id="p2" type="radio" name="price2" value="50">$50<br/>
<input id="p2" type="radio" name="price2" value="100">$100
<label>Price</label>
<input type="text" name="Price" readonly="readonly" value="">
<input type="text" name="Price-2" readonly="readonly" value="">
<input type="submit" value="Submit">
</form>
So in this form if I select the second option from the dropdown whose value is '2' and then I select the first radio button whose value is '50', I'd want the value of the 'Price' and the 'Price-2' fields to automatically become '$52'. I know this can be achieved using jQuery but I cannot really figure out how as I am still learning it. Looking forward to get a solution. Thanks.
you can accomplish using JQuery,
Here is a Fiddle Demo for your desired result.

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

Categories