If radio one (#choice_one) is checked how to make input field one (#field_one) required and if radio two (#choice_two) is checked how to make input form two (#field_two) is required and remove required from input field_one using JS?
<input type="radio" id="choice_one">
<input type="text" class="form-control" id="field_one" name="item_name" value="">
<input type="radio" id="choice_two">
<input type="text" class="form-control" id="field_two" name="item_name" value="">
You can use clickevent :
$("#choice_one").on("click",function(){
var checked = $(this).prop("checked");
$("#field_one").prop("required",checked);
});
//and same thing with #choice_two
Or using a same function :
$("#choice_one,#choice_two").on("click",function(){
var checked = $(this).prop("checked");
$(this).next().prop("required",checked);
});
Related
I have a multiple-input field and an onchange function. When we change the input field from the event it triggered, I want to get the name or id of the input field (to distinguish it from other input fields). Many thanks.
$('input[type="text"]').on('change', function(){
// name is a unique attribute
$(this).attr("name"));
});
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="text" name="text3" />
i am submitting data through FormData and i am trying to alert values of check boxes which are checked in my form, right now i am able to make it work for only one check box.
how can i alert values of all those check boxes which are checked.
var formData = new FormData(document.getElementById("update-form"));
$("#myCheckbox1").on('change',function(){
if($("#myCheckbox1").is(':checked'))
$('#hiddenInput1').val(1);
else{
$('#hiddenInput1').val(0);
}
});
alert(
$('#hiddenInput1').val()
);
Check Box 1:
<input type="hidden" value="0" name="visa" id="hiddenInput1">
<input type="checkbox" value="1" id="myCheckbox1">
Example Check Box 2:
<input type="hidden" value="0" name="visa1" id="hiddenInput2">
<input type="checkbox" value="1" id="myCheckbox2">
How to Alert Values of all check boxes which are checked in FormData without repeating code. i found similar example online but none were using FormData.
Form Name is : update-form
You can make use of start with attribute selector to select all checkboxes having id start with myCheckbox and attach it to change event handler.
Inside handler, you can read if checkbox is checked or not and change value of hidden input which is placed before checkbox.
See below code
$(function(){
$("input[type=checkbox][id^=myCheckbox]").on('change',function(){
var isChecked = $(this).is(':checked');
var $hiddenInput = $(this).prev('input[type=hidden]');
if(isChecked)
$hiddenInput.val(1);
else{
$hiddenInput.val(0);
}
alert($hiddenInput.val());
});
//iterate all hidden input on form submit
$('#update-form').submit(function(){
$('input[id^=hiddenUnput]').each(function(){
alert($(this).val());
});
$(this).submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Exammple Check Box 1:
<input type="hidden" value="0" name="visa" id="hiddenInput1">
<input type="checkbox" value="1" id="myCheckbox1">
Example Check Box 2:
<input type="hidden" value="0" name="visa" id="hiddenInput2">
<input type="checkbox" value="1" id="myCheckbox2">
function add_option(){
var tot_option=parseInt($('#tot_option').val());
tot_option++;
$('#tot_option').val(tot_option);
var par="'radio"+tot_option+"'";
var opt="<input type='text' id='opt"+tot_option+"' onblur='chk(this.value,'"+par+"')' name='answers[]' style='width:80%;' onfocus='add_option()'> <input type='radio' id='radio"+tot_option+"' required disabled name='canswer' value='"+tot_option+"'><br><br>";
document.querySelectorAll("input[onfocus]").forEach(function(element, index) {
element.removeAttribute("onfocus");
});
$('#new_option').append(opt);
}
function chk(ivalue,rad){
if(ivalue!=''){
$('#'+rad).removeAttr('disabled');
}else{
$('#'+rad).attr('disabled','disabled');
$('#'+rad).removeAttr('checked','checked');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" style='width:80%;' onblur="chk(this.value,'radio1')" id="opt1" name="answers[]">
<input type="radio" id="radio1" disabled required name="canswer" value="1"><br><br>
<input type="text" id="opt2" onblur="chk(this.value,'radio2')" style='width:80%;' name="answers[]" onfocus="add_option()">
<input type="radio" id="radio2" required disabled name="canswer" value="2"><br><br>
<span id="new_option"></span>
i have multiple input type and one radio button in front of every input i want to remove disabled from radio if my input type have some value if it has no value then add disabled attribute to radio. its working fine in first two input but after that its not working
there were some flaws in your code,
1 you are sending this.value here as a string onblur='chk(this.value,'"+par+"')
2 in this onblur function call there is a problem while sending par as a parameter,
so here I Modified your code a bit and now this is working
function add_option(){
var tot_option=parseInt($('.totalOption').length);
tot_option++;
$('#tot_option').val(tot_option);
var par="'radio"+tot_option+"'";
var onBlur = 'onblur=chk('+ par.toString() +')';
var opt="<input type='text' id='opt"+tot_option+"' class='totalOption' " + onBlur + " name='answers[]' style='width:80%;' onfocus='add_option()'> <input type='radio' id='radio"+tot_option+"' required disabled name='canswer' value='"+tot_option+"'><br><br>";
document.querySelectorAll("input[onfocus]").forEach(function(element, index) {
element.removeAttribute("onfocus");
});
$('#new_option').append(opt);
}
function chk(rad){
if(event.relatedTarget == null)
return;
var SelctedTarget = Number(event.relatedTarget.id[event.relatedTarget.id.length - 1]) - 1;
var ivalue = $('#opt' + SelctedTarget).val();
if(ivalue!=''){
$('#'+rad).removeAttr('disabled');
}else{
$('#'+rad).attr('disabled','disabled');
$('#'+rad).removeAttr('checked','checked');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" style='width:80%;' onblur="chk('radio1')" id="opt1" class="totalOption" name="answers[]">
<input type="radio" id="radio1" disabled required name="canswer" value="1"><br><br>
<input type="text" id="opt2" class="totalOption" onblur="chk('radio2')" style='width:80%;' name="answers[]" onfocus="add_option()">
<input type="radio" id="radio2" required disabled name="canswer" value="2"><br><br>
<span id="new_option"></span>
I'm trying to build a combined radio / text input for an "other" field in a form.
<input id="artist" type="radio" name="artist" value="Other">
<input id="other-artist" type="text" name="other_artist" placeholder="Other Artist"/>
I can't figure out how to click inside the text input and have the radio selected. I tried wrapping the text input in a label but that did not work.
you can add a onclick event to de input and check the radio like this.
<input id="artist" type="radio" name="artist" value="Other">
<input id="other-artist" type="text" name="other_artist"placeholder="Other Artist"
onClick="selectRadio()" />
and the js
selectRadio = () => {
var radio = document.getElementById("artist");
radio.checked = true;
}
example
hope this help.
I'm having trouble storing form field values as jQuery variables. My control text is storing and recalling like a charm.. After much testing i'm still not sure where i'm missing on this. Maybe a stupid human trick that i'm failing to see?
Here is the fiddle: https://jsfiddle.net/brokenmold/f78vrs16/5/
<form class="ajaxform form-horizontal" method="POST" action="">
<label for="billing_org" class="sr-only">Billing Org</label><br>
<input type="text" name="billing_org" class="form-control" value="Test Billing Co" placeholder="Billing Org"><br><br>
<label>
<input type="checkbox" name="shipping_same" id="shipwreck"> Ship Same As Billing
</label><br><br>
<label for="shipping_org" class="sr-only">Shipping Org</label><br>
<input type="text" name="shipping_org" id="shipping_org" class="form-control" value="Not Checked" placeholder="Shipping Org"><br><br>
<label for="control_test" class="sr-only">Control Test</label><br>
<input type="text" name="control_test" id="control_test" class="form-control" value="Not Checked" placeholder="Contol Test">
</form>
$("#shipwreck").on('click', function() {
var billing_org = $('#billing_org').val();
var control_test = "Control Test";
if ($('#shipwreck').prop('checked')) {
$("#shipping_org").val(billing_org);
$("#control_test").val(control_test);
} else {
$("#shipping_org").val("Not Checked");
$("#control_test").val("Not Checked");
}
});
https://jsfiddle.net/brokenmold/f78vrs16/5/
Your HTML is flawed. There is no ID on the billing_org field, so your code to store that value won't work. Change your HTML for the input field to this and you should be fine:
<input type="text" name="billing_org" id="billing_org" class="form-control" value="Test Billing Co" placeholder="Billing Org">
The only change in the above from your original code is the addition of id="billing_org".
It's always the simple ones that slip through!