Retain value of text box whose radio button is clicked - javascript

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

Related

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>

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

PHP or javascript to auto fill text box(s) select and submit the form data for url provided

Post loading the URL: http://example.com/demo/website/wp-admin/post-new.php?post_type=product, i have a form. This form has
Text Box
Checkbox
Submit Button
What i need is, i need to browse the URL, and Enter a product name value "Product1" in the Text box and then put a "Check" in the Checkbox and then Click on submit button.
I need the same activity to repeat or apply to all the 4000 products at the same time.
Form looks like:
<form name="post" action="post.php" method="post" id="post" autocomplete="off">
<input type="text" name="post_title" size="30" value="" id="title" spellcheck="true" autocomplete="off">
<input value="8" type="checkbox" name="tax_input[product_cat][]" id="in-product_cat-8">
<input type="submit" name="publish" id="publish" class="button button-primary button-large" value="Publish">
</form>
Example:
1. After the url loads
2. Type "Product1" automatically in the Textbox
3. Put a check to the Checkbox
4. Click Submit
This example is for one single product, if i have to do the same for next 4000 products, i think i need a array solution to execute different input values to different products but all at same time. i am little confused to start with.

How to reset input fields

I want to reset the input field.
If I click "Type 1" radio button and enter value in input field and again if i select "Type 2" radio button then the existing value in the input field should be reset to empty.
<div class="samples">
<input type="radio" id="samples_1" />Type1
<input type="radio" id="samples_2" />Type2
<input type="radio" id="samples_3" />Type3
</div>
<input type="text" id="demo" value=""/>
How can I implement this in javascript/jquery.
Fiddle: http://jsfiddle.net/wYuZL/
Use this, it works. And you haven't added jquery - add jquery in jsfiddle to make it work.
$(":radio").bind("change", function (event){
$("#demo").val("");
});
How can I implement this in JavaScript/jQuery?
Assuming I understand what you're trying to do (make it so that when you click on the radio buttons, the value of the input box is cleared) then you will have to set an event handler on the elements so that we can clear the input box:
$(function() {
$("#samples > input").click(function() {
$("#demo").val("");
});
});

Unchecking a radio box without use of id's

I'm setting up a table, where each row will contain several radio boxes. There are certain conditions for the radio boxes, for example:
If "Home" is checked, the "Text" radio box will be unchecked and "Voice" will be checked instead (ie. You can't text a home phone number). Similarly, when "Home" and "Voice" are checked, clicking "Text" will force "Home" to be unchecked and "Cell" will become checked.
I can get this working fine for one instance, with the use of .getElementById and the click function, but where I run into trouble is when things are scaled up. This table might have 20 or 30 rows, each of which containing a cell with these radio boxes.
I'm not great with jQuery, so I'm not sure how to make a more general version, so that each set of radio boxes are their own contained units, so to speak. I made a jsfiddle where you can see that only the first instance is working, likely because I am targeting the boxes using their id and you can't have two elements with the same id... help? Thanks!
http://jsfiddle.net/3uHqS/
Script
$( document ).ready(function() {
document.getElementById('contact-home').onclick = function () {
document.getElementById('format-voice').checked = true;
};
document.getElementById('format-text').onclick = function () {
document.getElementById('contact-cell').checked = true;
};
});
HTML
<form>
<input type="radio" name="contact" value="" id="contact-cell" />
<label for="contact-cell">Cell</label>
<input type="radio" name="contact" value="" id="contact-home" />
<label for="contact-home">Home</label>
<input type="radio" name="format" value="" id="format-voice" />
<label for="format-voice">Voice</label>
<input type="radio" name="format" value="" id="format-text" />
<label for="format-text">Text</label>
</form>
You are going to want to assign every radio box a descriptive class like 'text-radio' or 'home-radio'. Then when you need to change all of the Text radio boxes you do something like the following in jQuery:
$(".text-radio").attr('checked', 'checked');

Categories