I am using the PHP & MySQL to submit a form with following code and using isset function in PHP to submit the value to database.
<div class="display">
<form action="" method="POST">
<div>
<input type="text" name="name" placeholder="Your Name" required="required">
</div>
<div>
<input type="text" name="phone" id="phone" placeholder="Mobile" required="required" onblur="check();">
<br/>
<span id="e_mobile"></span>
<?php if(isset($_GET["r"])){ ?><p>Invalid number; must be ten digits. Please submit your query again</p><?php } ?>
</div>
<div>
<input type="text" name="landline" id="landline" placeholder="Alternate Number" required="required" onblur="check1();">
<br/>
<span id="e_landline"></span>
</div>
<div>
<input type="email" name="email" placeholder="Email" required="required">
</div>
<div>
<input type="text" name="address" placeholder="Your Address" required="required">
</div>
<div>
<input type="hidden" value="0" name="salesid"/>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</div>
Now I want once the user click submit button once the button should freeze; as of now if the user clicks the submit button more than once(by intentionally or by mistake) the same information is getting submitted in the database more than once.
What to do in this circumstance?
Try with JQuery:
First add an ID to your form
<form action="" method="POST" id="form">
After that add script:
<script type="text/javascript">
$(document).ready(function() {
$("#form").submit(function(e){
$("input[type='submit']").attr("disabled","disabled");
});
});
</script>
You can add PHP Captcha to prevent user click again.
Please review below two urls which includes demo too.
http://www.w3schools.in/php/captcha/
http://99webtools.com/blog/php-simple-captcha-script/
Related
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>
Form1 has the action to link to an external .aspx file. But once I added Form2 and the javascript file, contact-us/js/app.js, to the page. The javascript now controlls both form submit buttons. How do I link the javascript file to only run when Form2 button is submitted?
Form1
<div id="guestLogin">
<form id="frmguestlogin" name="frmguestlogin" method="post" action="AutoLogin.aspx" >
<input type="hidden" name="username" class="text" id="username" onfocus="this.value='';" tabindex="30" value="guest" />
<input type="hidden" name="password" class="text" id="password" onfocus="this.value='';" tabindex="40" value="guest" />
<input type="submit" width="80" height="20" border="0" name="submit" id="submit" value="Guest Login" tabindex="50" />
</form>
</div>
Form2 code. The last script is controlling both submit buttons on the page. How do I only have it control Form2 submit button?
Form2
<div id="form-wrapper">
<div class="inner cover">
<form class="form-signin" id="form-signin" >
<h4 class="sendMsg">Send us a message</h4>
<input type="text" id="first" class="form-control" placeholder="First Name" required>
<input type="text" id="last" class="form-control" placeholder="Last Name" required >
<input type="text" id="company" class="form-control" placeholder="Company" required >
<input type="text" id="phone" class="form-control" placeholder="Phone" required >
<input type="email" id="email" class="form-control" placeholder="Email" required >
<p> Tell us how we can help you</p>
<textarea id="comments" style="font-family: Arial, Helvetica, sans-serif" class="form-control" cols="45" rows="5" required ></textarea>
<button class="btn btn-lg btn-primary btn-block" type="submit">Send Your Message</button>
<input id="subject" name="subject" type="hidden" value="Contact Us" />
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="contact-us/js/bootstrap.min.js"></script>
<script src="contact-us/js/ie10-viewport-bug-workaround.js"></script>
<script src="contact-us/js/app.js"></script>
app.js code to control form2 only:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
//Submit Form
var first = $("input#first").val();
var last = $("input#last").val();
var company = $("input#company").val();
var phone = $("input#phone").val();
var email = $("input#email").val();
var comments = $("textarea#comments").val();
var subject = $("input#subject").val();
$.ajax({
type: "POST",
url: "contact-us.asp",
data: { first : first,
last : last,
company : company,
phone : phone,
email : email,
comments : comments,
subject : subject },
cache : false,
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
success: function() {
$('.form-signin').hide();
$('.cover').fadeIn('slow').html('<h2>Thank You, '+first+' '+last+'</h2>');
}
});
});
});
To route it with a certain script (without a form submit) I would use a normal button type.
<input type="button" value="Submit" onclick="myFunction()">
The onclick calls the JavaScript function that contains what you want it to do.
Edited - Added notes:
Also this calls just a form in general
$("form").submit
It doesn't specify what form it is, use an ID to find the 2nd form
Code:
$(document).ready(function(){
$("#form2").submit(function(){
alert("Submitted");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Form 1</h1>
Form one goes to aspx.
<form action="AutoLogin.aspx">
First name: <input type="text" name="FirstName"><br>
Last name: <input type="text" name="LastName"><br>
<input type="submit" value="Submit">
</form>
<h1>Form 2</h1>
Form two goes to the JQuery based off of the form ID (this works with external files as well)
<form id="form2">
First name: <input type="text" name="FirstName"><br>
Last name: <input type="text" name="LastName"><br>
<input type="submit" value="Submit">
</form>
I've multiple forms in my html based web page. I have a 'Submit' button on each of the form. Whenever I fill a form and click on it's submit button, I want to know which form was submitted. Means, upon pressing a submit button I want to know the details of the associated form (all forms have the similar button).
Stuff like getting the entire form object or id or name of the submitted form will also work.
My JQuery code is :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$( "form" ).submit(function () {
var val = $("input[type=submit][clicked=true]").val();
(1) console.log(val);
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
</script>
My html code containing the forms is:
<!-- This is form number 1 -->
<form align="center" class="nav nav-list" id="myFormCS" method="POST" action="#" > <!-- <- I want this info -->
<p> <input type="hidden" name="productid" value="4"> </p>
<p> <input type="hidden" name="version" value="1"> </p>
<p> <input id="field_email" type="email" placeholder="Enter email address" name="eml1" required></p>
<p> <input id="field_pwd1" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Enter password" name="pwd1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Free"> **<-- (1) is getting me this info**
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
<!-- This is form number 2 -->
<form align="center" class="nav nav-list" id="myFormGE" method="POST" action="#" >
<p> <input type="hidden" name="productid" value="14"> </p>
<p> <input type="hidden" name="version" value="1"> </p>
<p> <input id="field_username" type="text" placeholder="Enter user name" name="usrnm" required></p>
<p> <input id="field_pwd1" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Enter password" name="pwd1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Register">
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
<!-- This is form number 3 -->
<form align="center" class="nav nav-list" id="myFormVI" method="POST" action="#" >
<p> <input type="hidden" name="productid" value="7"> </p>
<p> <input type="hidden" name="version" value="2"> </p>
<p> <input id="field_city" type="text" placeholder="Enter city name" name="city1" required></p>
<p> <input id="field_phone" type="text" placeholder="Enter phone number" name="phn1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Buy now">
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
Something like this?
$("form input[type=submit]").click(function() {
var frmID = $(this).closest('form').attr('id');
alert(frmID);
});
jsFiddle
You can use a submit listener for the form and get the object. Something like this:
$("form").submit(function (e) {
e.preventDefault();
var form = $(this);
console.log(form);
});
That form object is what I think you are looking for.
So we're using an online service to handle webinars on our site.
I have full control of the HTML for the registration page but don't have control of the PHP file used in the registration. Currently, the registration form looks like this:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
This submits the values from the form to "notify.php". notify.php apparently has code to force the iframe this code is hosted inside of, to redirect to another page. I don't want this to happen.
I want the form to submit, but then I want to send the user to my own ThankYou page. I'm thinking that the best way to do this is by "hijacking" the submission and sending them to the page I want.
I thought that maybe calling a custom javascript function using onsubmit might work. Here's what I have right now:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST" onsubmit="return doRedirect();">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
<script language="javascript" type="text/javascript">
function doRedirect()
{
window.location.replace("http://stackoverflow.com");
return true;
}
</script>
For some reason it's not working though. The iframe continues to redirect to the page I don't want, and the window itself isn't being redirected.
Am I doing this right or is there a better way of achieving this?
Thank you in advance for your help!
Jason
UPDATE: I've confirmed that the javascript is never executing. I added: window.alert("JAVASCRIPT EXECUTED"); and the pop-up never happens so this appears to be an issue with onSubmit rather than the javascript itself. Why won't the javascript execute in onSubmit? I tried changing it to onSubmit="JavaScript:doRedirect();" and that didn't work either.
This should do the trick:
<input type="submit" name="go" onclick="doRedirect();" value="Sign Up for Webinar!" />
If you are looking to completely remove the interaction with the php form, remove the action from the <form> tag
<form accept-charset="UTF-8" name="regform" id="regform" class="infusion-form" method="POST">
If you are willing to try AJAX:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
jQuery(function($) {
$('#regform').submit( function(e){
$.ajax({
type: 'post',
data: $(this).serialize(),
url: $(this).attr("action")
})
.done(function (data){
$(location).attr('href', 'http://stackoverflow.com');
});
e.preventDefault();
});
});
</script>
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
I have two forms I need to send - the first form is a PHP mailer that takes the info from a bunch of fields and mails it to a recipent. That form has a checkbox and if checked I need the email from that for to be sent via ANOTHER form to a list server adding them to mailing list. I need all this to happen when clicking the submit button from the first form. Can anyone help me with a solution. Thanks.
Form
<form class="form_1" method="post" enctype="multipart/form-data" onSubmit="return validate()">
<div class="field">
<div class="text2">
<input type="text" id="name" value="<?php echo $_POST['name'];?>" name="name" title="Name" />
</div>
<!--text2-->
<div class="req">*</div>
<!--req-->
</div>
<!--field-->
<div class="field field_right">
<div class="text2">
<input type="text" id="email" name="email" value="<?php echo $_POST['email'];?>" title="Email" />
</div>
<!--text2-->
<div class="req">*</div>
<!--req-->
</div>
Sign-up for newsletter
Upload Resume:
<div class="clearer"></div>
<br />
<div class="field">
<input type="submit" value="Send" class="btn3" />
</div>
<!--field-->
</form>
Form 2
<form action="http://www.example.com/mailing_list.html" method="post" name="xxxxxxx" onSubmit="return (!(UPTvalidateform(document.UPTmxxxxxx)));">
<input type="hidden" name="submitaction" value="3">
<input type="hidden" name="mlid" value="xxxxxx">
<input type="hidden" name="siteid" value="xxxxxx">
<input type="hidden" name="tagtype" value="q2">
<input type="hidden" name="demographics" value="-1">
<input type="hidden" name="redirection" value="http://www.xxxx.com/thankyou.php">
<input type="hidden" name="uredirection" value="http://">
<input type="hidden" name="welcome" value="">
<input type="hidden" name="double_optin" value="">
<input type="hidden" name="append" value="">
<input type="hidden" name="update" value="on">
<input type="hidden" name="activity" value="submit">
<tr><td colspan="2"></td></tr><tr><td> </td><td> <div class="text1"><input type="text" name="email" id="email" />
</div></td></tr><tr><td colspan="2"><button type="submit" name="send" value="send" class="button1"></button></td></tr>
On your form, have the button tie back to a javascript event
<input type = 'button' value='Submit!' onclick='submitForms()' />
Then have that javascript function, submitForms, actually submit both of your forms.
document.forms["form1"].submit();
document.forms["form2"].submit();
You will probably need to do the second submission using PHPs curl wrapper so that you only have one form for the user to fill in. Is there any reason you must have two forms?
So it would work like this:
User submits form
Code sends first email
If checkbox checked then submit curl request to second form
Complete
A recent SO answers contains a simple intro to the curl post request process: How to issue HTTP POST request?