Showing input when CheckBox is checked - javascript

I am creating a contact form, I have two inputs, of type="checkbox"; the first one is email, and is already checked, but I want to uncheck this, in the event that the user picks the "Phone" option, and show the phone input in which to enter the phone number.
Here's the code:
at JS Fiddle
I hope you guys can help me, I'm still a js newbie but I have learnt a lot.
HTML
Name *:
<label for="">Email <span>*</span>:</label>
<input type="email" placeholder="Email (Required)">
<label for="">Got a question? <span>*</span>:</label>
<textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
<label for="">Best form to contact</label>
<div>
<p>Email: </p>
<input type="checkbox" name="fruit" value="email" id="email2" checked>
</div>
<div>
<p>Phone: </p>
<input type="checkbox">
<input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed">
</div>
<div class="SendButton">
Send
</div>
</form>
</div>
</div>
Javascript
$('#ChatContainer').hide();
$('.NoDisplayed').hide();
$('#ChatToggle').click(function(){
$('#ChatContainer').toggle('slow');
});
Thank you.

I'd suggest associating your 'preferred contact' choices together, using radio-inputs (since 'preferred' is an exclusive choice to make, whereas 'acceptable' might include all possible options), giving:
<label for="">Best form to contact</label>
<div>
<p>Email:</p>
<input type="radio" name="contact" value="email" id="email2" checked="checked" />
</div>
<div>
<p>Phone:</p>
<input type="radio" name="contact" value="phone" />
<input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
</div>
Which would work with the following jQuery:
$('input[type="radio"][name="contact"]').on('change', function(){
$('#phonecheck').toggle(this.value === 'phone');
});
JS Fiddle demo.
It's worth also noting that your HTML is somewhat problematic; your <label> elements weren't associated with any (let alone 'specific') form-elements; you were using a <label> simply to provide a form's section-name (for which the <legend> attribute should be used, within a <fieldset> grouping). That said, I've corrected your HTML and moved the phone-number entry box outside of the <div> that was containing the checkbox (and now contains a radio-input), to reduce the jarring effect of the <form> suddenly being displaced. There's still a bit of a jump, but not quite so profound.
Here's the amended HTML, which still works with the above jQuery:
<div id="ContactForm">
<div id="ChatToggle">
<p>Contact Us</p>
</div>
<div id="ChatContainer">
<form action="">
<label>Name <span>*</span>:
<input type="text" placeholder="Your Name (Required)" />
</label>
<label>Email <span>*</span>:
<input type="email" placeholder="Email (Required)" />
</label>
<label>Got a question? <span>*</span>:
<textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
</label>
<fieldset>
<legend>Best form to contact</legend>
<div>
<label>Email:
<input type="radio" name="contact" value="email" id="email2" checked="checked" />
</label>
</div>
<div>
<label>Phone:
<input type="radio" name="contact" value="phone" />
</label>
</div>
<input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
</fieldset>
<div class="SendButton"> Send
</div>
</form>
</div>
</div>
JS Fiddle demo.
References:
CSS:
Attribute-equals (attribute="value") selector.
HTML Elements:
<fieldset>.
<label>.
<legend>.
<input />.
jQuery:
on().
toggle().

Try this code:
var $checkPhone = $('#checkPhone');
var $checkMail = $('#checkMail');
var $phonecheck = $('#phonecheck');
$checkPhone.change(function(data) {
$checkMail.attr("checked", false);
if (this.checked) {
$phonecheck.show();
}
else {
$phonecheck.hide();
}
});
$checkMail.change(function(data) {
$checkPhone.attr("checked", false);
$phonecheck.hide();
});
remove the class NoDisplayed form the phone element and repelace it by style="display: none;"
http://jsfiddle.net/dL36kccw/8/
Addition:
Doing such stuff with jQuery is not the easiest. You often end up in placing some DOM manipulations in several places which makes the code less maintainable (like the $phonecheck.hide(); in this case.
I can strongly recommend to take a look into Knockout or some other UI framework. A good list of frameworks + examples can be found on todoMVC. I think Knockout is the best for many cases. Backbone is very competitive, too. But in the end you need to find one that reflects your needs and style.
Edit: Fixed the bug with unchecking the pohne.

You just need to handle the change event of the phone checkbox:
$("#chkPhone").on("change", function () {
$("#email2").prop("checked", !($(this).is(":checked")));
});
http://jsfiddle.net/dL36kccw/5/

// I have just added id (id -->"phone" to checkbox for corresponding phone number text box and added style="display:none;" to phone number text
<label for="">Email <span>*</span>:</label>
<input type="email" placeholder="Email (Required)">
<label for="">Got a question? <span>*</span>:</label>
<textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
<label for="">Best form to contact</label>
<div>
<p>Email: </p>
<input type="checkbox" name="fruit" value="email" id="email2" checked>
</div>
<div>
<p>Phone: </p>
<input type="checkbox" id="phone">
<input type="text" placeholder="Give us your phone" id="phonecheck" style="display:none;">
</div>
<div class="SendButton">
Send
</div>
</form>
</div>
</div>
// please try this script
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#phone').click(function(){
if($('#phone').is(':checked'))
{
$('#phonecheck').show();
}
else
{
$('#phonecheck').hide();
}
});
</script>

Related

Atleast select one check box in form validation using angularjs

Here is my html
<form name="sales">
<div class="sale-type">
<p>Which would you like to sell?</p>
<fieldset class="md-form form-group">
<input ng-model="art.originalForSale" name="originalForSale" type="checkbox" class="filled-in" id="checkbox2">
<label for="checkbox2">My Original ART</label>
</fieldset>
<fieldset class="md-form form-group">
<input ng-model="art.printForSale" name="printForSale" type="checkbox" class="filled-in" id="checkbox22">
<label for="checkbox22">Prints of my ART</label>
</fieldset>
</div>
<button type="submit" ng-disabled="sales.$invalid" class="btn-form btn-next c-sprite" alt="Submit"></button>
</form>
I want to display validation message that shows at least one check box required how can i do it
found a solution from this question How to require at least 1 checkbox for AngularJS Form Validation?
but it uses a script i want a solution without using scirpt
currently i am using
<span ng-show="part1.originalForSale.$error.required" class="error">Checkbox required</span>
I think that solve your problem:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<ng-form name="sales" ng-app >
<div class="sale-type">
<p>Which would you like to sell?</p>
<fieldset class="md-form form-group">
<input ng-model="art.originalForSale" value="cb1" name="originalForSale" type="checkbox" class="filled-in" id="checkbox2" ng-required="!art.printForSale">
<label for="checkbox2">My Original ART</label>
</fieldset>
<fieldset class="md-form form-group">
<input ng-model="art.printForSale" value="cb2" name="printForSale" type="checkbox" class="filled-in" id="checkbox22" ng-required="!art.originalForSale">
<label for="checkbox22">Prints of my ART</label>
</fieldset>
</div>
<span ng-show="sales.$invalid" class="error">Checkbox required</span>
<button type="submit" ng-disabled="sales.$invalid" class="btn-form btn-next c-sprite" alt="Submit"></button>
</ng-form>
You can use ngRequired directive. There is a simple example.
<input name="checkbox1" type="checkbox" ng-model="isChecked1" ng-required="isChecked2">
<input name="checkbox2" type="checkbox" ng-model="isChecked2" ng-required="isChecked1">
You can use ngMessages for validation message
<div ng-messages="myForm.checkbox1.$error || myForm.checkbox2.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not select a checkbox !</div>
</div>
Have you tried below?
<span ng-show="!(art.printForSale || art.originalForSale) " class="error">Checkbox required</span>
Use this with $dirty if you want to show the message after submit form.
write required attributes in input tag for showing msg
<span ng-show="frmRegister.name.$dirty && frmRegister.name.$error.">this is req...</span>

Generating form fields using jquery

I have a pretty basic form that allow user to post simple classified ads. It looks like this:
<form action="">
<fieldset>
<h3>Personal Informations</h3>
<input type="text" placeholder="Your Name">
<input type="text" placeholder="Your Address">
</fieldset>
<fieldset>
<h3>Car Informations</h3>
<input type="text" placeholder="Manufacturer">
<input type="text" placeholder="Model">
<input type="text" placeholder="Year">
Add More Ads
</fieldset>
</form>
I would like to allow the visitor to post more ads then one via "Add More Ads" button/link which would generate same 3 fields as much times as visitor needs ads.
What would be the simplest solution to do this? Any help/guide would be great!
Thanks!
P.S Also it would be great if the user could also remove the fields if he doesnt need them
Try this.
$('#addMOre').on('click',function(){
var self = $('.apendable').first().clone().insertAfter(".apendable:last");
$('.apendable:last input').val('');
self.append('<button class="close-info">close</button>');
$('.close-info').on('click', function(){
$(this).parent().remove();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<fieldset>
<h3>Personal Informations</h3>
<input type="text" placeholder="Your Name">
<input type="text" placeholder="Your Address">
</fieldset>
<fieldset id="info">
<h3>Car Informations</h3>
<div class="apendable">
<input type="text" placeholder="Manufacturer">
<input type="text" placeholder="Model">
<input type="text" placeholder="Year">
</div>
Add More Ads
</fieldset>
</form>
You can set inputs in <div class="row"> then copy first row class.
$("#addAdsFiels").click(function(){
var clone = $(this).siblings(".row:first").clone();
$(clone).find("input").val("");
$(this).before(clone);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<fieldset>
<h3>Personal Informations</h3>
<input type="text" placeholder="Your Name">
<input type="text" placeholder="Your Address">
</fieldset>
<fieldset>
<h3>Car Informations</h3>
<div class="row">
<input type="text" placeholder="Manufacturer">
<input type="text" placeholder="Model">
<input type="text" placeholder="Year">
</div>
Add More Ads
</fieldset>
</form>

Checkbox to button focus

I've got multiple forms on my page. In one form I've got 3 text fields a check box and a button. When the tab key is pressed, it goes to the 3 text fields and then to the checkbox and then no where.
How can I focus the button (submit) after the checkbox (maths) and then back to the first text field (user_id).
<form id="form13">
User ID :<input type="text" id="user_id" /><br>
Password: <input type="password" id="password" /><br>
Department: <input type="text" id="department" /><br>
<input type="checkbox" id="maths" value="on"> Maths
<input type="submit" id="submit" value="Submit" />
</form>
$('#maths').keydown(function(e){
if (e.which == 9){
$('#submit).focus();
}
});
If your need is to handle Tabbing in your HTML forms. Then you may need to handle this with HTML attribute tabindex this is a good article for learning purpose:
<input id="foo" tabindex="1" />
<input id="bar" tabindex="3" />
<input id="awesome" tabindex="2" />
So, you can handle it in your way. And yes, you can also change it dynamically by using Javascript:
document.getElementById("foo").tabIndex = "3";
I hope it may help you.
You should organize your form in such a way that it can be navigated using the keyboard only.
For example, have a look at this form:
Accessible Signup form
Manually setting the tabindex may lead to problematic behavior. There are couple of good article why you should not do it:
Using the tabindex attribute
Don’t Use Tabindex Greater than 0
Be aware when manually setting a tabindex as suggested, this will affect natural flow of tab index in form and document. Use this only when you are absolutely sure about it.
You can organize your form in such a way that keyboard navigation of your form works without you using tabindex.
Have a look at following Pen : Form field focus, you'll see that from checkbox, the focus goes directly to submit button and back :
<form id="form13">
<label for="asdfg-user_id" id="user_id-ariaLabel">
User ID: <input type="text" id="asdfg-user_id" />
</label>
<br>
<label for="password" id="password-ariaLabel">
Password: <input type="password" id="password" />
</label>
<br>
<label for="password" id="password-ariaLabel">
Department: <input type="text" id="department" />
</label>
<br>
<fieldset id="interestInfo">
<legend>Subject </legend>
<div>
<div id="interests"></div>
<div>
<div class="row">
<input id="chk_Subject_1_lbl" name="chk_Subject[]"
type="checkbox"
value="on"/>
<span>
<label for="chk_Subject_1" id="AreaOfInterest_1-ariaLabel" >Math</label>
</span>
</div>
<div class="row">
<input id="chk_Subject_2_lbl" name="chk_Subject[]"
type="checkbox"
value="on"/>
<span>
<label for="chk_Subject_2" id="AreaOfInterest_2-ariaLabel" >Chemistry</label>
</span>
</div>
</div>
</div>
</fieldset>
<input type="submit" id="submit" value="Submit" />
</form>

JQbootstrapvailadtion (or any other validation package) not working with Meteor

I am currently looking for a validation method for Meteor and have tried both Parsley.js and jqbootstrapvalidation with the same result. I have added both of the packages but my forms do not seem to use either for validation, instead they show (what I believe to be) the standard meteor "this field is required" pop up.
I have tried
<input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />
with
Template.createQuiz.rendered = function () {
$(function(){$(".validated").jqBootstrapValidation();});
}
And pure html
<form class="form-horizontal">
<div class="control-group warning">
<label class="control-label">Email address</label>
<div class="controls">
<input type="email" aria-invalid="true">
<p class="help-block"><ul role="alert"><li>Not a valid email address<!-- data-validator-validemail-message to override --></li></ul></p>
</div>
</div>
<div class="form-actions"><button type="submit" class="btn btn-primary">Test Validation <i class="icon-ok icon-white"></i></button></div></form>
Does anyone have a working example or a tip to get validation with either jqbootstrap or parsley.js working? Much appreciated
Edit:
For parsley I have tried
<form id="demo-form parsley" data-parsley-validate>
<!-- this field is just required, it would be validated on form submit -->
<label for="fullname">Full Name * :</label>
<input type="text" name="fullname" required />
<!-- this required field must be an email, and validation will be run on
field change -->
<label for="email">Email * :</label>
<input type="email" name="email" data-parsley-trigger="change" required />
<!-- radio and checkbox inputs by default have to be wrapped in a parent
elemnt (here <p>) that will have success and error classes -->
<label for="gender">Gender *:</label>
<p>
M: <input type="radio" name="gender" id="genderM" value="M" required />
F: <input type="radio" name="gender" id="genderF" value="F" />
</p>
<!-- here, field is not required, it won't throw any error if no checkbox
is checked. But if checked, two at least must be checked -->
<label for="hobbies">Hobbies (2 minimum):</label>
<p>
Skiing <input type="checkbox" name="hobbies" value="ski" data-parsley-mincheck="2" />
Running <input type="checkbox" name="hobbies" value="run" />
Eating <input type="checkbox" name="hobbies" value="eat" />
Sleeping <input type="checkbox" name="hobbies" value="sleep" />
Reading <input type="checkbox" name="hobbies" value="read" />
Coding <input type="checkbox" name="hobbies" value="code" />
<label for="heard">Heard us by *:</label>
<select id="heard" required>
<option value="">Choose..</option>
<option value="press">Press</option>
<option value="net">Internet</option>
<option value="mouth">Word of mouth</option>
<option value="other">Other..</option>
<!-- this optional textarea have a length validator that would be checked on keyup after 10 first characters, with a custom message only for minlength validator -->
<label for="message">Message (20 chars min, 100 max) :</label>
<textarea name="message" data-parsley-trigger="keyup" data-parsley-length="[20, 100]" data-parsley-validation-threshold="10" data-parsley-minlength-message = "Come on! You need to enter at least a 20 caracters long comment.."></textarea>
<input type="submit" />
</form>
And then:
Template.createQuiz.rendered = function () {
$("#parsley").parsley();
};
Create a bootstrap control group and initialize the validation inside your rendered function.
Template
<template name="createQuiz">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Email address</label>
<div class="controls">
<input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />
<p class="help-block"></p>
</div>
</div>
</form>
</template>
Code
Template.createQuiz.rendered = function () {
$(".validated").jqBootstrapValidation();
};
It is almost same response for parsley.js, you just need to add it to the rendered function
Template.createQuiz.rendered = function () {
$('#yourFormId').parsley();
}
Of course you need to add necessary attributes to your form elements.

How to wrap two elements into one div?

I have a problem with wrapping two elements: label and input into one div. Can you help me how to do it right ? Thank you very much.
Example:
<label><label>
<input>
<label></label>
<input>
Should be:
<div data-role="fieldcontain">
<label><label>
<input>
</div>
<div data-role="fieldcontain">
<label><label>
<input>
</div>
Jquery:
$('input[type="text"]').prev().andSelf().wrap('<div data-role="fieldcontain">');
HTML:
<label>Name: </label>
<input type="text" name="name" id="name" value="" />
<label>Surname: </label>
<input type="text" name="surname" id="surname" value="" />
You need to loop through each input then club the input and the label and use .wrapAll() like
$('input[type="text"]').each(function () {
$(this).prev().addBack().wrapAll('<div data-role="fieldcontain">');
})
Demo: Fiddle

Categories