Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Improve this question
I want to hide all unchecked radio button and its label then display only the checked radio button using the submit button click event.
<form method="post">
<input type="radio" name="radiobtn">
<label for="first">First</label>
<input type="radio" name="radiobtn">
<label for="second">Second</label>
<input type="radio" name="radiobtn">
<label for="third">Third</label><br>
<input id="submit" type="submit">
</form>
I want to make this work using jQuery. Can anyone give me snippet of jQuery code on how to do this?
Do something simple like this
$('#submit').click(function(e) {
e.preventDefault(); // prevent the form submission
$('[name="radiobtn"]:not(:checked)') // get all unchecked radio
.hide() // hide them
.next() // get all label next to them
.hide(); // hide the labels
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<input type="radio" name="radiobtn">
<label for="first">First</label>
<input type="radio" name="radiobtn">
<label for="second">Second</label>
<input type="radio" name="radiobtn">
<label for="third">Third</label>
<br>
<input id="submit" type="submit">
</form>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I intend to write a piece of code to select one option in a radio button. I used the following code which is saw being used to select a dropdown. I modified it and used it but its not working. Could you please point out my error?
$("div.classradio radio").val("Male");
this is the code I used but it doesn't work.
$("div.classradio radio").prop("checked", true)
For versions of jQuery prior to 1.6, use:
$("div.classradio radio").attr('checked', 'checked');
Why you want do this with jQuery? It's very simple with HTML:
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
With jQuery you can do it like this:
$('input:radio[name=gender]')[1].checked = true;
The Number in the brackets indicates the radio button. Attention: jQuery starts counting at 0.
Please set the attribute of the input element by selector
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
$('#FeMale').attr('checked',true);
});
</script>
</head>
<body>
<div class="container-fluid">
<input type="radio" name="Gender" value="Male" id="Male"/>Male
<input type="radio" name="Gender" value="FeMale" id="FeMale"/>Female
</div>
</body>
</html>
$("div.classradio radio").val("Male")
This code mean find the element with tag which is child of the div with class "classradio"
<div class="classradio">
<radio></radio>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I use this code to make simple form function with javascript, but doesn't work correctly.
(function(){
var o=document.getElementById('formsz');
o.getElementsByTagName('form')[0].onsubmit=function(){
if(this.version.value == "show"){
alert("show")
}else{
alert("hide")
}
return false
}})();
<div id="formz">
<form action='#'>
<input type="radio" name="version" id="x64" value="show">Show<br/>
<input type="radio" name="version" id="x32" value="hide">Hide<br/>
<button type='submit'>Login</button>
</form>
</div>
Whats wrong?? Why it doesn't work ??? Please help,,,
'formzs' !== 'formz' - .getElementById is finding nothing because you've passed the wrong ID in.
Try using your developer console next time, the error is pretty obvious.
(function(){
var o = document.getElementById('formz');
o.getElementsByTagName('form')[0].onsubmit=function(){
if(this.version.value == "show"){
alert("show")
}else{
alert("hide")
}
return false
};
})();
<div id="formz">
<form action='#'>
<input type="radio" name="version" id="x64" value="show">Show<br/>
<input type="radio" name="version" id="x32" value="hide">Hide<br/>
<button type='submit'>Login</button>
</form>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
My HTML script is
<html>
<body>
<b><font color="green">Please select a check box to change the color of text </font> </b><br>
<input type="checkbox" name="red" id="chkbx" > Red<br>
<input type="checkbox" name="green" id="chkbx" value="1"> Green <br>
<input type="checkbox" name="blue" id="chkbx" value="2"> Blue <br>
<input type="checkbox" name="orange" id="chkbx" value="3"> Orange <br>
<input type="checkbox" name="yellow" id="chkbx" value="4"> Yellow <br>
<p id="demo"></p>
<button onclick="myfunction()">My Choice</button>
<br><br>
<h style="color: red; font-weight: bold;"> </h>
<p id="demo"></p>
i need to get the checkbox value in javascript and if any one checkbox is selected that colour will apply to a text to display on the output. how to do?
First off - don't use the tag as it has been deprecated since 1999 use
<p style='font-weight:bold; color:green'>....</p>
Instead of checkboxs use radio buttons
<input type="radio" name="red" value="red" onClick="myFunction(this.value);"> Red<br>
Repeat the above for all possible selections.
Change your function myFunction() to myFunction( value ) and work from there. The information is passed directly to the function so there is no need to go looking for it.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
i have a text field , where i input the value to filter ....
<input type="text" name="filter" id="filter">
<input type="radio" name="item" id="item" value="1">apple
<input type="radio" name="item" id="item" value="2">banana
<input type="radio" name="item" id="item" value="3">grapes
<input type="radio" name="item" id="item" value="4">mango
<input type="radio" name="item" id="item" value="5">orange
<input type="radio" name="item" id="item" value="6">pineapple
if i input apple in text field, only radio button with apple has text value should appear , rest must hide . Is der any way to do that ?
Check out the jquery selectors page:
"Attribute Contains Selector [name*="value"]"
var name2lookFor = $('#filter').val();
var $matchingElements = $('input[type="radio"]').filter('[name*="'+name2lookFor +'"]');
There are a lot of other selectors, just find the one you need. You might need a combination to make a bit more custom search, but this should put you in the right track.
Offtopic: An id must be unique, you cant call them the same in the ID attribute.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm making an application with PHP and javascript
There are 2 choices Yes and No.
When he chose NO option and submits, then going to the page "Thank You" and its data into the database. When selecting the YES option it will go to another page and its data into the database
<label class="radio inline"><input type="radio" name="choose" id="optionsRadios1" value="Yes">YES</label>
<label class="radio inline"><input type="radio" name="usia" id="optionsRadios2" value="No">NO</label>
<label class="control-label" for="">Nama</label>
<div class="controls"><input type="text" name="nama" ></div><input type="submit" name="submit" value="" class="btn next">
Try this,
function submitPage(url){
window.location.href=url;
}
$('input:radio').on('click',function(){
var url=this.value=='Yes' ? 'xyz.php' : 'abc.php';
submitPage(url); // or you can use ajax for post
});
Create a javascript function and fire it on the onclick event of the radiobutton passing the radio value in the parameter
And then in the function put condition for redirect and form submit
or you can call a ajax to insert data in the database