I am working on a project with bootstrap modal. All I want is to show one of my modal when a form fill all the fields and press "Complete Subscription" button.
<form id="my_form">
<input type="text" name="fname" placeholder="First Name" required>
<input type="text" name="lname" placeholder="Last name" required>
<input type="text" name="company" placeholder="Company">
<input type="text" name="email" placeholder="E-mail" required>
<input class="pull-right" type="submit" name="submit" value="Complete Subscription">
</form>
I have tried this code. but it's not working.
$('#my_form').submit(function () {
$('#wellcome-modal').modal('show');
});
return false from the anonymous function to prevent the page from reloading, or call the preventDefault method on the event object it receives.
$('#my_form').submit(function (e) {
e.preventDefault();
$('#wellcome-modal').modal('show');
});
This assumes you're using Ajax to post the form.
Related
I have a custom HTML form that is connected to a google form. When the user submits the form the page redirects to forms.google.com "Your response has been recorded" page. How can I prevent the user from being redirected out of my site and instead give them a custom pop up saying the form was submitted. preventDefault and stopImmediatePropagation have not worked.
<div>
<form action="https://docs.google.com/forms/u/...." target="_self" method="POST">
<label class="formLabel" for="name">Name</label>
<input class="inputValues" type="text" id="name" name="entry.1059844657" placeholder="Name"><br>
<label class="formLabel" for="email">Email</label>
<input class="inputValues" type="email" id="email" name="entry.2048065676" placeholder="abc#client.com"><br>
<label class="formLabel" for="phone">Phone</label>
<input class="inputValues" type="tel" id="phone" name="entry.1330942399" placeholder="111-222-3333"><br>
<label class="formLabel" for="Email">Comments</label>
<textarea class="inputValues" id="email" name="entry.2052823483" placeholder="Email"></textarea><br>
<button class="submit" type="submit" value="submit">Submit</button>
</form>
document.querySelector(".submit").addEventListener("submit", function (e) {
e.preventDefault();
e.stopImmediatePropagation();
});
[![Google submission page][1]][1]
Please I have these two forms below. The first is the form that submit it's data to my database after my customer buys my product and were redirected to the registration page where the form is, while the second form is the form that submit it's data to my getresponse autoresponder campaign.
Now only the first form is what I wanted to be visible, I don't want the second form to be visible and I want to use one button to submit the two forms at one time, please how will I do that?
Thanks!
<!--====================================================================
Form that submit to my database and register my customers after purchase
======================================================================-->
<form class="form-horizontal templatemo-contact-form-1" role="form" action="sold.php" method="post">
<input type="text" class="form-control" id="name" placeholder="Enter Your First Name Here..." name="fname" required><br>
<input type="text" name="lname" class="form-control" id="name" placeholder="Enter Your Last Name Here..." required><br>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email Here..." required><br>
<input type="text" name="phone" class="form-control" id="name" placeholder="Enter Your Phone Number Here..." required><br>
<input type="password" name="pword" class="form-control" id="website" placeholder="Enter Your Password Here..." required><br>
<input type="password" name="cpword" class="form-control" id="subject" placeholder="Re-enter Your Password Here..." required><br>
<input type="text" name="addrss" class="form-control" id="name" placeholder="Enter Your Address Here..." required><br>
<input type="submit" value="Register" class="btn btn-success pull-right">
</form>
<!--======================================================
Form that submit to my getresponse autoresponder campaign
========================================================-->
<form action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post">
<input type="text" name="name" value="Enter your name here..." type=text style="width: 100%">
<input type="text" name="email" value="Enter your email here..." type=text style="width: 100%">
<!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
<input type="hidden" name="campaign_token" value="ljqOk" />
<!-- Thank you page (optional) -->
<input type="hidden" name="thankyou_url" value="https://www.moneycreativesecret.com/spages/smf-sp1/"/>
<!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
<input type="hidden" name="start_day" value="0" />
<!-- Forward form data to your page (optional) -->
<input type="hidden" name="forward_data" value="post" />
<input type="submit" value="100% Free Access" class="btn btn-success pull-right">
</form>
Iam working on login page of my website. Using same login page the users and admin can login to website I have given two options(checkbox) based on than the form action should cange but it is not woking properly.
The form is This
<form method="post" id="loginForm">
Username <input placeholder="email" class="form-control" name="email" id="email" type="text" required="">
Password <input placeholder="Password" id="password" class="form-control" name="password" type="password">
<input type="checkbox" id="user" checked="checked"> User
<input type="checkbox" id="adminAction"> Admin
forgot password?
<input type="submit" value="Log In">
Register Now
</form>
And this is the jquery code
<script>
if($('#adminAction').is(':checked')){
$('#loginForm').attr('action','/adminLogin');
}
else{
$('#loginForm').attr('action','/userLogin');
}
</script>
As Dante mentioned, it's probably not a great idea to toggle between form actions on the client side. But all that aside, I think your issue is that you didn't put $(document).ready in your script. Furthermore, you should probably set an initial action in your form of action='/userLogin' since there's no action when the page initially loads, and there's no trigger in your code to change anything when the checkbox gets changed. Try something like this:
<form method="post" id="loginForm">
Username <input action='/userLogin' placeholder="email" class="form-control" name="email" id="email" type="text" required="">
Password <input placeholder="Password" id="password" class="form-control" name="password" type="password">
<input type="checkbox" id="user" checked="checked"> User
<input type="checkbox" id="adminAction"> Admin
forgot password?
<input type="submit" value="Log In">
Register Now
</form>
<script>
$(document).ready(function(){
$('#adminAction').change(function(){
var checked = $('#adminAction').is(':checked');
if(checked){
$('#loginForm').attr('action','/adminLogin');
}
else{
$('#loginForm').attr('action','/userLogin');
}
})
});
</script>
I've been struggling with this one for some time. I have this code:
<h2 id="registerH2">Subscribe to the cake club.<br>
Please fill out the form. (* means required)</h2>
<div id="subscribeBox">
<form class="subscribeForm" name="Subscription Form"><br>
<input Name="First Name" type="text" required id="fname" placeholder="First Name*"><br><br>
<input id="lname" type="text" placeholder="Last Name*" name="Last Name" required><br><br>
<input id="email" type="email" placeholder="Email*" name="Email" required><br><br>
<input id="address" type="text" placeholder="Address (optional)" name="Address"><br><br>
<input id="submit" type="submit" value="Send" onclick="href=registered.html">
</form>
</div>
So what I want to do is when I click the "send" button in my website, to direct me to another html file I have. Right now it's not working with this code.
(This is for my assignment I'm not working on a cake club :D)
What your want is a action="registered.html" attribute in your form
In any form when you hit a submit type input
<form action="registered.html"> [...] </form> is triggered
read more on w3school
https://www.w3schools.com/tags/att_form_action.asp
Cheers.
i just added a single quote:
<input id="submit" type="submit" value="Send" onclick="window.location.href='registered.html'">
You can use anchor tag for that, if redirection is the only purpose.
<a href="register.html">
<button>Send</button>
</a>
Try to correct your html:
<input id="submit" type="submit" value="Send" onclick="window.location.href=registered.html">
Though I think you should do it in the form tag, no need to use javascript here
<form action='registered.php' method='post'>
There are two fields username and password and I used validate[required] class.
<input id="username" name="username" class="validate[required] text-input" placeholder="Enter your username" type="text">
<input id="password" name="password" class="validate[required] text-input" placeholder="Enter your password" type="password">
jQuery("#loginForm").validationEngine('attach', {
promptPosition: "topRight",
scroll: false
});
Now when I click on the submit button it shows its standard messages, but I want to show my custom messages. What is the best way to do this?
Not sure why it wasn't working for you. Here is a working example.
Javascript
$("#formID2").validationEngine({'custom_error_messages' : {
'#text1' : {
'required': {
'message': "Why you no give name?"
}
}
}
});
HTML
<form id="formID2">
<label for="text1">Please enter your name:</label>
<input type="text" class="validate[required]" id="text1" />
</form>
https://jsfiddle.net/pt4tjdtd/