I would like to disable all form elements in a div and show a RED message inside a new div if I click a radio button outside the div.
For example:
<div id="myform">
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
</div>
<div id="message">
Red Message here
</div>
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
I want when someone clicks one of the two radio buttons to disable all elements in the above form (myform) and display a red message in div message.
Thanks
Try this
$("input:radio").click(function(){
$("#myform input").attr("disabled", true);
$("#message").show();
});
$('input[name="sex"]').click(function(){
$('#myform input').prop('disabled',true);
$('#message').show();
});
#message { display:none; color:red }
$('#reset').click(function(){
$('#myform input').prop('disabled',false);
$('#message').hide();
});
http://jsfiddle.net/2zr4J/1/
$('input[name="sex"]').click(function(){
$('#myform input').prop('disabled',true);
$('#message').fadeIn();
});
$('#reset').click(function(){
$('#myform input').removeProp('disabled');
$('#message').fadeOut();
});
Working demo: http://jsfiddle.net/AlienWebguy/2zr4J/2/
Related
I have this form that has a series of inputs. Input 1 changes the options for Input 2. Input 2 is blank and until input one is filled, I need to make it so that if the user clicks on input 2 to try to fill out first a message tells them to please select from input 1 first.
I have jQuery doing an alert box currently but how can I have the message show up in the input or right below it?
CodePen: https://codepen.io/anon_guy/pen/WXgZQw
HTML:
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br>
Input-2:<br>
<input type="text" name="second" id="two" >
</form>
jQuery:
$( "#two" ).click(function() {
alert( "Please enter Input 1 First" );
});
It would make more sense, and be a better user experience, to only enable input 2 once input 1 has received a value. You can do that using the input event, like this:
$('#one').on('input', function() {
$('#two').prop('disabled', this.value.trim() == '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br>
Input-2:<br>
<input type="text" name="second" id="two" disabled="disabled">
</form>
To add it inside the first input box (as a placeholder):
$("#two").click(function() {
if ($("#one").val() == "") {
$("#one").attr("placeholder", "Please enter Input 1 First");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br> Input-2:
<br>
<input type="text" name="second" id="two">
</form>
To add it as a message below the inputs:
$("#two").click(function() {
if ($("#one").val() == "") {
var newDiv = document.createElement('div');
newDiv.id = "newDiv";
newDiv.innerText = "Please enter Input 1 First";
$("form").append(newDiv, $("#two").next());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br> Input-2:
<br>
<input type="text" name="second" id="two">
</form>
The if statement will cause the message to only display if the first input box has no value:
if ($("#one").val() == "")
You can dynamically insert text/html via after() if the criteria isn't met. Though a more ideal approach would be to use focus over click in this case:
$( '#two' ).on('focus', function() {
if (!$('#one').val().length) {
$('#two').after('<p>Please enter Input 1 First</p>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br>
Input-2:<br>
<input type="text" name="second" id="two" >
<p class="warning"></p>
</form>
You need to attach it to the parent.
You can evaluate the first input field to see if it is empty. There are a number of things you can do to remove the appended div.
$( "#two" ).click(function() {
if($("#one").val("")){
$(this).parent().append("<div>Please enter Input 1 First</div>");
}
});
I face problem with reset value to empty with jquery when click radio button.
<form id="my-form">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" value="123" />
</div>
<div>
<label for="ID">ID NO</label>
<input type="text" id="ID" name="ID" value="NO21034" />
</div>
<fieldset>
<legend>Option</legend>
<label for="clearID">clearID</label> <input type="radio" id="clearID" name="opt" checked />
<label for="clearName">clearName</label> <input type="radio" id="clearName" name="opt" />
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function()
{
$('#clearname').on('click', function()
{
$('#my-form').find('input:text').val('');
});
});
</script>
now if my radio button click clearName,it will automatic clear the value of name and id.
is it having another code can replace find('input:text') ?I want to clear either one value(name or id),not both.
Clear each field using corresponding id..
<script type="text/javascript">
$(document).ready(function()
{
$('#clearname').on('click', function()
{
$('#ID').val('');//it clears the value of element having id='ID'
$('#name').val('');//it clears the value of element having id='name'
});
});
</script>
use javascript reset method
$('#clearname').on('click', function()
{
$("#my-form")[0].reset()
// or
$("#my-form").get(0).reset()
});
How to change submit button text based on which radio-button is active?
Here is my code, but it does not work. It changes text only once.
I have two radio-buttons:
<input type="radio" name="build-team" class="choose" value="build" /> Yes
<input type="radio" name="build-team" class="choose" value="show" /> No
<button class="show-result" data-chooseyes="Yes" data-chooseno="No">Yes</button>
And I have script:
$(document).on('click', '.choose', function() {
var target = $('.show-result');
if ($(this).attr('checked') == 'checked') {
target.html(target.data('chooseyes'));
}
else {
target.html(target.data('chooseno'));
}
})
JSFiddle example
$(document).on('click', '.choose', function() {
var target = $('.show-result');
target.html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="build-team" class="choose" value="Yes" /> Yes
<input type="radio" name="build-team" class="choose" value="No" /> No
<button class="show-result" data-chooseyes="Yes" data-chooseno="No">Yes</button>
$('.opt').click(function(){
$('#button').html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="opt" name="opt" type="radio" value="Yes" checked="checked">Yes
<input class="opt" name="opt" type="radio" value="No">No
<button id="button" type="submit">Yes</button>
This is the easiest answer, no added attributes, only clean HTML + jQuery, it is also important to realize that there must always be a radio selected/checked by default, if not, you would have to validate the field and validating a radio is not cool haha :) have a nice day!
Hi i am having two radio button plan a, plane b and i ant that when i click on plane a then check box android apps,web apps checked and texbox smart card enable and if i click plane b then all check box should be checked and all text box should be enable
<p class="contact">
<input type="radio" name="PlanA"id="PlanA"value="A"><label for="PlanA"><span style="font-weight:bold">PlanA</span></label><br>
<input name="PlanA" type="hidden" value=0 />
</p>
<p class="contact">
<input type="radio" name="PlanB"id="PlanB"value="B"><label for="PlanB"><span style="font-weight:bold">PlanB</span></label><br>
<input name="PlanB" type="hidden" value=0 />
</p>
<p class="contact">
<input type="checkbox" name="AndroidApps" id="smartphone" value=1><label for="AndroidApps"><span style="font-weight:bold">AndroidApps</span></label><br>
<input name="AndroidApps" type="hidden" value=0 />
</p>
<p class="contact">
<input type="checkbox" name="WebApps" id="mobweb" value=1><label for="WebApps"><span style="font-weight:bold">WebApps</span></label><br>
<input name="WebApps" type="hidden" value=0 />
</p>
<p class="contact"><label for="SmartCard"><span style="font-weight:bold">SmartCard</span></label>
<input type="text" name="SmartCard"id="scard"disabled="disabled" required size="45" >
</p>
<p class="contact"><label for="comment"><span style="font-weight:bold">EmailService</span></label>
<input type=email name="emailid"id="emailid"disabled="disabled" required size="45" >
</p>
<p class="contact"><label for="comment"><span style="font-weight:bold">SmsService</span></label>
<input type=tel name="mobnum"id="mobnum"disabled="disabled" required onKeyUp="isValidChar(this.value);" size="45">
</p>
i tried here
$(document).ready(function(){
$('#PlanA').on('change',function(e) {
console.log("dfsd");
$("#mobweb,#smartphone,#smartcard").prop("checked",this.checked);
$("#scard").prop("disabled", !$(this).is(':checked'));
});
});
$(document).ready(function(){
$('#PlanB').on('change',function(e) {
console.log("dfsd");
$("#mobweb,#smartphone,#smartcard,#email,#sms").prop("checked",this.checked);
$("#emailid").prop("disabled", !$(this).is(':checked'));
$("#mobnum").prop("disabled", !$(this).is(':checked'));
$("#scard").prop("disabled", !$(this).is(':checked'));
});
});
How Can i achieve this ?
Thanks in advance
The 'name' attribute of all the radio buttons in your case should be same but id can be different. All radios with same name are in a group called radio group. They will work as they want you to.
Try this:
$(document).ready(function(){
$('#PlanA').on('change',function(e) {
$('input:radio').not(this).attr('checked',false);
$("#mobweb,#smartphone,#smartcard").prop("checked",this.checked);
$("#emailid").prop("disabled", $(this).is(':checked'));
$("#mobnum").prop("disabled", $(this).is(':checked'));
$("#scard").prop("disabled", !$(this).is(':checked'));
});
$('#PlanB').on('change',function(e) {
$('input:radio').not(this).attr('checked',false); $("#mobweb,#smartphone,#smartcard,#email,#sms").prop("checked",this.checked);
$("#emailid").prop("disabled", !$(this).is(':checked'));
$("#mobnum").prop("disabled", !$(this).is(':checked'));
$("#scard").prop("disabled", !$(this).is(':checked'));
});
});
DEMO
Check JSFiddle for this below will help to see actually
jsfiddle.net/rohanppatil/TTknF/8/
First you have to group your radios with same name.
Try with this:
$(document).ready(function(){
$('.contact').on('change', ':radio', function(e) {
if(this.id === "PlanA"){
$("#mobweb,#smartphone,#smartcard").prop("checked", this.checked);
$("#scard").prop("disabled", !this.checked);
} else if(this.id === "PlanB"){
$(':checkebox').prop("checked", this.checked);
$('[type=text], [type=email], [type=tel]').prop("disabled", !this.checked);
}
});
});
Demo # Fiddle
<form action="" method="post">
<body>
customer type:<input type="radio" name="customer" value="yes" onclick="return check()" checked="checked"/>yes
<input type="radio" name="customer" value="no" onclick="return check2()" />no
<div id="one">
firts name :<input type="text" name="fname" id="fname" required="required"/>
</div>
<div id="two" style="display:none;">
Party Name<input type="text" name="party_name" id="pname" required="required"/>
</div>
<input type="submit" value="save" name="save" />
</body>
</form>
<script type="text/javascript">
function check()
{
document.getElementById("one").style.display="";
document.getElementById("two").style.display="none";
}
function check2()
{
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="";
}
</script>
</head>
<?php
if(isset($_POST["save"]))
{
header("location: hide_show.php");
}
?>
here at the top are two radio buttons ...when i click on "Yes" radio button Div one shows and div two gets hide....when i click on "no" radio button then div two shows up and one hides ...now i have applied validation in both the textboxes so suppose if have choosen yes div one shows up and when i click submit button ...it doesnt get submitted because i have applied validation in div named two....valiadtion is also necessary...but is taking both div's validation at the submit time...plz suggest some way for this
Try style.display="block" rather
function check()
{
document.getElementById("one").style.display="block";
document.getElementById("two").style.display="none";
}
function check2()
{
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="block";
}