We Keep Coding

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>

Jquery steps "destroy" method is removing values given by User

I have a Questionnaire form which is break down in steps by using JQuery steps plugin. In the process of form submission there is a certain point where i need to remove steps. When i use "destroy" JQuery steps method, the values filled in the form are lost.
For example:
<form>
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
</form>
I am using following steps:
Convert form into Jquery steps
Opening this form in Simple modal dialog.
User fill this form and close modal dialog.
I am using "destroy" jQuery steps method after closing dialog.
When user re-open simple modal dialog again then i am converting this form into JQuery steps. At that point user see that all filled values in the form are lost.
The problem is at the 4th step. User have filled form at 3rd step. When i converted in back to original HTML, values given by user are lost.
Expected values at 4th step
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="Ishwar Lal" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" selected='selected' />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
but output is:
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
I need to remove JQuery steps from from with filled values. I have read JQuery documentation but not found any idea about this.

I think that you must to store data before you destroy the component. When you destroy a component it is destroyed, nothing else what to do.
If you store the data , then destroy object, and then initialize object with the data you stored. You can store in an array/object/variable, or you can store in sessionStorage / localStorage for use in other pages.

Hide/display textbox as well as its label withouth knowing ids

I'm currently building a table with several cells containing a radio with a series of textboxes.
I want each radio to make a textbox appear when clicked as well as the textbox label. Here is something that's working when knowing id for label or radio (the problem is reduced to what's inside one table cell):
<div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
<fieldset data-role="controlgroup" data-type="horizontal">
<label>Question?</label>
<input type="radio" name="radio1" id="+QuestionID+_1" value="1" />
<label for="'+QuestionID+'_1">Yes</label>
<input type="radio" name="radio1" id="+QuestionID+_0" value="0" />
<label for="'+QuestionID+'_0">No</label>
</fieldset>
<input type="text" name="textarea" style="width:80%; display:none;" id="comment_+QuestionID+"><label for "comment_+QuestionID+" class="labelhide" id="Test1">Test</label>
<input type="text" name="textarea1" style="width:80%; display:none;" id="comment_+QuestionID+"><label for "comment_+QuestionID+" class=labelhide id="Test2">Test</label>
<br />
</div>
and here is the JS
$('input[type="radio"][name="radio1"]').on('change', function() {
$('input[type=text]').toggle($.trim(this.value)=='1');
document.getElementById("Test1").style.display = 'inline';});
http://jsfiddle.net/Onysius/5WF25/2/
I'd like to have the same kind of behavior for the radio except I want it to toggle on only the 1st next textbox with its label without having to enter the corresponding name or id of the radio (table is generated by a python script with many textboxes under many radios so I don't want to create a specific function for each radio), textbox or label. The overall shape as to stay the same also (namely textbox below radio).
Is there a way to do that with a general form JavaScript (additional css is permitted-it currently uses a none display option for label class) ? To be clear my only trouble right now are the last 2 lines in the JS (I could easily set no name for the radio in the first line to apply it to any radio in the table) I don't actually know how to target just the next textbox after the radio with its associated label.
Any help will be greatly apreciated.

I think you need to do something these lines to inject the textarea you want dynamically next to the item and retain the the name for tracking what comments goes to which radio and not having to create a textarea for each radio:
HTML:
<div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
<fieldset data-role="controlgroup" data-type="horizontal">
<label>Question?</label>
<input type="radio" name="radio1" value="1" />
<label for="'+QuestionID+'_1">Yes</label>
<input type="radio" name="radio1" value="0" />
<label for="'+QuestionID+'_0">No</label>
</fieldset>
</div>
Javascript:
$('input[type="radio"]').on('change', function() {
var name=$(this).attr('name')
var html='<input type="text" name="textarea" style="width:80%;" id="comment_'+name+'"><label for "comment_'+name+'">Test</label>';
$('input[name="'+name+'"]:last').next('label').after(html);
});
Demo:
http://jsfiddle.net/SzjL2/

Preventing radio buttons from being clicked completely

This has been bugging me for a while now. I'm trying to prevent users from clicking on a radio button depending if the user has the access to do so. The first solution was to do the following:
Without disabled
<input type="radio" name="my_radio1" id="abc1" value="5">
<input type="radio" name="my_radio1" id="abc2" value="0">
<input type="radio" name="my_radio1" id="abc3" value="1" checked>
With disabled with pre-selection
<input type="radio" name="my_radio2" id="abc1" onclick="return false;" value="5">
<input type="radio" name="my_radio2" id="abc2" onclick="return false;" value="0">
<input type="radio" name="my_radio2" id="abc3" onclick="return false;" value="1" checked>
With disabled and no pre-selection
<input type="radio" name="my_radio3" id="abc1" onclick="return false;" value="5">
<input type="radio" name="my_radio3" id="abc2" onclick="return false;" value="0">
<input type="radio" name="my_radio3" id="abc3" onclick="return false;" value="1">
As shown here: http://jsfiddle.net/93CqR/6/
This works great for radio buttons ALREADY checked but doesn't work for boxes that haven't been checked (as shown in example 3 above). Are there any known workarounds to this?
Chrome and IE behave differently with this

You should add a 'disabled' attribute to the ones not selectable. You don't really need the javascript.
see http://jsfiddle.net/Ma6TA/
<input type="radio" name="my_radio2" id="abc1" value="5" disabled>
<input type="radio" name="my_radio2" id="abc2" value="0" disabled>
<input type="radio" name="my_radio2" id="abc3" value="1" checked disabled>
Update I don't know the actual use case here, but if you aren't already, the actual check for this should be done on the server. Disabling or hiding the input from the user with javascript will enhance the UX, but a nefarious user could get around these things.

I would use javascript to show/hide the elements that users have access to. For 2 reasons.
1) It's a better user experience if they can only see the form elements they can manipulate.
and more importantly
2) a disabled form field WILL NOT show up in the post/get array. I've had issues with this in the past and it is a very frustrating problem if you don't know why you're fields aren't coming through.
it could be as simple as wrapping js code in a php conditional ie...
<?php if($userCantSeeThese): ?>
<script>
$('.classOfElementsUserShouldntSee').hide();
</script>
<?php endif; ?>

How do I give an unchecked checkbox value in HTML?

I'm trying to make it so that an unchecked checkbox has value while a checked checkbox has none.
<form>
<input style="visibility:hidden" type="checkbox" name="box" value="a" checked />
<input type="checkbox" name="box" value="b" checked />
</form>
Apparently at one point, this would have worked as the second check box supposedly overrode the value of the first. But now, it seems that both values are submitted.
Any ideas?

This is because you are using a checkbox, change your code to:
<form>
<input style="visibility:hidden" type="radio" name="box" value="a" checked />
<input type="radio" name="box" value="b" checked />
</form>
The input type radio accepts only one option, while the checkbox takes more than one option per group, so since the user can't remove the checked from the top one, you get both sent server side.