I have a dynamically generated form with some radio buttons.For each radio button there will be a onClick/onChange Function.
The problem is that whenever radio button is clicked ,the onClick of the the first form radio button is called.
<form name="a" id="a">
<input type="radio" name="radioa" onclick="func(1);"/>
<input type="radio" name="radioa" onclick="func(2);"/>
</form>
.
.
<form name="f" id="f">
<input type="radio" name="radiof" onclick="func(3);"/>
<input type="radio" name="radiof" onclick="func(4);"/>
</form>
<script>
function func(val){
alert(val);
}
</script>
I tried with onchange function also its not working.
Always the first form's radio button function is called and alert(1) is shown everytime.
Any help is appreciated.
Thanks in advance.
How about like this. I assume that the value you put as parameter on func() is the value of that radio button.
If so, then you can change your HTML markup to this:
<form name="a" id="a">
<input type="radio" name="radioa" onclick="func(this);" value="1" />
<input type="radio" name="radioa" onclick="func(this);" value="2" />
</form>
.
.
<form name="f" id="f">
<input type="radio" name="radiof" onclick="func(this);" value="3" />
<input type="radio" name="radiof" onclick="func(this);" value="4" />
</form>
Instead of passing the value as parameter to the function, use the value="" attribute (which I think much better). Then pass this as your parameter which will contain the HTML dom where the onClick was triggered.
Then on your javascript:
<script>
function func(val){
alert(val.value);
}
</script>
Check this FIDDLE.
Related
A form with radio buttons. If "Existing" is checked, the "existingnumber" input will be enabled. It works fine during the selection process but does not work onload. On load the input "existingnumber" remains disabled even though it's "checked". This is problematic when the form is submitted, and fails error validation. I've tried appending .change() at the end, and creating a function which I called on document ready but that didn't work. I think I'm missing something. Perhaps I need to get the value first? I'm a bit of a jquery noob.
<input type="radio" name="officephone" value="New" id="officephonenew" >
<label for="officephonenew">New</label><br>
<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked>
<label for="officephoneexisting">Existing</label><br>
<input type="text" name="existingnumber" placeholder="555-555-1234" /><br>
<input type="radio" name="officephone" value="No" id="officephoneno">
<label for="officephoneno">Not required</label>
$('input:radio[name="officephone"]').change(function(){
$('input[name="existingnumber"]').prop("disabled",true);
if($(this).attr('value') == 'Existing') {
$('input[name="existingnumber"]').prop("disabled", false);
}
});
https://jsfiddle.net/Cormang/sd8xaj9h/10/
To make this work on load simply use filter() to retrieve the checked radio button and trigger() the change event on it.
Also note that you can simplify the logic by providing the boolean output of the condition to the disabled property and by using val().
$('input:radio[name="officephone"]').change(function() {
$('input[name="existingnumber"]').prop("disabled", $(this).val() != 'Existing');
}).filter(':checked').trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="officephone" value="New" id="officephonenew" />
<label for="officephonenew">New</label><br />
<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked />
<label for="officephoneexisting">Existing</label><br />
<input type="text" name="existingnumber" placeholder="555-555-1234" disabled /><br />
<input type="radio" name="officephone" value="No" id="officephoneno" />
<label for="officephoneno">Not required</label>
If Field 1 is checked "Yes" then Field 2 should be checked "Yes"
This is what I've been trying so far:
Field 1:
<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG|| </label></div>
<div class="col9"><input type="radio" name="Field1" id="Question15yes" value="Yes" onclick="Check()">Yes <input type="radio" name="Field1" value="No" onclick="Check()">No</div>
Field 2:
<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG|| </label></div>
<div class="col9"><input type="radio" name="Field2" id="Question16yes" value="Yes" onclick="Check()">Yes <input type="radio" name="Field2" value="No" onclick="Check()">No</div>
I was trying something as simple as this js below, but I'm definitely missing something. Any help would be greatly appreciated!
<script language="JavaScript">
function Check() {
$("#Question15yes").click(function(){
if ($(this).is(':checked'))
{
$("#Question16yes").val("Yes");
}
}
});
}
</script>
Make sure you are including JQuery in your page.
To bind your event, you need to wait that the DOM is fully loaded, else you would try to use an element that doesn't exist yet.
<script language="JavaScript">
$(function() {
$(".question-checkbox").click(function(){
if ($(this).is(':checked'))
{
console.log($(this));
}
});
});
</script>
Also, you might want to change the JQuery selector from ID to class, so that you can use the same code for all similar checkboxes.
Put a .question-checkbox class on the inputs, and remove all onclicks.
You don't have to call check on every click. Once document loads, call it once.
window.addEventListener("load", function(){
$("input[type='radio']").on("click", function(){
if($("#Question15yes").is(':checked'))
$("#Question16yes").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entire">
<div class="col3">
<label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG|| </label>
</div>
<div class="col9">
<input type="radio" name="Field1" id="Question15yes" value="Yes">
Yes
<input type="radio" name="Field1" value="No" >No
</div>
<div class="entire">
<div class="col3">
<label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG|| </label>
</div>
<div class="col9">
<input type="radio" name="Field2" id="Question16yes" value="Yes">
Yes
<input type="radio" name="Field2" value="No">
No
</div>
Use this for a single checkbox with the class name "example":
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});
I can get the value of text input from a form.
Like this:
<label for="lblName">Name (*):</label>
<input type="text" name="txtBoxName" id="txtBoxName">
I submit the form with a validation check first:
<form name="contactDataForm" action="sendMail.php" onsubmit="return ValidationCheck()" method="post">
This is sendMail.php:
$Name = $_POST['txtBoxName'];
This works, but how you do it for a RadioButton value? The selected radio button value.
<input type="radio" name="test1" id="test1" value="test1" required> TEST 1<br>
<input type="radio" name="test2" id="test2" value="test2"> TEST 2<br>
A radio button is used for selecting a single value from multiple values. So, there will be only one single name for all the radio buttons and the values for each of them may vary. You can get the value using the usual $_POST['name'] in PHP.
<form action="" method="post">
<input type="radio" name="radio" value="1">Radio 1
<input type="radio" name="radio" value="2">Radio 2
<input type="radio" name="radio" value"3">Radio 3
<input type="submit" name="submit" value="Get Selected Values" />
</form>
<?php
if (isset($_POST['submit'])) {
if(isset($_POST['radio']))
{
echo "You have selected :".$_POST['radio']; // Displaying Selected Value
}
}
?>
Make the 2 radio buttons with the same name attribute test1 example
you will find the radio button value at your PHP server with
$radioValue = $_POST['test1'];
This is a standard HTML Form. A HTML form always gives the value of the selected radio button. If you have a 2 radio buttons with the same name value this will work. The selected radio button will then post your answer to the server. You can then get the value the same way.
I hope this helps.
I've got a series of radio buttons and a submit button:
<input type="radio" name="selectme_resubmit" id="selectme_resubmit1" value="first" /> <label for="selectme_resubmit1">Resubmit with the original submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit2" value="without" checked /> <label for="selectme_resubmit2">Resubmit without any submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit3" value="custom" /> <label for="selectme_resubmit3">Resubmit with a custom submitter:</label> <input type="text" name="selectme_custom_submitter" id="selectme_custom_submitter" /><br>
<input type="button" id="selectme_resubmit_button" name="selectme_resubmit2_button" value="Place a submit template" onclick="selectme_act(\'resubmit\')" />
I also have the following javascript (with jquery):
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
However, I get "undefined" in the console, even when I select something... what am I doing wrong?
I tested your code and the selector does work. The only issue I found was that you were escaping the ' character when it was not needed in the onclick event
you miss ready function
$().ready(function(){
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
});
please use ready function before your declaration
and check this link http://jsfiddle.net/FQGuu/
I am trying to set the value of the radio button via javascript. But I am not being able to do so. What I tried to do was have 4 radio buttons one of which is already selected. If I select some other radio button and click on Refresh, default radio button should be selected.
http://jsfiddle.net/ds345/Un8XK/1/
HTML:
<fieldset data-role="controlgroup" data-type="vertical">
<input type="radio" name="radio" id="x" data-theme="a" />
<label for="x" style="color: White">X</label>
<input type="radio" name="radio" id="y" onclick="axisonoff(this)" data-theme="a" />
<label for="y" style="color: White">Y</label>
<input type="radio" name="radio" id="z" data-theme="a" />
<label for="z" >Z</label>
<input type="radio" name="radio" id="none" data-theme="a" />
<label for="none" style="color: White">None</label>
</fieldset>
<button id = "Refresh" value="Refresh">Refresh</button>
JS:
$(document).ready(function () {
$("#none").attr("checked", true).checkboxradio("refresh"); // if this line is not present initially then it works for the 1st refresh.
});
$("#Refresh").click(function(){
$("#x").attr("checked", false).checkboxradio("refresh");
$("#y").attr("checked", false).checkboxradio("refresh");
$("#z").attr("checked", false).checkboxradio("refresh");
$("#none").attr("checked", true).checkboxradio("refresh");
});
I am sure that I have missed something very small but not able to figure out why this approach is not working.
Tools used: Javascript,Jquery 1.9 and JQuery mobile 1.3
Thanks,
Deeksha
You should use prop over attr when dealing with boolean attributes.
.attr("checked", false) will add checked="false" to your element.In HTML, <input checked="false" .../> is the same as <input checked="true" .../> or simply <input checked .../> as the attribute simply needs to be present on the element for it to be active.
See this JSFiddle example.
Change your code to use .prop() instead:
$("#none").prop("checked", false)...
Here is a fixed version of your JSFiddle demo: http://jsfiddle.net/Un8XK/8/
What you have missed is that there is no need for script. Simply use a form with a reset button:
<form>
<input type="radio" name="radio" value="0" checked>0<br>
<input type="radio" name="radio" value="1">1<br>
<input type="radio" name="radio" value="2">2<br>
<input type="radio" name="radio" value="3">3<br>
<input type="reset">
</form>
If you really must use script, you can simply return the radio buttons to their default by adding a button to the form:
<input type="button" onclick="reset(this.form.radio);" value="Script reset">
and a function:
<script>
function reset(els) {
for (var i=0, iLen=els.length; i<iLen; i++) {
els[i].checked = els[i].defaultChecked;
}
}
</script>