I have a form that consists of checkbox fields, now on form submission we should check whether atleast one checkbox is checked
html code
<form id="form_check" class="form" action="/path/to/some/url" method="POST">
{% for field in fields %}
<div class="check_fields">
<input class="select-unselect" type="checkbox" name="invite" value="">
{{field}}
</div>
{% endfor %}
<input type="submit" class="btn btn-primary" value="Submit" onsubmit="atleast_onecheckbox()"/>
</form>
javascript code
<script type="text/javascript">
function atleast_onecheckbox()
{
var value = $("[name=invite]:checked").length > 0);
alert(value) ;
if (!value)
{
alert("Please.....");
}
}
</script>
So when i clicked on the submit button, the form is redirecting to the url mentioned in the action, but its not even hitting the javascript function atleast_onecheckbox()
what wrong in the above code, can anyone please make the above code work ?
You shouldn't attach JavaScript event directly in the HTML, this is a really bad practice.
Instead, because you use jQuery, you should use jQuery event handler :
$('#form_check').on('submit', function (e) {
if ($("input[type=checkbox]:checked").length === 0) {
e.preventDefault();
alert('no way you submit it without checking a box');
return false;
}
});
(http://jsbin.com/IXeK/1/edit)
If you really want to use HTML onsubmit, even if it's bad (and you should feel bad just by thinking of it), the onsubmit should be:
attached to the form
should prevent the default event on submit
return false
So it covers everything. Like here http://jsbin.com/IXeK/2/edit
<form onsubmit="return atleast_onecheckbox(event)" id="form_check" class="form" action="/path/to/some/url" method="POST">
<div class="check_fields">
<input class="select-unselect" type="checkbox" name="invite" value="">
</div>
<input type="submit" class="btn btn-primary" value="Submit" />
function atleast_onecheckbox(e) {
if ($("input[type=checkbox]:checked").length === 0) {
e.preventDefault();
alert('no way you submit it without checking a box');
return false;
}
}
<script type="text/javascript">
function atleast_onecheckbox()
{
if (document.getElementById('invite').checked) {
alert('the checkbox is checked');
}
else
{
alert("please check atleast one..");
return false;
}
}
</script>
<form id="form_check" class="form" action="/path/to/some/url" method="POST">
{% for field in fields %}
<div class="check_fields">
<input class="select-unselect" type="checkbox" name="invite" id="invite" value="">
{{field}}
</div>
{% endfor %}
<input type="submit" class="btn btn-primary" value="Submit" onclick=" return atleast_onecheckbox()"/>
</form>
Related
Hi successfully made a form where there are two submit buttons.
I needed two buttons because I need each button to take the form to a different place, while get/post the information in the first form.
This is how I did it
Javascript:
function submitForm(action) {
var form = document.getElementById('form1');
form.action = action;
form.submit();
}
<form id="form1" method="post" >
<div class="f-row">
<label for="pick">Pick-Up Address</label>
<input type="text" input name="pick" required value="<?php echo isset($_POST['pick']) ? $_POST['pick'] : ''; ?>"/>
</div>
<input type="button" onclick="submitForm('page2.php')" class="btn small color left" value="ADD ANOTHER STOP" />
<input type="button" onclick="submitForm('page3.php')" class="btn medium color right" value="Continue" />
</form>
It works, both buttons submits to the relevant pages.
But now there is one problem I can't seem to fix, previously if the form was not filled, and i clicked submit, it would ask me to fill up the required fields, now it does not anymore.
If required fields are not filled up, it still submits the form.
I need button 1 to not require required fields to be filled up, and button 2 to require it as button 2 submits the form, while button 1 brings it to a new form to fill up with other details before they submit from there.
Anyone know of a way I can sort this?
You can try this: <input type="text" name="pick" id="pick" required/> and in the javascript
function submitForm(action) {
var form = document.getElementById('form1');
form.action = action;
if (document.getElementById('pick').value) {
form.submit();
}}
else{
alert('Please fill the required field!');}
You just need to use jquery to validate the form when the first button is clicked and you can use formaction attribute on the button to specify where the button should go when it's clicked.
$('document').ready(function(){
$('#btn1').on('click',function(){
var pick = $('input[type="text"][name="pick"]').val();
if(pick == ""){
alert("enter pick");
return false;
}else{
$(this).submit();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" >
<div class="f-row">
<label for="pick">Pick-Up Address</label>
<input type="text" name="pick" value="your value">
</div>
<button type="submit" formaction="page2.php" class="btn small color left" id="btn1">ADD ANOTHER STOP</button>
<button type="submit" formaction="page3.php" class="btn medium color right">Continue</button>
</form>
You could use jQuery for this.
if ($('#something').length)
This will check if there exist an element with the id 'something', but not if it is empty or which value it has.
To check this you can use:
if($('#something').val().length>0)
or
if($('#something').val() != "")
Do with it what ever is needed.
You could even add this check within your submitForm function just above the current code.
Try this:
<script>
function submitForm(action) {
var a = $("input[name=pick]").val();
if(a) {
var form = document.getElementById('form1');
form.action = action;
form.submit();
} else {
alert('please fill the required field');
return false;
}
}
</script>
Using this way(simple way):--
<form id="myForm" name="myForm" onSubmit="encriptar_rc4();return false;">
<input type="submit" name="submitOne" value="submitOne" class="submitButton" />
<input type="submit" name="submitTwo" value="submitTwo" class="submitButton" />
</form>
<script>
$(function(){
$(".submitButton").click(function(e){
alert($(this).attr("name"));
});
encriptar_rc4();{
alert('hola');
}
});
</script>
I have created a form in HTML and have use onblur event on each and every field and it is working very fine. The problem is when i click on submit button(which will send data to a servlet) the data is submitted even if it is invalid. Here is an example.
<html>
<head>
<script>
function check()
{
if(checkName()==true)
return true;
else{
alert('vhvh');
return false;
}
}
function checkName()
{
var uname=document.enq.Name.value;
var letters = /^[A-Za-z, ]+$/;
if(uname.match(letters))
{
document.getElementById('Name').style.borderColor = "black";
return true;
}
else
{
document.getElementById('Name').style.borderColor = "red";
//alert('Username must have alphabet characters only');
//uname.focus();
return false;
}
}
</script>
</head>
<body>
<form name="enq" method="post" action="Enquiry" onsubmit="check()">
<input class="textbox" id="Name"style="margin-top:10px;font-size:16px;" type="text" name="Name" placeholder="Full Name" onblur="checkName()" required /><br><br>
<input class="button" type="submit">
</form>
</body>
</html>
How can i resolve this issue?
use
<input class="button" type="button">
and put a onclick event like this:
<input class="button" type="button" onclick="this.submit()">
so you can manipulate data before you subimit it.
There is an "onsubmit" event that allows you to control form submission. Use it to call your validation functions, and only then decide if you want to allow the user to submit the form.
http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html
You have to use it in the following way if you want it to prevent the form submission:
<form onsubmit="return check()">
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/
Here is the code, I can't figure out why enter/return isn't working! Is it because it's inline?
HTML
<div class="wrap"><form name="login" style="margin: 0px">
<label for="fname">CLICK TO ENTER PASSWORD</label>
<input TYPE="text" NAME="pass" size="17" onKeyDown="e.keyCode == 13;" id="fname" class="cool"><br><input type="button" value="LOGIN" class="asbestos-flat-button" onClick="TheLogin(this.form)">
</form>
</div>
JS
<script language="JavaScript" type="text/javascript">
<!--- PASSWORD PROTECTION SCRIPT
function TheLogin() {
var password = 'password';
if (this.document.login.pass.value == password) {
top.location.href="home.html";
}
else {
location.href="index.html";
}
}
// End hiding --->
</script>
I'm learning JS so any help would be so awesome!
UPDATE
Thanks for your help. Still not working when integrated. The page doesn't load the home.html when I hit enter/return. Instead I get no refresh, and the address bar has the url http://example.com/?pass=password.
If I click the button it does load the home.html!
thanks!
Here I wrote a JSFiddle with the working example.
In the HTML code:
Remove onKeyDown="e.keyCode == 13;" from the <input> text element.
Remove onClick="TheLogin(this.form)" from the <input> button element.
Change the type of input button from 'button' to 'submit'. In this way, when you press "enter" in the input text form the form is submitted.
Intercept the "submit" event in the form, adding onSubmit="theLogin(this.form)" on <form> element.
Note: I have renamed the function name from "TheLogin" to "theLogin" because in JavaScript the functions begins with lowercase letters if they are not constructors.
The HTML code:
<div class="wrap">
<form name="login" style="margin: 0px" onSubmit="theLogin(this.form)">
<label for="fname">CLICK TO ENTER PASSWORD</label>
<INPUT TYPE="text" NAME="pass" size="17" id="fname" class="cool">
<br>
<input type="submit" value="LOGIN" class="asbestos-flat-button">
</form>
</div>
And the JavaScript code:
theLogin = function() {
var password = 'password';
if (this.document.login.pass.value === password) {
top.location.href = "home.html";
} else {
location.href = "index.html";
}
}
You have missed the <input type="submit">, without it you can't use the Enter key to submit the form.
please can someone help. this form validation is not triggering.. It's really frustrating me. I'm a PHP developer rather than JS so i'm struggling a bit with this even though it's clearly something very simple. I'm just trying to validate the form based on the delete box being ticked.
Nothing appears when I click submit. It just submits the form so it must be returning true.
function deleteVal(chk) {
var chk;
// If the checkbox has been set to delete
if (chk.checked == "delete") {
var ok=confirm("You are about to delete the selected images below.\nAre you sure you want to do this?");
if (ok) {
// Submit
return true;
} else {
// Don't submit
return false;
}
}
// Delete box was not ticked so return true and submit form
return true;
}
</script>
<form action="" method="POST" onSubmit="return deleteVal(delete)">
<label>Delete images?</label><input type="checkbox" name="delete" value="delete" />
<input type="submit" name="submit" value="Submit" />
</form>
You need to get the checked value properly like so and see if it is true or false.
var chk = document.getElementById('delete');
// If the checkbox is checked
if (chk.checked == true) {
Then you do not need to pass a variable to the function, however, you do need to give you checkbox an id.
<form action="" method="POST" onSubmit="return deleteVal();">
<input type="checkbox" name="delete" id="delete"/>
<input type="submit" name="submit" value="Submit" />
</form>
Tested code - http://pastebin.com/FdWdeSCN