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
Related
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');
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>
I am doing some updates to a clients Ionic app but stuck on some binding.
There is a form with some fields including a couple of radio buttons.
E.g.
<div class="fields">
<input ng-model="student.name" type="text" name="student_name" id="name" />
<input ng-model="student.has_booked" type="radio" checked="checked" name="made_booking" id="made_booking_yes" value="1" />
</div>
The request for the update is to have a button that duplicates the details in this first form and add its to an array where the details can be used for another student as they are normally similar.
To do this I have a button that calls this method:
$scope.additionalStudents = []; // <-- for context of question
$scope.duplicateStudentDetails = function() {
var firstStudent = angular.copy($scope.student);
$scope.additionalStudents.push(firstStudent);
}
Then in my view:
<div class="fields" ng-repeat="(key, student) in additionalStudents track by $index">
<input ng-model="student.name" type="text" name="student_name" id="name" />
<input ng-model="student.has_booked" type="radio" checked="checked" name="made_booking" id="made_booking_yes" value="1" />
</div>
The issue I am having is that the name came be changed independently, but the checkbox always affects the original student. Im guessing this is because of the name attribute...
How do I go around this?
There might be two solutions to your problem.
If your case is just to show the status and not to change the booking status
Then, remove name attribute
If you want change the booking status in future
Better to have input of type checkbox with different names
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/
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).