Is it possible to disable a single radio button in a group using jquery?
<div id="divAddNewPayrollItemWages" title="Add New Payroll Item">
<strong>Wages</strong><br />
Do you want to set up a payroll item to track wages, annual salary, commissions or bonuses?<br />
<input type="radio" name="rblWages" value="Hourly" />Hourly Wage<br />
<input type="radio" name="rblWages" value="Annual" />Annual Salary<br />
<input type="radio" name="rblWages" value="Commission" />Commission<br />
<input type="radio" name="rblWages" value="Bonus" />Bonus<br /><br />
<input type="button" value="Back" disabled="disabled" />
<input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" />
<input type="button" value="Finish" disabled="disabled" />
<input type="button" value="Cancel" onclick="AddNewPayrollItemWages_Cancel();" />
</div>
<div id="divAddNewPayrollItemHourlyWages" title="Add New Payroll Item">
<strong>Wages</strong><br />
Is this item for regular, overtime, sick or vacation pay?<br />
<input type="radio" name="rblHourlyWages" value="Regular" />Regular Pay<br />
<input type="radio" name="rblHourlyWages" value="Overtime" />Overtime Pay<br />
<input type="radio" name="rblHourlyWages" value="Sick" />Sick Pay<br />
<input type="radio" name="rblHourlyWages" value="Vacation Pay" />Vacation Pay<br /><br />
<input type="button" value="Back" onclick="" />
<input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" />
<input type="button" value="Finish" disabled="disabled" />
<input type="button" value="Cancel" onclick="AddNewPayrollItemHourlyWages_Cancel();" />
</div>
What I am trying to accomplish is that when a user selects Annual from the first dialogue, the script opens the second dialogue and disables the Overtime radio button from the list. The only problem I am having at this point is disabling the radio button, everything else is good.
This should do it. Essentially, use jQuery to find an input with name of "rblHourlyWages" and value of "Overtime" and disable it.
$('input[name=rblHourlyWages][value=Overtime]').prop('disabled', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rblHourlyWages" value="Regular" />Regular Pay<br />
<input type="radio" name="rblHourlyWages" value="Overtime" />Overtime Pay<br />
<input type="radio" name="rblHourlyWages" value="Sick" />Sick Pay<br />
<input type="radio" name="rblHourlyWages" value="Vacation Pay" />Vacation Pay<br /><br />
What you want to do is establish a relationship between what radio button disables another. I would use an array, but that's a whole other pie.
What you can do is something on the lines of checking the radio group and using an if statement.
Array.prototype.forEach.call(document.querySelectorAll("[type='radio']"), function(x) {
x.addEventListener("click", function() {
if (x.value === "Annual") { //or any other field
document.querySelector("['OTHER_RELATED_FIELD']").disabled = true;
}
});
});
jQuery way:
$("[type='radio']").on("click", function() {
if (this.value === "Annual") $("[name='rblHourlyWages'][value='Overtime']").prop("disabled", true);
});
Note that you'll have to reset all radio buttons to enabled before each click function is run so that you can change the radio button and the option will be re-enabled.
Something like this should work. It allows for user to change radio again and reenable the other one
$('[name=rblWages]').change(function(){
var isAnnual = this.value == 'Annual';
$('[name=rblHourlyWages][value=Overtime]').prop('disabled', isAnnual);
});
DEMO
Related
The Button
(this submit button is not working, and if i delete the onClick, the submit works. how can i make both, the onClick and the Submit to work.)
<input
type="submit"
value="Make the purchase"
onClick={nextStep}
/>
The whole Form
<form id="my-form" className="contact-form" onSubmit={sendEmail}>
<input type="hidden" name="name" value={shippingData.firstName} />
<br />
<input type="hidden" name="name" value={shippingData.lastName} />
<br />
<input type="hidden" name="name" value={shippingData.email} />
<br />
<input type="hidden" name="name" value={shippingData.address1} />
<br />
<input type="hidden" name="name" value={shippingData.zip} />
<br />
<input type="hidden" name="name" value={myJSON}></input>
<div>
<input
type="submit"
value="Make the purchase"
onClick={nextStep}
/>
</div>
</form>
The problem here is, your input button element has type submit. So when you click on it, onSubmit handler gets called. So if you need to do multiple things, you need multiple buttons, or do everything inside onSubmit
Option 1
Have 2 buttons:
<input
type="submit"
value="Make the purchase"/>
<input
type="button"
value="Go to next step"
onClick={nextStep} />
Option 2
<form id="my-form" className="contact-form" onSubmit={handleSubmit}>
const handleSubmit = () => {
nextStep()
sendEmail()
}
In my html form, I have a group of radio buttons
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="submit" value="submit" />
</form>
I have a scenario where no radio button is checked. In such case, my server-side php receives input value as false. What I want to do is change false to null or undefined. Is that possible? Any help is greatly appreciated.
You can do something like this:
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="hidden" name="rad" value="null" />
<input type="submit" value="submit" />
</form>
Now if you haven't checked any radio button, you will get "null" input value, but remember "null" is not same as NULL in PHP.
Radio buttons, by definition, do not have a null value.
You could however add a radio button such as this:
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="radio" name="rad" value="null" /> null <br />
<input type="submit" value="submit" />
</form>
And use it as the null that you need.
That might be done with an if/else statement within the .php:
$radioInput = false;
if (!isset($_POST['rad'])){
$radioInput = NULL;
}
else {
$radioInput = $_POST['rad'];
}
http://php.net/manual/en/function.isset.php
Use javascript to return null in case if no radio button is selected ,on "submit" click :
var radioChecked=0;
var radios=document.getElementsByName("rad");
for(var i=0;i<radios.length;i++)
{ if(radios[i].checked){
radioChecked=radioChecked+1;
} }
if(radioChecked==0)
return null;
Hope it solves your problem.
I need to change the text before the input based on "year" entered on the input field,
and when changing the "Years to Show", disable the unnecessary income/assets fields.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript">
window.onload=function() {
// On "year" change, validate it and cahnge the text befor the input fields.
var year = document.getElementsByName("year");
year.onclick=function() {
this.year0_text.value = year[this.value];
this.year1_text.value = year[this.value]+1;
this.year2_text.value = year[this.value]+2;
}
// and on "years" change, disable the unnecessary income/assets fields.
}
</script>
</head>
<body>
<form name="ar" action="." method="post">
Year:<br />
<input type="number" name="year" value="2011"><br />
<br />
Years to Show:<br />
<input type="radio" name="years" value="0.5">first period (not full year)<br />
<input type="radio" name="years" value="1">1 year<br />
<input type="radio" name="years" value="2">2 years<br />
<input type="radio" name="years" value="3">3 years<br />
<br />
Income:<br />
<span class="year0_text">20XX-0</span> <input type="number" name="year0_income" value="0"><br />
<span class="year1_text">20XX-1</span> <input type="number" name="year1_income" value="0"><br />
<span class="year2_text">20XX-2</span> <input type="number" name="year2_income" value="0"><br />
<br />
Assets:<br />
<span class="year0_text">20XX-0</span> <input type="number" name="year0_assets" value="0"><br />
<span class="year1_text">20XX-1</span> <input type="number" name="year1_assets" value="0"><br />
<span class="year2_text">20XX-2</span> <input type="number" name="year2_assets" value="0"><br />
</form>
</body>
</html>
DEMO - http://jsfiddle.net/92GaE/2/
Whats up rami? (ma kore?)
Just add an event listener, you may want to take a look at this for instance:
Event Listeners
I would like create registration form based on which country.
default address form is the default visible input
when customer click on the non-uk radio button then automatically hide uk form and oppen non-uk address form
I think I need to use javascript or JQuery for this function.
could any one give me an advice for this function.
if you think my question is not acceptable could you please don't decrease my rate.
I can remove my question if u don't like.
here is my form code
<form action="sent.php" name="form1" method="post">
Name
<input type="text" name="name" />
<br />UK
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />EU
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />Country
<input type="text" name="post_code" />
<br />
</form>
You can wrap all the input elements except the radiobuttons in two different divs so you can catch the change event for the radio buttons and show and hide two divs accordingly.
You can either add a class to represent which elements are UK address elements and which are EU or, as Élodie Petit, answered wrap them in a div and then either show or hide them depending on which radion button was selected.
Here is a JSFiddle using the latter option.
I don't think you need to show or hide the elements necessarily as the form elements seem to be the same on both 'forms', consider :
<form action="sent.php" name="form1" method="post">
Name <input type="text" name="name" /><br/>
UK <input type="radio" name="from" value="UK" > / EU <input type="radio" name="from" value="EU" ><br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</form>
And then when you request the "from" parameter, you'll know which country they're from?
I found simple solution for it with JQuery
With JQuery support
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Here is the javascript code
$(document).ready(function() {
$("input[name$='from']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#c" + test).show();
});
});
</script>
here is the html code suppurated with div
<form action="sent.php" name="form1" method="post">
<label>UK <input type="radio" name="from" value="1" ></label><br />
<label>EU <input type="radio" name="from" value="2" ></label><br />
<div id="c1" class="desc">
Name <input type="text" name="name" /> <br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</div>
<div id="c2" class="desc" style="display:none;">
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
Country <input type="text" name="post_code" /> <br />
</div>
</form>
How can I write numeric numbers into an input field by pressing a button?
Suppose I have a button:
<input type="button" value="1">
Then I want, that when numeric pad button 1 is pressed it adds numeric words just like Windows Calculator.
I'm not sure what you are asking, but this code will add numbers to an input box (using jQuery).
HTML
<input id="data" type="text" />
<br />
<br />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" /><br />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" /><br />
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
Script
$(document).ready(function(){
$(':button').click(function(){
$('#data').val( $('#data').val() + $(this).val() );
})
})