Jquery does not work on the Internet explorer . However it runs on other webbrowsers .
The code which I wrote is
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
},
submitHandler: function(form)
{
$.post('process.php', $("#myform").serialize(), function(data)
{
$('#results').html(data);
});
}
});
});
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
<input type="submit" name="submit" value="Submit">
</form>
<div id="results"><div>
</body>
</html>
process.php
<?php
print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
?>
How do I run this code on INTERNET EXPLORER .Any help is very much appreciated on this
Remove ',' after this line
email: "A valid email will help us get in touch with you.",
should be
email: "A valid email will help us get in touch with you."
In your messages block it is like this
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.", // <<<< HERE REMOVE IT
},
you need to remove ',' (comma) in the last line no need for it.
Try the below code:-
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
},
submitHandler: function(form)
{
$.post('process.php', $("#myform").serialize(), function(data)
{
$('#results').html(data);
});
return false;
}
});
});
</script>
I tried to execute your code at my end. Please add doctype at the top. I used the same and it worked while it was not working earlier.
<!DOCTYPE html>
thanks
You should add return false to submitHandler.
Or you can convert your submit input to a button that doesn't submit the form using <button>Submit</button>.
Related
I am a bit of a noob with jQuery and am learning for Uni.
I am working on a HTML web site with an associated HTML mobile application that I will compile in phonegap build.
I have a HTML form that I want to include on both the site and the app which I have coded and is successfully validating with jQuery. I would also like to post the form data with jQuery but am struggling to find how best to achieve this.
My form looks like this
<form action="http://myaddress.com/process.php" method="post" name="jform" id="jform">
<div>
<label for="name"><b>Name:</b></label><br>
<input type="text" name="name" id="name">
</div>
<div>
<label for="dob"><b>Date of Birth:</b></label><br>
<input type="text" name="dob" id="dob">
</div>
<div>
<label for="visit"><b>Date of Visit:</b></label><br>
<input type="text" name="visit" id="visit">
</div>
<div class="labelBlock">
<b>Favourite Exhibit:</b>
<div class="indent">
<input type="radio" name="fave" id="exhibit1" value="Exhibit1">
<label for="exhibit1">Exhibit 1</label><br>
<input type="radio" name="fave" id="exhibit2" value="Exhibit2">
<label for="exhibit2">Exhibit 2</label><br>
<input type="radio" name="fave" id="exhibit3" value="Exhibit3">
<label for="exhibit3">Exhibit 3</label>
</div>
</div>
<div>
<label for="comment"><b>Comments:</b></label><br>
<textarea name="comment" id="comment" rows="10" cols="40" draggable="false"></textarea>
</div>
<div id="center-button">
<input name="submit" type="submit" id="submit" value="Submit" class="center-text">
</div>
</form>
My validation script looks like this:
<script>
$(document).ready(function() {
$('#jform').validate({
rules: {
name: "required",
dob: "required",
visit: "required",
fave: "required",
comment: "required"
}, //end rules
messages: {
name: {
required: "Please tell us your name"
},
dob: {
required: 'Please select your Date of Birth'
},
visit: {
required: 'Please select the date you visited'
},
fave: {
required: 'Please select your favourite exhibit'
},
comment: {
required: 'Please tell us about your visit'
}
},//end messages
errorPlacement: function(error, element) {
if ( element.is(":radio") ) {
error.appendTo( element.parent());
} else {
error.insertAfter(element);
}
}
}); // end validate
submitHandler: function(form) { //This is the submit handler.
var name = $('#name').val();
var dob = $('#dob').val();
var visit = $('#visit').val();
var fave = $("input[name='fave']:radio:checked").val();
var comment = $('#comment').val();
$.ajax({
type: 'POST',
url: 'process-post.php',
data: {name:name, dob:dob, visit:visit, fave:fave, comment:comment},
success: function(data1){
if (data1 == 'success') {
window.location.href = 'index.html';
}
else {
alert('Oops! It looks like something has gone wrong. Please try again.');
}
}
});
}}); // end ready
I really am struggling with this so would appreciate any help.
My PHP Looks like this
<?php # PROCESS JOURNAL ENTRY.
# Check form submitted.
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
# Open database connection.
require ( '../connect_db.php' ) ;
# Execute inserting into 'forum' database table.
$q = "INSERT INTO journal(name,dob,visit,fave,comment,date)
VALUES ('{$_POST[name]}','{$_POST[dob]}','{$_POST[visit]}','{$_POST[fave]}','{$_POST [comment]}',NOW() )";
$r = mysqli_query ( $dbc, $q ) ;
# Report error on failure.
if (mysqli_affected_rows($dbc) != 1) { die ('Error' . mysqli_error($dbc)); } else { echo "success"; }
# Close database connection.
mysqli_close( $dbc ) ;
}
?>
Yes he is correct jquery's ajax will accomplish this or http post. You will use one of the mentioned methods to get the data from the HTML form and send it to the sever.
You will need jQuery ajax. This is a very powerful function that is used any time jQuery validation is used. It also lets you submit to the PHP file and get the results without refreshing the page.
EDIT:
Depending on the complexity of your project, ajax may be overkill. You can just normally submit the form after it is validated like this:
<script>
$(document).ready(function() {
$('#jform').validate({
rules: {
name: "required",
dob: "required",
visit: "required",
fave: "required",
comment: "required"
}, //end rules
messages: {
name: {
required: "Please tell us your name"
},
dob: {
required: 'Please select your Date of Birth'
},
visit: {
required: 'Please select the date you visited'
},
fave: {
required: 'Please select your favourite exhibit'
},
comment: {
required: 'Please tell us about your visit'
}
},//end messages
errorPlacement: function(error, element) {
if ( element.is(":radio") ) {
error.appendTo( element.parent());
} else {
error.insertAfter(element);
}
}
}); // end validate
submitHandler: function(form) { //This is the submit handler.
$(form).submit();
}
}); // end ready
</script>
Here is the part that I add:
submitHandler: function(form) { //This is the submit handler.
$(form).submit();
}
This will submit a form normally, meaning that it will run the PHP script and then refresh the page.
If you decide you want to use ajax, you can just replace $(form).submit(); with this:
var name = $('#name').val();
var dob= $('#dob').val();
var visit = $('#visit').val();
var fave = $("input[type='radio'][name='fave']:checked").val();
var comment = $('#comment').val();
$.ajax({
type: 'POST',
url: 'http://myaddress.com/process.php',
data: {name:name, dob:dob, visit:visit, fave:fave, comment:comment},
success: function(data){
if (data == 'success') {
//do something
}
else {
//do something
}
}
});
The data that I am using in the success portion of the function is the value returned from the PHP script. Since you mentioned comments, I am assuming that you PHP is not returning data, but more or less a completion message. In that case, you would just have your PHP echo 'success'; if it was successful. Then fill in the "do somethings" in the jQuery.
I have the below code for implementing a very basic login system on my site (using jQuery Mobile). The problem is that, when submitting the form through jQuery Mobile (and therefore using the validator), the validator always returns false and throws an error, even if the password is correct. When I wrote a separate form with nothing other than the two textboxes and a submit button and ran it directly to the validation script, it returned the correct value of true or false depending on the given password. What's wrong with the jQuery script that causes it to always return false?
HTML/JS:
<form action="logins.php" method="POST" id="loginForm" name="loginForm" data-ajax="false">
<label for="email" class="ui-hidden-accessible">Email Address:</label>
<input type="text" id="email" name="email" value="" placeholder="Email Address" />
<label for="pass" class="ui-hidden-accessible">Password:</label>
<input type="password" id="pass" name="pass" value="" placeholder="Password" />
<input class="submit" data-role="submit" type="submit" value="Submit" />
</form><br>
<br>
Return to home page
<script>
$('#login').bind('pageinit', function(event) {
$('#loginForm').validate({
onkeyup: false,
onclick: false,
onfocusout: false,
rules: {
email: {
required: true,
email: true
},
pass: {
required: true,
remote: {
url: "passcheck.php",
type: "post"
}
}
},
messages: {
email: {
required: "You must enter an email address.",
email: "You must enter a valid email address."
},
pass: {
required: "You must enter a password.",
remote: "Your username/password combination is incorrect."
}
}
});
});
</script>
PHP (passcheck.php):
<?php
require("common.php");
$query = "SELECT password FROM users WHERE email = :email";
$query_params = array(':email' => $_POST['email']);
try {
$stmt = $conn->prepare($query);
$stmt->execute($query_params);
} catch(PDOException $ex) {
die("Failed to run query.");
}
$hash = $stmt->fetchColumn();
if(crypt($_POST['pass'], $hash) === $hash){
echo "true";
} else {
echo "false";
}
You should be using the submitHandler to write a function to handle the actual checking of the username/password via AJAX using AJAX Form: http://www.malsup.com/jquery/form/#api.
You don't have to use AJAX Form and can write your own method to handle the login checking using the jQuery ajax() method, but AJAX Form has it prewritten for you.
Also, you don't need the onkeyup, onblur, etc. there - all you need is onsubmit set to true. Your code should look like this:
<script>
$('#login').bind('pageinit', function(event) {
$('#loginForm').ajaxForm(); // Set as an AJAX Form - See Documentation Above
$('#loginForm').validate({
onsubmit: true,
rules: {
email: {
required: true,
email: true
},
pass: {
required: true
}
},
messages: {
email: {
required: "You must enter an email address.",
email: "You must enter a valid email address."
},
pass: {
required: "You must enter a password.",
}
},
submitHandler: function(form) {
$("#loginForm").ajaxSubmit();
}
});
});
</script>
I'm attempting to return results from PHP to a div id=loginstart located on home.html, however the results fail to appear. I've tried troubleshooting for over 24hrs but I haven't been able to find anything that works. Any ideas?
[html]
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#checklogin").validate({
debug: false,
rules: {
name: "required",
email: "required",
},
messages: {
name: "Please enter your Username.",
email: "Please enter your Password.",
},
submitHandler: function(form) {
$.post("php/Login.php", $("#myform").serialize(), function(html) {
$("#LoginResult").html(html);
});
}
});
});
$(document).ready(function(){
$.post('php/Users.php', '', function(data) {
$('#loginstart').html(data);
});
});
</script>
</head>
<body>
<div class="sidebar-content-left">
<div id="LoginResult"></div>
<div id="loginstart"></div>
</div>
</body
[users php]
Welcome '.$session_username.'Click here to Log Out. ';
}else{
echo '<h3>Welcome Guest,</h3>Please log in to use Connect-A-Bull Marketplace.<br /><br /><form name="login" id="login" action="" method="POST">Username<br/><input name="Username" id="Username" type="text" /><br/>Password<br/><input name="Password" id="Password" type="password" /><br/><input name="Remember" id="Remember" type="checkbox" value="" />Keep me logged in<br/><input type="submit" class="sub-button" value="Log In" /><input type="reset" class="sub-button" value="Register" /><br/> Forgot Password</form>';
}
?>
Thank you for your time.
I don't see any div with id=loginstart in your code. Try changing it to $('#LoginResult').html(data);
UPDATE:
Try adding your <script> just before the closing </body> tag. Also check your error console in your browser for any possible javascript errors.
I have the following code:
JS
<script type="text/javascript">
$(function(){
$('#fgotpwfield').hide();
$('#login_submit').click(function() {
$('#form_result').fadeOut('fast');
$('#myccrxlogin input').removeAttr('disabled');
$('#myccrxlogin').submit();
});
if ($("#myccrxlogin").length > 0) {
$("#myccrxlogin").validate({
rules: {
email: { required: true, email: true },
password: 'required'
},
messages: {
email: { required: 'Your email address is required.',
email: 'Please enter a valid email address.'},
password: 'Your password is required.'
},
submitHandler: function(form) {
$('#myccrxlogin input').attr('disabled','true');
$('#login_submit').fadeOut('fast');
$('#forgotpw').fadeOut('fast');
$('body').append('<div id="page_load"></div>');
var email = $("#email").val();
var pw = $("#password").val();
var data = 'email=' + email + '&password=' + pw;
$.ajax({
url: "hidden url",
type: "POST",
data: data,
cache: false,
success: function (html) {
$('#page_load').remove();
if(html == 'OK') {
alert(html);
} else {
//$("#password").val('');
$("#form_result").html(html);
$('#form_result').fadeIn('slow');
$('#myccrxlogin input').removeAttr('disabled');
$('#login_submit').fadeIn('slow');
$('#forgotpw').fadeIn('slow');
}
}
});
} /*close submit handler */
});
};
});
</script>
HTML
<div id="form_result" style="margin:10px; display:none;" class="field-submit-error"></div><div style="clear:both;"></div>
<div id="loginformfield">
<p style="font-size:24px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color:#f93;">Login</p>
<form class="loginform" id="myccrxlogin" method="post" target="_parent">
<p>
<input name="email" type="text" id="email" tabindex="1" />
<label for="email">E-mail</label></p>
<p><input name="password" type="password" class="text large required" id="password" tabindex="2" />
<label for="password">Password</label></p>
<div class="loading"></div>
<p>I forgot my password</p>
<p><a class="readmore" href="#" id="login_submit" style="margin-bottom:0.5em;" tabindex="3">Login!</a></p>
</form>
</div>
A person enters their email and password, the file is first validated then run through an ajax call successfully. The ajax PHP page echo's either an error or 'OK'. I know the code gets to 'OK' because the alert(html) is triggered but it runs infinitely. Not sure why?
update
I believe I might be running into the recursion issue described here: http://docs.jquery.com/Plugins/Validation#General_Guidelines although I am not sure it applies.
I can't step through, but I believe you need to have your submithandler return false.
I believe the form is being submitted by the form action and the ajax submission.
Looking at the recursion link you posted, you would need to change this line:
$('#myccrxlogin').submit();
so that the raw form is being submitted, rather than the jquery-ized version of the form. In their example,
$(form).submit();
becomes
form.submit();
Try changing your submit line in a similar way.
The amazingly unclear and wild answer is this: I had to add the following into my ajaxed-PHP page. Something about running locally or with the setup I have is wacky. Hopefully this helps somebody.
Add to the first line of your ajax php page:
header('Access-Control-Allow-Origin: *');
I don't know how can i validate the recaptcha thing via jQuery. Please help. I have the contact us form with the following fields:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#signup').validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
messages: {
name: {
required: 'FULL NAME Missing'
},
email: {
required: "E-MAIL ADDRESS Missing",
email: "E-MAIL ADDRESS Not Valid"
}
});
});
</script>
<form action="index.php" method="post" name="signup" id="signup">
<p>
Full Name
<br>
<input name="name" type="text" class="required" id="name" title="Type your Full Name into this box" value="<?php echo $_POST['name']; ?>">
</p>
<p>
E-Mail Address
<br>
<input name="email" type="text" id="email" title="Type your E-Mail Address into this box" value="<?php echo $_POST['email']; ?>">
</form>
Validation with the jQuery is working, but no idea how to implement the recaptcha into this.
thanks all for your comments,will get it done by simple library :)
http://www.white-hat-web-design.co.uk/articles/php-captcha.php
And validation by using php after submitting of the form (it was easy for me to implement in less time in php than jquery. :) .
special thanks to Felix Kling :).
Dave
For those sort of validate, there is a validation method in jQuery validate plugin known as remote.
Check it here
$("#myform").validate({
rules: {
email: {
required: true,
email: true,
remote: "check-email.php"
}
}
});
In this check-email.php should return string "true" to be considered valid. and string "false" to be considered false.