How to make the submit button go the link destination , but first the checkbox must be checked ?
My issue is whenever I click on Pay: it doesn't wait the ckeckbox to be checked
function checkForm(form) {
if (!form.terms.checked) {
alert("Please indicate that you accept the Terms and Conditions");
form.terms.focus();
return false;
}
return true;
}
const pay = document.getElementById("submitBtn");
pay.addEventListener("click", myFunction);
function myFunction() {
window.location.href = "google.com"
}
<form class="n-chk" style="margin-bottom:1em ;text-align:center;">
<label class="new-control new-checkbox checkbox-primary">
<input onsubmit="return checkForm(this);" type="checkbox" required >
<span class="new-control-indicator"></span>
<span class="text-dark"> I agree to the
Terms of Use &
Privacy Policy
</span>
</label>
<input type="submit" id="submitBtn" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">
</form>
onsubmit="return checkForm(this);" belongs on the form element
But since you made it required, just remove all JS and add the action to the form
Also never add event handlers to submit buttons. Add an eventListener to the submit event instead and use preventDefault
So EITHER this
<form action="yourpaymentpage.php" class="n-chk" style="margin-bottom:1em ;text-align:center;">
<label class="new-control new-checkbox checkbox-primary">
<input type="checkbox" required >
<span class="new-control-indicator"></span>
<span class="text-dark"> I agree to the
Terms of Use &
Privacy Policy
</span>
</label>
<input type="submit" id="submitBtn" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">
</form>
OR (not recommended)
document.getElementById("form1").addEventListener("submit",e => {
e.preventDefault()
location = "yourpaymentpage.php";
})
<form id="form1" class="n-chk" style="margin-bottom:1em ;text-align:center;">
<label class="new-control new-checkbox checkbox-primary">
<input type="checkbox" required >
<span class="new-control-indicator"></span>
<span class="text-dark"> I agree to the
Terms of Use &
Privacy Policy
</span>
</label>
<input type="submit" id="submitBtn" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">
</form>
Related
We have an interactive map which connects over PHP to an database.
Since i'm pretty new to javascript i have some question.
We have around 15 text input and one dropdown input.
I only provide the Problematic parts of our code.
HTML
<div class="nav nav-sidebar">
<form action="./action_page.php" method="post">
<ul class="dropdown-item" id="u3">
<div data-toggle="buttons">
<label class ="btn btn-default" style="float:left;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="2"> Trump
</label>
<label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="1"> Hillary
</label>
</div>
</ul>
<button input type="submit" id="submit-button" class="submit-button" value="Submit">Submit</button>
</form>
<button type="button" onclick="test()" class="clear-button">Reset</button>
</div>
JS
function test(){
$('input[name="politic"]').prop('checked', false);
}
How can I disable the Submit button if atleast 1 input is emtpy?
My test() function resets the value of "poltics" but the Button is still selected. How can I fix this?
I would appreciate to not get the working code, more like a guideline how to start on this Problem, or if you want to provide code, I would appreciate some shorts explanation.
I have added example with 3 input fields that will be empty till all of them are filled.. also for radios I have added class removal that was missing,,
hope that helps, cheers
EDIT: try now..
EDIT2: try now :)
function checkallinputs(){
var ch = false;
$('form input[type="text"]').each(function(el){
if( $(this).val() != '' ) ch = true; return false;
});
if( ch ){ $('button[type="submit"]').removeClass('disabled'); return true; }
if(!ch ){ $('button[type="submit"]').addClass('disabled'); return false; }
}
// run this on document.ready or in (function())() self exe block on page
checkallinputs();
$('form input[type="text"]').on( 'change', function(){ checkallinputs(); });
// disable submit
$( 'form' ).on( 'submit', function(){ return checkallinputs(); });
// reset radio ==>remove class
function test(){
$('input[name="politic"]').prop('checked', false);
$('input[name="politic"]').parent().removeClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form action="./action_page.php" method="post">
<div class="form-group">
<label for="input1">Input 1</label>
<input type="text" class="form-control" id="input1">
</div>
<div class="form-group">
<label for="input2">Input 2</label>
<input type="text" class="form-control" id="input2">
</div>
<div class="form-group">
<label for="input3">Input 3</label>
<input type="text" class="form-control" id="input3">
</div>
<div class="checkbox">
<div data-toggle="buttons">
<label class ="btn btn-default" style="float:left1;">
<input type="radio" class="btn btn-default" name="politic" id="politic1" value="2"> Trump
</label>
<label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
<input type="radio" class="btn btn-default" name="politic" id="politic2" value="1"> Hillary
</label>
</div>
</div>
<button type="submit" class="btn btn-default disabled">Submit</button>
<br>
<button type="button" onclick="test()" class="btn btn-default">Reset</button>
</form>
How can I disable the Submit button if atleast 1 input is emtpy?
There are a few ways you can get this done.
Number One:
The easiest way is to add in the required attribute to the field, and the user would not be able to submit the form unless all required field are filled up. This is not the recommended way though as it depends on the browser and I believe there are work arounds for this.
<input type="text" name="username" required>
Number Two:
Another way is to add an onkeyup event handler to all your inputs, which calls a function where you check if all the inputs are filled up. Here, by default, you have your submit button disabled, and when all the inputs are filled, you can enable your submit button. This is not the best way since the user might not know why the button is disabled unless you specifically give a feedback, like making the borders red for invalid fields. Also running the validation after every keyup might be demanding for the application.
Number Three:
The one which I would prefer and recommend is this. You can leave the submit button enabled, and bind it to a click event where you check whether your validation is satisfied, that is, for your case you check if any input is empty and if one is empty, then you don't submit the form and display an alert or give the user a feedback to fill in the field. You might want to set focus to an empty field too.
My test() function resets the value of "poltics" but the Button is
still selected. How can I fix this?
What did you mean by "the button is still selected"? The Reset button? You can set focus to another input of your choice if you want
$(.'input-name').focus();
How can I disable the Submit button if atleast 1 input is emtpy?
You just need to keep trace of the change events of the inputs, like the following. If an input is checked, then you have to re-enable the submit button. If the reset button is used, you need to disable the submit button. This button can be disabled by default.
My test() function resets the value of "poltics" but the Button is still selected. How can I fix this?
As you provided your code, the radio buttons for both politicians successfully deselected.
function test(){
$('input[name="politic"]').prop('checked', false);
$('#submit-button').prop('disabled', true);
}
$('input[type="radio"]').on('change', function () {
// Here we set the button to not disabled if the radio was selected
$('#submit-button').prop('disabled', !$(this).prop('checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav nav-sidebar">
<form action="./action_page.php" method="post">
<ul class="dropdown-item" id="u3">
<div data-toggle="buttons">
<label class ="btn btn-default" style="float:left;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="2"> Trump
</label>
<label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="1"> Hillary
</label>
</div>
</ul>
<button type="submit" id="submit-button" class="submit-button" value="Submit" disabled>Submit</button>
</form>
<button type="button" onclick="test()" class="clear-button">Reset</button>
</div>
I'm using jquery form validation from http://www.runningcoder.org/jqueryvalidation/
demo.html
<form id="form-signup_v1" name="form-signup_v1" method="get" class="validation-form-container">
<div class="field">
<label for="signup_v1-username">First Name</label>
<div class="ui left labeled input">
<input id="first_name" name="first_name" type="text">
<div class="ui corner label">
<i class="asterisk icon">*</i>
</div>
</div>
</div>
<input name="ok" id="ok" type="submit" class="ui blue submit button" value="Ok">
<input name="cancel" id="cancel" type="submit" class="ui blue submit button" value="Cancel">
</form>
<script>
$('#form-signup_v1').validate({
submit: {
settings: {
inputContainer: '.field'
}
}
});
</script>
I'm use form validation in the url not include the value of submit button
demo.html?first_name=John
I try to remove jquery form validation in the url include the value of submit button
demo.html?first_name=John&ok=OK
I want to check submit button when click from query string but when i use validation the url alway not include query string of button like the figure 1
If you want that the query doesn't include the button name just remove the name attribute from <input type = "button" name="ok">. Also assign a value to the button. By default the submit action forms the query string from the name value pairs in the form.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="get">
<input name="first_name" type="text" />
<input type="submit" value="button">
</form>
I will go directly to the problem
So here is my form
<form action="<?php echo base_url()?>" method="post" id="formfield">
<center>
<label>How much? <small>( Minimum of 100 )</small></label>
<div class="ui input">
<input type="number" name="amount" required>
</div>
<br>
<label>Payment type <small>( see all )</small></label>
<br>
<div class="ui input">
<input type="text" name="type" required>
</div>
<br>
<div class="">
<input type="submit" class="btn btn-primary" value="Order Now" id="btnsubmit" >
</div>
</center>
</form>
And here is my Javascript, newbie here.
<script>
$(function()
{
$('#btnsubmit').on('click',function()
{
$(this).val('Please wait ...')
.attr('disabled','disabled');
$('#formfield').submit();
});
});
</script>
So the problem is that the form submit without triggering the html5 validation
I also wanted to add alert if Ok proceed but should trigger the html5 validation
Can anyone help me? I will really appreciate it. Advance thank you.
The form is submitting without triggering the HTML5 validation because you're submitting the form in your JavaScript when you call: $('#formfield').submit();
To add a confirmation dialog, you could use something as simple as confirm, though confirm is not always the best idea. You could add something like this to your event listener:
if (confirm('Are you sure?')) {
// Yes
$(this).val('Please wait ...').attr('disabled','disabled');
} else {
// Prevent form from being submitted
return false;
}
Snippet (doesn't exactly work, because stacksnippets.net doesn't allow forms to be submitted, but check your console)
function go() {
if (confirm('are you sure?'))
// Form would be submitted, but stacksnippets prevents it.
document.querySelector('form').submit();
else
return false;
}
<form action="">
<input type="text" required>
<button onclick="go()">
Submit
</button>
</form>
May be this will help you;
$(document).ready(function() {
$('#formfield').on('submit', function(e) {
$("#btnsubmit").val('Please wait ...')
.attr('disabled', 'disabled');
});
});
<form action="<?php echo base_url()?>" method="post" id="formfield">
<center>
<label>How much? <small>( Minimum of 100 )</small>
</label>
<div class="ui input">
<input type="number" name="amount" required>
</div>
<br>
<label>Payment type <small>( see all )</small>
</label>
<br>
<div class="ui input">
<input type="text" name="type" required>
</div>
<br>
<div class="">
<input type="submit" class="btn btn-primary" value="Order Now" id="btnsubmit">
</div>
</center>
</form>
I have a login form and i know how to submit data for verifying from database using submit button but i want to submit my data using anchor tag and it must be verified using php, what i did is as follows and it's not working :
index.php
<form class="sign-form" action="login_process.php" method="post" id="lg" name="form">
<fieldset>
<div class="row">
<span class="text">
<input type="email" name="email"/>
</span>
<span class="text">
<input type="password" name="pwd"/>
</span>
<input type="submit" value="Go" class="submit" name="submit" />
</div>
<div class="row">
<label for="check-1">Remember me</label>
<input type="checkbox" class="check" id="check-1" />
Forgot your password?
<?php
if(isset($_GET['loginFailed']) && !empty($_GET['loginFailed'])) {
$msg=$_GET['loginFailed'];
echo $msg;
}
?>
</div>
</fieldset>
<div class="action_btns">
<div class="one_half">
<i class="fa fa-angle-double-left"></i> Back
</div>
<div class="one_half last">
login
</div>
</div>
</form>
login_process.php
<?php
include("connection.php");
if(isset($_POST['submit'])) {
$email=$_POST['email'];
$pwd=$_POST['pwd'];
$password=md5($pwd);
$sql="SELECT * FROM `registration` where Email='$email' AND Password='$password'";
$van=mysqli_query($var,$sql);
$count=mysqli_num_rows($van);
if ($count==1) {
echo"hello";
session_start();
$_SESSION['email'] = $email;
header("location: login_success.php");
} else {
header("location:index.php?loginFailed=wrong password or email");
}
mysqli_close($var);
}
?>
The problem is the name of the controls.
Having a control named submit in your form is overriding form.submit();
The error in the browser console is that .submit() is not a function.
So please, just change the name of the submit button with something else and it is working good.
<form class="sign-form" action="login_process.php" method="post" id="lg" name="form">
<fieldset>
<div class="row">
<span class="text">
<input type="email" name="email"/>
</span>
<span class="text">
<input type="password" name="pwd"/>
</span>
<input type="submit" value="Go" name="submit" class="submit" id="btnSubmit" />
</div>
<div class="row">
<label for="check-1">Remember me</label>
<input type="checkbox" class="check" id="check-1" />
Forgot your password?
<?php
if(isset($_GET['loginFailed']) && !empty($_GET['loginFailed'])) {
$msg=$_GET['loginFailed'];
echo $msg;
}
?>
</div>
</fieldset>
<div class="action_btns">
<div class="one_half">
<i class="fa fa-angle-double-left"></i> Back
</div>
<div class="one_half last">
Register
</div>
</div>
</form>
I understand that you want to use an anchor to submit the form instead of a button. Several solutions exists for that, but let me say to you that using an anchor to submit a form requires the use of JavaScript to hook up the event. It's not safe in that if a user has JavaScript disabled, you won't be able to submit the form. It's better if you make a submit button looks like an anchor, like following:
<input type="submit" class="submitAnchor" value="Submit">
With this minimal style declaration:
.submitAnchor {
background-color: transparent;
border: none;
text-decoration: underline;
color: blue;
cursor: pointer;
}
Now, if you do really insist on using an anchor, you can e.g:
1.Event forwarding, activate the button submit event click when the anchor event click is activated:
<form name="form_lg" action="login_process.php" method="post" class="sign-form">
...
<input type="submit" name="submit" value="Go" class="submit">
<a href="#" onclick="form_lg['submit'].click()" class="btn btn_red">
Register
</a>
2.In case you don't want to forward events, you can e.g add a hidden input to store actions, like submit, back, etc. Then, you can catch the action value in the login_process.php file:
<form name="form_lg" action="login_process.php" method="post" class="sign-form">
...
<input type="hidden" name="action" value="" />
<a href="javascript:form_lg.submit()" onclick="form_lg['action'].value='submit'"
class="btn btn_red">Register</a>
In this case, you should change this line in login_process.php file. Instead of:
if(isset($_POST['submit'])){
Do this:
if($_POST['action']=='submit') {
Hope it's helpful!
I am trying to prevent form submission and triggering a span error if certain checkbox is checked. if checkboxes are 3,4 and 6 are selected. Please note that there are two error message one for each checkbox group.
<form action="" method="" role="form" name="form1">
<span id="sprycheckbox1">
<span class="checkbox-error hide">
Your answer contains a wrong selection. Please try again.
</span>
<input type="checkbox" name="checkbox" id="checkbox1">
<label for="checkbox">checkbox1</label><br>
<input type="checkbox" name="checkbox" id="checkbox2">
<label for="checkbox">checkbox2</label><br>
<input type="checkbox" name="checkbox" id="checkbox3">
<label for="checkbox">checkbox3</label><br>
<input type="checkbox" name="checkbox" id="checkbox4">
<label for="checkbox">checkbox4</label><br>
</span>
<span id="sprycheckbox2">
<span class="checkbox-error hide">
Your answer contains a wrong selection. Please try again.
</span>
<input type="checkbox" name="checkbox" id="checkbox5">
<label for="checkbox">checkbox5</label><br>
<input type="checkbox" name="checkbox" id="checkbox6">
<label for="checkbox">checkbox6</label><br>
<input type="checkbox" name="checkbox" id="checkbox7">
<label for="checkbox">checkbox7</label><br>
<input type="checkbox" name="checkbox" id="checkbox8">
<label for="checkbox">checkbox8</label><br>
<input type="checkbox" name="checkbox" id="checkbox9">
<label for="checkbox">checkbox9</label><br>
</span>
<br><br>
<button name="submit" type="submit" class="btn btn-natio general-btn-extra-padding" onclick="validateSubmission()">NEXT</button></form>
function validateSubmission() {
var checkboxSelected = document.getElementById('checkbox6').checked;
if(checkboxSelected) {
$('span.checkbox-error').removeClass('hide');
} else {
$('span.checkbox-error').addClass('hide');
// submit your form here like below
var forms = document.getElementsByName('form1');
forms[0].submit();
}
}
You can use onsubmit event of form that will occur when form is going to submit, simply return false in case anything is wrong.
<button name="submit" type="submit" class="btn btn-natio general-btn-extra-padding" onsubmit="return validateSubmission()">NEXT</button>
function validateSubmission() {
int isValid = false;
// Validation Logic
if(!isValid) {
// Show Error Message
return false;
}
}
Try this
function validateSubmission() {
if($('input[type=checkbox]:checked').length) {
$('span.checkbox-error').removeClass('hide');
alert("Please select at least one to upgrade.");
//stop the form from submitting
return false;
}
else {
$('span.checkbox-error').addClass('hide');
// submit your form here like below
return true;
}
});