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>
Related
I'm using Jquery .submit() function to submit my form using JQuery. But I've some fields marked as required in HTML.
How should I use the .submit() function to check required field before submitting the form?
here is the code
<script>
function submit() {
$("form").submit();
}
function signup() {
alert("You're going to sign up");
}
</script>
<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
<div class="input">
<label for="email">Email:</label>
<input required="" id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required="" type="password" id="password"/>
</div>
<a class="submit" href="JavaScript:submit();">Sign Up</a>
<button type="submit" class="none_display"></button>
</form>
I need to submit my form using a tag because of style changing in some browsers for button and input tags.
First off, it's slightly strange that you have a submit() method that you inline call, that turns around and submits the form, that then executes its inline signup() method that then actually does work. Just call the signup instead of the submit().
But for your actual question.
$(':input[required]').filter(function(){ return !this.value.trim() })
This command will find all inputs that have a required property that do not have a value. If you find any, don't do your ajax.
The below example has refactored the logic a bit, so that the submit button is actually showing, but is styled to look like a link.
$('form').on('submit', function(e){
e.preventDefault();
var blankRequiredFieldsExist = $(e.target).find(':input[required]').filter(function(){
return !this.value.trim();
}).length;
if (!blankRequiredFieldsExist) {
alert("You're going to sign up");
}
});
.buttonAsLink {
border: 0;
background-color: inherit;
padding: 0;
font-family: inherit;
font-size: inherit;
color: blue;
text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<div class="input">
<label for="email">Email:</label>
<input required id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required type="password" id="password"/>
</div>
<button type="submit" class="buttonAsLink">Sign Up</button>
</form>
You have a few unnecessary things going on.
You don't need action="JavaScript:void(0);" on the form.
Remove <a class="submit" href="JavaScript:submit();">Sign Up</a>
function signup() {
alert("You're going to sign up");
}
<form onsubmit="signup()">
<div class="input">
<label for="email">Email:</label>
<input required="" id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required="" type="password" id="password"/>
</div>
<button type="submit" class="none_display">Sign up</button>
</form>
you can make submit button and set display: none; for that.
then write some function in jquery to click on your submit button when user click on your anchor link
<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
<input type="text" required="yes" />
<input type="submit" style="display: none;" id="mysubmit" />
<a href="JavaScript:void(0);" onclick='$("#mysubmit").click();'>Submit</a>
</form>
I currently have a code, that is loaded dynamicly, so I can not tweak it much.
But now I want to trigger the submit when clicking the entire <form>.
How can I achive that?
My current code:
<form action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<input type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
Okay man, i will answer this, but on the next time you need to post your javascript code.
This is your markup:
<!-- add a id here -->
<form id="form" action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<!-- add a id here -->
<input id="submit" type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
With your markup set now is time for the JS:
<script type="text/javascript">
//call a anonymous function
$(document).ready(function(){
//Event On click of the form
$('#form').click(function(){
$('#submit').trigger('click');
})
})
</script>
Obs: submit the form on click in his body dont makes sense to me, please explain this.
Edit:
You can learn basic JS and JQuery on www.codecademy.com
I'm having problems simulating a click via javascript on a mailchimp pop-up subscribe form and i need your help.
<!-- Title & Description - Holds HTML from CK editor -->
<div class="content__titleDescription" data-dojo-attach-point="descriptionContainer"><strong>Unlock the content </strong>by subscribing to our page.</div>
<!-- Form Fields -->
<form action="//mc.us7.list-manage.com/subscribe/form-post?u=bcd9828fa83ea7a231ffbee26&id=1928481ac4" accept-charset="UTF-8" method="post" enctype="multipart/form-data" data-dojo-attach-point="formNode" novalidate="">
<div class="content__formFields" data-dojo-attach-point="formFieldsContainer">
<div class="field-wrapper" id="uniqName_3_0" widgetid="uniqName_3_0">
<label for="mc-EMAIL">Email Address</label>
<input type="text" name="EMAIL" value="" id="mc-EMAIL" class="invalid">
<div class="invalid-error" style="display: block;">This field is required.</div>
</div>
<div class="field-wrapper" id="uniqName_3_1" widgetid="uniqName_3_1">
<label for="mc-FNAME">First Name</label>
<input type="text" name="FNAME" value="" id="mc-FNAME" class="valid">
<div class="invalid-error" style="display: none;"></div>
</div>
<div style="position:absolute;left:-5000px;">
<input type="text" name="b_bcd9828fa83ea7a231ffbee26_1928481ac4" tabindex="-1" value="">
</div>
</div>
<div class="content__button">
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
</div>
</form>
<!-- Footer - Holds HTML from CK editor -->
<div class="content__footer" data-dojo-attach-point="footerContainer"></div>
</div>
<div class="modalContent__image" data-dojo-attach-point="formImageContainer"></div>
The code that i'm trying to target is:
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
It's the submit button "Subscribe" that you can also see in
http://www.aspeagro.com/EN_Program_Abricot.html
Thank you!
How about this? I think is should do what you're after?
HTML
<input id="submit-button" class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
JS
$('#submit-button').on('click', function(e){
e.preventDefault();
// Do what you want to do
});
set id="btn" attribute to your submitting button and using jQuery you can trigger click with $("#btn").click(); call
If your aim is to submit the form, then don't bother sending a click event, but use the form's submit method:
var form = document.getElementById('uniqName_3_0').parentNode.parentNode;
form.submit();
The code is of course easier if you give the form an id attribute:
<form id="myform" ...
and then:
document.getElementById('myform').submit();
That button is inside an iframe. To access it from the parent page you would trigger it like this:
$('iframe').contents().find('input:submit').click()
i want to show a login form when a click is done on a link . i want to make default behaviour of div "hide ".. how can i do that ? may form is by default showing on page., please help me . it will b grate ful for you .
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
javascript:
$(document).ready (function() {
$('.signin').click(function() {
$('.form').show();
return false;
});
});
Add style to the "form" to hide it.
<div style="display:none;" class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
Set display property of form class to none as shown belo in using css.
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
css:
.form{
display:none;
}
javascript:
$(document).ready (function()
{
$('.signin').click(function()
{
$('.form').show();
$('.signin').hide();
});
});
i'm having a bit of a problem with my jquery code..i have two forms in my page..one displays when the user loads the page and the other is hidden(set to style="display:none;"). I want to fill out all the details in the first form and on clicking next, display the hidden form..problem is, the hidden form gets displayed on clicking the 'next' button even when the first form has no input..so i'm guessing i'm doing something wrong with the jquery validation code(i'm using the jQuery Validation plugin)..any help would be appreciated.thanks in advance
Here's how my code looks like:
The DETAILS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<body>
<div class="item item1">
<form action="index.html" method="get" id = "form1">
<h1>The DETAILS</h1>
<p align="justify">Try our FREE landlord cost calculator and<br>
discover the real cost of letting your property. <br>
<input name="name" type="text" placeholder="your name"class="required" />
<br>
<input name="email" type="text" placeholder="your email" class="required" />
<br>
<input name="phone" id="phone" type="text" placeholder="your phone no" class="required" />
<br>
<input name="postcode" id="postcode" type="text" placeholder="postcode of property to let" class="required" />
<br>
<select name="bedrooms" id="bedrooms" placeholder="bedrooms" class="required" >
<option value="1">1</option>
<option value="2" >2</option>
<option value='' disabled selected="selected">Please Choose</option>
</select>
<br>
<input name="hearAbout" type="text" placeholder="where did your hear about us?" class="required" />
<br>
<button class="submit button1 " id = "next" name="submit" type="submit" value="next"><span class="next ">></span>next</button>
</p>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").validate();
});
</script>
<script>
$("#form1").submit(function() {
/* AJAX calls and insertion into #form2 */
$("#form2").show();
return false;
});
</script>
<div class="item item2">
<form action="calculation.php" method="post" id = "form2"style="display:none;">
<h1>The Income</h1>
<label> Estimated monthly rent:£ </label> <input name="rent" id="rent" type="text" /><hr>
THE COSTS STEP 3 <hr>
Agents Commission: <select name="commission" id="commission">
<option value="10%">10%</option>
<option value="12%" selected="selected">12%</option>
</select> <hr>
Estimated Setup Fees:£ <input id="fees" name="fees" type="text" /><hr>
How many weeks in the year do you estimate <br>that your property will<br> be vacant/empty?<input name="weeks" type="text" /><hr>
<button class="submit button2" name="submit" type="submit" value="calculate"><span class="next">></span>calculate</button>
</form>
</div>
your submit action should validate on submitting the first form and then show other form. Please try below code.
<script>
$(document).ready(function(){
$("#form1").submit(function() {
$("#form1").validate();
/* AJAX calls and insertion into #productionForm */
$("#form2").show();
return false;
});
});
</script>
Try using jQuery Form Plugin: http://malsup.com/jquery/form/
Put this in the section:
<script src="http://malsup.github.com/jquery.form.js"></script>
and then modify your script with ajaxForm:
<script>
$("#form1").ajaxForm(function() {
/* AJAX calls and insertion into #productionForm */
$("#form2").show();
return false;
});
</script>
Here's what I am talking about on my comment Harun Thuo :
$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
},
submitHandler: function(form) {
// do other things for a valid form
form.submit();
$("#form2").show();
return false;
});
}
});
You can do the submission here. Read the documentation. You can also control the error placement.
http://jqueryvalidation.org/validate