In my application i have two radio buttons,one text box and one button
<input type="radio" name="myRadio" value="red" id="myRadio" checked>Red color
<input type="radio" name="myRadio" value="Blue" id="myRadio">Blue color
<input type="text" id="txtShareCount" name="txtColor"/>
<input type="submit" name="btnsubmit" value="Blue" id="btnsubmit">submit
Here when i check Blue color radio button text box will appear
what i want is, I need to do validation for text box in jquery when i check Blue color radio button if text box is empty then click submit button it display alert message how can i do this in jquery
I did this in javascript it works fine but I need in jquery how can i do this in jquery
To get the value of your radio use:
$('input[name=myRadio]:checked', '#myForm').val()
Or if you're not using a form
$('input[name=myRadio]:checked').val()
For radiobutton you can use :checked selector - $('#myRadio:checked')
As per the traditions and the documentations. Your js gets messed up if you have more than 1 element with same id. So instead of using getElementById() use getElementsByName()
So something like this
function validateRadio() {
var radios = document.getElementsByName("myRadio");
var formValid = false;
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked)
formValid = true;
i++;
}
if (!formValid)
alert("Must check some option!");
return formValid;
}
Note :
1-don't have multiple elements with the same Id
2-when use getElementById , you must enter id attribute
Try this
function myFunction() {
if (document.getElementById('myRadioRed').checked == true || document.getElementById('myRadioBlue').checked == true) {
if (document.getElementById('txtShareCount').value == "") {
alert("Please Enter Color");
document.getElementById("txtShareCount").focus();
return false;
}
return false;
}
else { return true; }
}
<input type="radio" name="myRadio" value="red" id="myRadioRed" checked>Red color
<input type="radio" name="myRadio" value="Blue" id="myRadioBlue">Blue color
<input type="text" id="txtShareCount" name="txtColor" />
<input type="button" name="btnsubmit" value="Blue" id="btnsubmit" onclick="myFunction()"/>
Related
I have looked for few other answers and tutorials but havent been able to find what I want. For example, I found this which uses change function, however, I need to use a click event and detect when a radio button is clicked. When a radio button is click I will be showing message to show like "you have selected radio button 1".
For example, below are my 3 radio buttons and I want to assign click event to them
<input type="radio" name="one" value="first" id="radio1" checked> first
<input type="radio" name="two" value="second" id="radio2" checked> second
<input type="radio" name="three" value="third" id="radio3" checked> third
I have tried
1
var inputs = document.querySelectorAll('input');
for (var i = 0; i <= inputs.length; i++) {
$("input[id='radio'+i]").click(function(){
if(inputs == 'radio1') {
//dosomething
} else if (inputs == 'radio2') {
//dosomething
}else if (inputs == 'radio3') {
//dosomething
}
});
}
2
var inputs = document.querySelectorAll('input');
for (var i = 0; i <= inputs.length; i++) {
$("#radio"+i).click(function(){
if(inputs == 'radio1') {
//dosomething
} else if (inputs == 'radio2') {
//dosomething
}else if (inputs == 'radio3') {
//dosomething
}
});
}
Please can someone help me on this as I have searched but havent been able to find anything of help.
you do not have radio buttons group of different names. You are likely to have something like this
<form id="myForm">
<input type="radio" name="radio" value="first" checked> first
<input type="radio" name="radio" value="second"> second
<input type="radio" name="radio" value="third"> third
</form>
$('#myForm input').on("change", function() {
console.log($(this).attr('value')); // based on the value do something.
});
thanks
I want to make the input field read only on the base of other input field value, for example,
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female <br/>
Age: <input type="text" name="age"><br>
</form>
If someone choose Female, then the age input should become read only, means that it should be fade out then no value can be entered. Is this possible, and how?
Have you tried using JQuery? try this
$('input[type=radio][name=sex]').change(function() {
if (this.value == 'female') {
$("#AgeId").prop("readonly",true);
}
else{
$("#AgeId").prop("readonly",false);
}
});
There are several options on this, but basically if you want a fade effect you need a color to go along with it to display a transition. My answer is an implementation of jQuery disable enable click event with fade
JQuery:
$('input[type=radio]').click(function () {
if ($(this).val() == "female") {
// disable input
$('input[name=age]').fadeOut(20, function () {
$(this).prop('disabled', true);
$(this).css('background', '#c0c0c0').fadeIn(1000);
});
} else {
//enable input
$('input[name=age]').prop('disabled', false);
$('input[name=age]').css('background', '#ffffff');
}
});
Here is a demonstration.
EDIT:
After playing with this a little bit more I changed the animation lengths to look more natural.
In simple way,you can do disable in javascript function.
<script language="javascript">
function female_CLK(){
document.getElementById("age").readOnly = true;
document.getElementById("age").style.backgroundColor = "#CCCCCC";
}
</script>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female" onclick="female_CLK()">Female <br/>
Age: <input type="text" name="age" id="age"><br>
need show a confirm message after click at submit button, however, need show this window message only after my radio and checkbox is checked, how do it?
http://jsfiddle.net/G3LTe/
HTML:
<form method="post" action="">
<label>
<input type="radio" name="group[1]" value="1">1
</label>
<label>
<input type="radio" name="group[1]" value="2">2
</label>
<label>
<input type="radio" name="group[1]" value="3">3
</label>
<br>
<!-- 2 -->
<label>
<input type="radio" name="group[2]" value="1">1
</label>
<label>
<input type="radio" name="group[2]" value="2">2
</label>
<label>
<input type="radio" name="group[2]" value="3">3
</label>
<br>
<input type="submit" value="send">
</form>
JS
$('form').submit(function(){
var confirmacao = confirm("WARNING:\n go to next step? or cancel?");
if(confirmacao == true) {
console.log("OK");
return true;
} else {
console.log("O envio foi cancelado");
return false;
}
});
You can check if a particular group of radio buttons has at least one radio button selected like this:
if ($(':radio[name="nameOfGroup"]:checked').length > 0)
{
// at least one radio button with the name nameOfGroup is checked
}
So, go through each group, check if at least one radio button is selected for that group, and if so, proceed to the confirmation dialog:
var groups = {};
// get all of the unique radio button groups
$(':radio', form).each(function() {
// object names are unique
groups[this.name] = true;
});
var proceed = true;
$.each(groups, function(group, dummy) {
if ($(':radio[name="' + group + '"]:checked').length == 0)
{
// none of the radio buttons of this group are checked, abort
proceed = false;
// break out of the .each() loop
return false;
}
});
if (!proceed)
{
alert('Please check at least 1 radio button from each group!');
return false;
}
See this fiddle: http://jsfiddle.net/b2SL7/
(My code example could probably be somewhat simplified, but I wrote it out like that for clarity of what's going on.)
(Edited for arbitrary groups to address OP's concerns)
JavaScript
<script>
function changeColor() {
var element = user.elements["group1"];
for (var i = 0; i < element.length; i++) {
if (element[i].checked == true) {
var newColor = element[i].value;
alert("hai");
document.getElementById("changeColor").style.background = newColor;
}
}
}
</script>
HTML
<div id="color">
<input type="radio" name="group1" id="color1" value="#990000" /><label for="color1">Red</label>
<input type="radio" name="group1" id="color2" value="#009900" /><label for="color2">Green</label>
<input type="radio" name="group1" id="color3" value="#FFFF00" /><label for="color3">Yellow</label><br><br><br>
<button onclick="changeColor()">Change</button>
The above HTML and JavaScript code is fine when I click on the radio button the background color is changed. It is working properly. However, my problem is that after the color change the browser will automatically refresh, which I do not want.
After click on submit button the onclick event will call. So if you send boolean value return false then the page is not submit here is code i am using return false;
<script>
function changeColor() {
var element = user.elements["group1"];
for (var i = 0; i < element.length; i++) {
if (element[i].checked == true) {
var newColor = element[i].value;
document.getElementById("changeColor").style.backGround = newColor;
return false;
}
}
}
</script>
Change the onlick event add return before your changeColor() function
<button onclick="return changeColor();">Change</button>
I highly suggest you use jQuery:
HTML
<button id="btnColor">Change</button>
jQuery:
$('#btnColor').live('click', function(e) {
e.preventDefault();
$('#changeColor').css('background-color', $('input:radio[name=group1]:checked').val());
});
You could wrap the radio-buttons with a form, like this, leaving the button outside:
<form name="form_radiobuttons">
<input type="radio" name="group1" id="color1" value="#990000" /><label for="color1">Red</label>
<input type="radio" name="group1" id="color2" value="#009900" /><label for="color2">Green</label>
<input type="radio" name="group1" id="color3" value="#FFFF00" /><label for="color3">Yellow</label><br><br><br>
</form>
<input type="button" onclick="changeColor()">Change</button>
This way the form won't be submitted when you click the button.
Its looks like your button is the only button in the form so the browser is thinking its the submit button for the form.
As pointy says you can add a type to the button, add you onclick function to a different element such as a link (with an anchor not an actual link of course otherwise you will get the same problem) or move the button outside of the form.
I wrote this code to switch between radio buttons and show my custom alert.
<script>
function test() {
if (radio[0].checked = true) {
alert("hello1");
}
if (radio[1].checked = true) {
alert("hello2");
}
}
</script>
<input type="radio" onclick="test()" value="0">
<input type="radio" onclick="test()" value="1">
When check any of radio buttons it must show specific alert.
What is wrong?
You should name your radio buttons, and call them from javascript.
<script>
function test() {
if (document.getElementById('radio1').checked == true) {
alert("hello1");
}
if (document.getElementById('radio2').checked == true) {
alert("hello2");
}
}
</script>
<input type="radio" id="radio1" onclick="test()" value="0">
<input type="radio" id="radio2" onclick="test()" value="1">
Two things you need to take note here:
1) You must use the 'name' attribute in the radio button. Otherwise you won't be able to check the radio button.
2) You cannot use radio[0] to point to the radio button. You can assign an ID to it and use getElementById method to use it in Javascript. Another easy way is to pass the object to the function. Please refer to the sample code below:
<script>
function test(radioObj) {
if(radioObj.value == "0")
alert("Hello1");
else if (radioObj.value == "1")
alert("Hello2");
}
</script>
<input type="radio" name="test" onclick="test(this)" value="0">
<input type="radio" name="test" onclick="test(this)" value="1">
radio[0] and radio[1] are defined in your html but not in your javascript. You can try using JQuery or one of the many javascript selector libraries. Or use getElementById