Make a validation with checkbox - javascript

I am new in javascript. I want a validation on my checkbox. I have this html
<input type="checkbox" name="acceptTerms"/>
<input type="submit" name="subscribe" value="Enter now" title="Enter now" />
When you submit, and you not select the checkbox. The checkbox must get the class "error". When you check the checkbox. Than the form must be sumit. How can make that with jQuery / js?
Thanks

Try the following:
$('#yourForm').submit(function(e){
var $check = $('input[name=acceptTerms]');
if (!$check.is(':checked')) {
$check.addClass('error');
e.preventDefault()
}
})
$('input[name=acceptTerms]').change(function(){
if (this.checked) $(this).removeClass('error')
})

Related

Making a HTML form submit to different places

Hoping someone can help with this. I have a form which has an action attribute. This action attribute enables the user to subscribe to a newsletter when the form is submitted.
What I'm trying to do is only use that action if the user has checked a checkbox giving permission to subscribe to the newsletter. If the checkbox is left unchecked, the form can still be submitted, but will be redirected to a separate URL, disregarding the form's action attribute.
So far this is what I have, I'm not great with javascript so any help would be appreciated.
$('document').ready(function () {
$('#wifi-capture-form').submit(function() {
var newsletterTrue= $(this).attr("data-newsletter-checked");
var newsletterFalse= $(this).attr("data-newsletter-unchecked");
if ($('input.newsletter-checkbox').is(':checked')) {
$('#wifi-capture-form').attr('action', newsletterTrue);
else (
$('#wifi-capture-form').attr('action', newsletterFalse);
)
}
});
});
and the form is
<form name="wifi-capture-form" id="wifi-capture-form" action="" method="post" class="f24form wifi-capture-form" data-newsletter-checked="https://email.com/t/r/s/dkhywr/" data-newsletter-unchecked="https:www.domain.com/wifi-confirm">
<label for="fieldName">Name</label><br />
<input id="fieldName" name="cm-name" class="form-control" type="text" />
<label for="fieldEmail">Email</label><br/>
<input id="fieldEmail" class="form-control" name="cm-dkhywr-dkhywr" type="email" required /><br/><br/>
<input type="checkbox" name="newsletter" class="newsletter-checkbox" id="newsletter" value="Subscribe to newsletter"> Subscribe to our newsletter<br/><br/>
<button type="submit" class="btn btn-primary">Submit</button>
You can do it by changing the action attribute value of the form on submit. Here is the syntax:
$("#wifi-capture-form").attr("action", wifiConfirm);
So your new code must be like this:
$('#wifi-capture-form').submit(function(e) {
var wifiConfirm = $(this).attr("data-redirect");
/* if newslwetter checkbox is not checked, then change form action value*/
if (!$('input.newsletter-checkbox').is(':checked')) {
$("#wifi-capture-form").attr("action", wifiConfirm);
}
f24("send", "form", "form.#wifi-capture-form");
});
You can see other examples on How to change form action based on selection
Since you're using jQuery you can assign a click event to the checkbox that would dynamically change the action URL in case the checkbox is checked/unchecked.

is('checked') filtering method not working correctly

I am trying to see if a checkbox got checked with is() method, but it is giving an unexpected result. Either way if I check the checkbox or not, the method is returning false.
HTML
<form action="" method="post" id="place_order">
<input type="checkbox" name="tos" class="required check-condition" />
<span class="error error-tos" style="display:none">* This field is required</span><br>
<input type="submit" name="place_order" value="Submit Order" class="order-sb-btn" />
</form>
Jquery
$("#place_order").submit(function () {
var is_tos_checked = $(".check-condition").is('checked');
console.log(is_tos_checked);
if (is_tos_checked) {
$(".error-tos").hide();
return true;
} else {
$(".error-tos").show();
return false;
}
});
Jsfiddle
http://jsfiddle.net/yogc5ypb/1/
You need to express checked as a pseudo-selector, i.e. prefixed with :
.is(':checked');
I usually use .prop('checked')
So in your code you would change your line to:
var is_tos_checked = $(".check-condition").prop('checked');
If you want to submit form if user checked check box then you can use following method also-
1.write following statement in html file
<form action="" method="post" id="place_order">
<input type="checkbox" name="tos" class="required check-condition" />
<span class="error error-tos" style="display:none">* This field is required</span><br>
<input type="submit" name="place_order" value="Submit Order" class="order-sb-btn" />
</form>
2.Write following statement in js file.
jQuery('.order-sb-btn').click(function(){
var checkedValue = $('.required:checked').val();
if(checkedValue == undefined)
{
alert('not checked');
return false;
}
else
{
alert('checked');
}
})
By using above code form will be submit if user check the checkbox.
To check example please refer following link-
http://jsfiddle.net/1eygh774/1/

Add Anonymous Email to field if checkbox is ticked and hide field

I have a Feedback form which allows people to submit feedback, however I want to give the user the option to remain anonymous, the thing is my CMS must have Email and Name as a mandatory fields so I was thinking of adding a dummy name and email email if they wish to be Anonymous and then hide the field. It'll look something like this:
<input type="checkbox" class="anon">
if this is ticked then add the name "Remain Anonymous" to the Name field and add anon#anonymous.com to Email field, and then also hide the div.remain-anonymous. If unticked, then show the div again and clear the fields to blank again. And do the same again if it is ticked again etc.
<form>
<div class="remain-anonymous">
<input type="text" value="Name" class="name-field">
<input type="text" value="Email" class="email-field">
</div>
<textarea placeholder="Feedback comments"></textarea>
<input type="submit" value="Submit">
</form>
You can try out the below JQuery to achieve what you want.
$(document).ready(function () {
$(".anon").on("click", function () {
var $this = $(this);
if ($this.is(':checked')) {
$(".name-field").val("Remain anonymus");
$(".email-field").val("anon#anonymous.com");
//comment this to see the fields set.
$(".remain-anonymous").hide();
} else {
$(".name-field").val("Name");
$(".email-field").val("Email");
$(".remain-anonymous").show()
}
});
});
check out the same code in the JSFiddle . click here
You can do it like below:
$(function(){
var email = "anon#anonymous.com",
name = "anonymous";
$('.anon').change(function(){
if($(this).is(":checked")){
$('.remain-anonymous').hide();
$('.name-field').val(name);
$('.email-field').val(email);
}else{
$('.remain-anonymous').show();
$('.name-field').val("");
$('.email-field').val("");
}
});
});

show and hide div after submiting an action when checkbox is check and uncheck

I am trying to show or hide div after submitting an action. so let say I have textarea and I put "example" there then checked the checkbox. after submitting, the "receipt.php" page must display "example" , and if I unchecked the checkbox and submit, the receipt.php page must hide the "example". I tried searching similar to my problem but I really don't have idea how to solve it. I have this code so far but i dont have any codes in "receipt.php" since I really don't have idea. pls help me
<form method ="POST" action ="receipt.php">
<textarea name ="comment"></textarea><br>
<input type="checkbox" id="checkbox" value ="1" >Show this comment in receipt<br>
<input type ="submit" value ="Print">
</form>
You don't need the server response to recognize if the checkbox was checked unless you have some validation on server side. If using JQuery, you can do this:
$('#checkbox').change(function(){
$('#your_div').toggle();
});
If you want to rely on what your server says you need to return something to your ajax call.
for example {response: true/false}
In Html:-
<form method ="POST" action ="receipt.php">
<textarea name ="comment"></textarea><br>
<input type="checkbox" name="reciept-chk" id="checkbox" value = "1" >Show this comment in receipt<br>
<input type ="submit" value ="Print">
</form>
In receipt.php:
<?php
..//recept.php
if(isset($_POST['reciept-chk'])){
// Write Code example here
}
?>
If you want to validate it client side before posting your value in receipt.php then
you can simply validate by piece of jquery.
$(document).ready(function(){
$('#checkbox').change(function(){
if ($('#checkbox').is(':checked')) {
$("#exampleDiv").show();
} else {
$("#exampleDiv").hide();
}
});
});
Please avoide toggle() as it deprecated in 1.8
Here is the code you'll need in your unique PHP file :
<form method="POST">
<textarea name="comment">
<?php (isset($_POST['checkbox1']) && $_POST['checkbox1'] == '1') ? echo "Example"; : echo ""; ?>
</textarea>
<br>
<label for="checkbox1">Show this comment in receipt</label>
<input type="checkbox" id="checkbox1" name="checkbox1" value="1" />
<br>
<input type="submit" value="Print" />
</form>
Replace what you want in place of "Example".
If you are using javascript only, you might try something like this:
<script>
function show(){
if(form.toggledisplay.checked == false){
document.getElementById('example').style.display = "none";
}
else{
document.getElementById('div').style.display = "block";
}
}
</script>
<form method = "POST" action="receipt.php" onsubmit="show()">
<textarea name = "comment"></textarea><br>
<input type="checkbox" name="toggledisplay" id="checkbox" value = "1" >Show this comment in receipt<br>
<input type = "submit" value = "Print">
</form>
<div id="example" style="display:none;">This is the div you want to show</div>
If you are populating the contents of the div from the receipt.php file, you could make a post request to it, when the onsubmit() function is fired and fill the contents of the div like:
document.getElementById('div').innerHTML = "Result from the get/post request"
Hope this points you in the right direction.

disabling send button

I just a got a requirement to disable the send button in the form until the users enter his data.Can any one guide me?
thanks
Have the button initially disabled by having such HTML
<input type="submit" id="btnSubmit" disabled="disabled" value="Send" />
Then in the blur event of your form elements check if user entered all required data and when this happens, enable the button using such code:
document.getElementById("btnSubmit").disabled = false;
form action="javascript:aNameForAnAjaxSendPostFunction"
function aNameForAnAjaxSendPostFunction()
{
if ((document.getElementById('your field').value.strlen>0))
{
<< SEND REQUEST >>
}
}
Normally, I would code it for you, but I'm in a hurry, and you do have to learn how to search for yourself, so here's a hint:
addEventListener(), and you can check the length of the data within an input by calling document.body.getElementById('yourInput').length, and then you can change the button.disabled property to either true (make the default value false in the source code). All you need to do for yourself is find out how to use addEventListener
A simple way of doing what you want using JQuery:
(this works if you have only input texts)
HTML:
<form method='POST' action=''>
<input type='text' name='name' />
<input type='text' name='phone' />
<input type='text' name='email' />
<button type='submit' disabled='disabled'>Send</button>
</form>
Javascript:
$(function() {
$("input").change(function() {
if($("input[value='']").length == 0) {
$("button").removeAttr("disabled");
} else {
//disable again if a field is cleared
$("button").attr("disabled",true);
alert("Please fill all fields");
$("input[value='']").eq(0).focus();
}
});
});

Categories

Resources