Develop Reference

Disable submit button once the user submits the form

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/

Hijacking from submit to redirect page (Javascript)

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>

Parsley.js strange behavior

I am building a registration form using parsley and I found that this code works:
<form data-validate="parsley" id="registration_form" action="register.php" method="POST">
<label>Full name:</label>
<input type="text" id="full_name" name="full_name" placeholder="FirstName LastName" data-required="true" data-trigger="keyup"
data-regexp="^[A-Za-z ]+$" autofocus="autofocus">
<label>Email address:</label>
<input type="email" id="email_addr" name="email_addr" data-required="true" data-type="email" data-trigger="keyup">
But when I put it into table, even a small part of it, it fails to work.
<table>
<tr><td>
<form data-validate="parsley" id="registration_form" action="register.php" method="POST">
<label>Full name:</label>
<input type="text" id="full_name" name="full_name" placeholder="FirstName LastName" data-required="true" data-trigger="keyup"
data-regexp="^[A-Za-z ]+$" autofocus="autofocus">
</td></tr></table>
No errors from browser.
But what I find out is that if I am doing:
<form data-validate="parsley" id="registration_form" action="register.php" method="POST">
before <table>, it work. However if I insert it (<form ...>) inside <td></td>, it fails.
As far as I know <form> tag is opened until </form> tag is given or until the end of document.
Is it terminated asap parent tag is terminated?
Can you explain what is my error?

Error messages on contact form

Right now, I'm validating a contact form using java/ajax, and am generating the error messages in javascript with the following
messages:
{
fname: "Please fill in your name",
email: "Your email will help us contact you",
subject: "Please fill in the subject of your message",
recipient: "Please let us know who you would like to contact",
message: "Please fill out your message",
captcha: "Please answer 2x3"
}
which generates
<label class="error">The error message for this id</label>.
I'm not really sure how a label is generated, but I'm wanted to just replace the empty text inputs with the value of the error message when it's not filled out.
I've tried using
fname.value = "the error message";
but that doesn't seem to work. Any ideas on how to get the error message to show up within the input instead of generating a label?
Form markup:
<form name="myform" id="myform" action="" method="post">
<fieldset>
<label for="fname" id="name_label">First Name</label>
<input type="text" name="fname" id="fname" value="">
<label for="lname" id="lname_label">Last Name</label>
<input type="text" name="lname" id="lname" value="">
</fieldset>
<fieldset>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" value="">
<label for="phone" id="phone_label">Phone Number</label>
<input type="phone" name="phone" id="phone" value="">
</fieldset>
<fieldset>
<label for="message" id="message_label">Message</label>
<textarea name="message" id="message" size="30" value=""></textarea>
<label for="captcha" id="captcha_label">What's 2x3?</label>
<input type="text" name="captcha" id="captcha" value="">
</fieldset><
input type="submit" name="submit" value="Submit">
</form>
<p>
<img src="%3C?php%20echo%20get_template_directory_uri();%20?%3E/images/loader.gif" id="loading" alt="Loader" name="loading">
</p>
<div id="results"></div>

Use the following JS:
document.myform.fname.value = messages_parent_obj.messages.fname;
I've put together a jsFiddle here: http://jsfiddle.net/dWYWe/ (note that I wrapped messages in a parent object since your snippet implied there was one).

TinyBox how get passing value from parent pages

Recently I have faced a problem which do not know how to pass value from parent page to a tinybox. The following is my source code; is there any idea can help me to achieve this? A edit.php wrap inside a tinybox so when I click on a specific column suppose the value should pass to the edit.php (tinybox) and also the value will display on the textfield, but it just simply doesn't work. I am new in PHP would appreciate for some one pointing me to good solution.
parent page.php
display_cell6.appendChild(edit).innerHTML='<img id="edit" alt="Edit" class="'+obj[idx].id+'" onclick="TINY.box.show({iframe:\'ajaxEditUserDetail.php\',boxid:\'frameless\',width:400,height:280,openjs:function(){openJS(this.id)}}); title="Edit" src="images/edit.png"></img>';
function openJS(id){
var id=parent.document.getElementById(id);
alert(id);
}
edit.php
<div id="banner">
<span>Edit Customer Information</span>
</div>
<div id="form_container">
<fieldset>
<div class="box-form">
<form action="send.php" method="POST" id="userDetail" >
<fieldset>
<div>
<label for="name_Req">Name <strong>*</strong></label>
<input type="text" id="name_Req" name="name" value="test"
title="Required! Please enter your name" />
</div>
<div>
<label for="contact_Req_Email">E-mail <strong>*</strong></label>
<input type="text" id="contact_Req_Email" name="email"
title="Required! Please enter a valid email address" />
</div>
<div>
<label for="telephone_Tel">Telephone</label>
<input type="text" id="telephone_Tel" name="telephone"
title="Please enter a valid telephone number" />
</div>
<div>
<label for="address">Address</label>
<input type="text" id="address" name="address" title="Please enter a
valid address" />
</div>
<div>
<input type="submit" value="Save" id="sub" class="button" />
</div>
</fieldset>
</form>
</div>
</fieldset>
</div>