I'm making HTML, PHP and Ajax based site for my university class and having some problems that I can't figure out. Can I post my HTML based Registration Form using Ajax post method to my main PHP site? My code looks like this:
index.php
<form id="loginForm" action="login.php" method="POST">
Username: <input type="text" name="username" id="username"/><br/>
Password: <input type="password" name="password" id="password"/><br/>
<button id="submit">Login</button>
<button id="regButton">Register</button>
</form>
<div id="ack"></div>
<div id="regAjax"></div>
<script type="text/javascript" src="Script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="Script/scriptAjax.js"></script>
register.html
<html>
<head><title>Registration Form</title></head>
<body>
<form id="regForm" action="process.php" method="POST">
Username: <input type="text" name="username"/><br/>
Password: <input type="password" name="password"/><br/>
First Name: <input type="text" name="fname"/><br/>
Last Name: <input type="text" name="lname"/><br/>
E-mail: <input type="text" name="email"/><br/>
<button id="register">Register</button>
</form>
<div id="rck"></div>
<script type="text/javascript" src="Script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="Script/scriptAjax.js"></script>
</body>
</html>
scriptAjax.js
$("#regButton").click( function() {
$.post ???
$("#regButton").submit( function() {
return false;
});
});
So the main purpose of this to make the smoother page and that registration form would appear in <div id="regAjax"></div> place when Register button is clicked, that user could register not being redirected to another page. Is there a way to do that or I'm taking the wrong path now?
The general Idea is that you have to send the form data to a PHP script that will evaluate it and send a response.
$.post( "validate.php", function( data ) {
$( "#regAjax" ).html( data );
});
I recommend you study this page
$.ajax({
method: 'POST',
url: 'validate.php',
data: data,
success: function(result){
$( "#regAjax" ).html( result );
}
});
Related
I'm not sure what's wrong with my code but my AJAX isn't working. I've included the jQuery library file but the program just won't load up the PHP file when I call on AJAX. As you'll see below, the .ajax call has a URL to "mail.php" but on submit, this file never loads. I can manually name the action tag for the form to "mail.php" but that just loads up "mail.php", which defeats the point of AJAX. What am I doing wrong?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form method="post" name="myForm" action="tac.php">
<label>Name:</label> <br />
<input name="sender">
<br /> <br />
<label>Email address:</label><br />
<input name="senderEmail">
<br />
<label>Message:</label> <br />
<textarea rows="5" cols="20" name="message"></textarea>
<br /> <br />
<input type="submit" name="submit">
</form>
<script>
$(document).ready(function() {
$("#myForm").submit(function() {
var roy = new Object();
roy.sender = $('#sender').val();
roy.senderEmail = $('#senderEmail').val();
roy.message = $('#message').val();
var jo = JSON.stringify(roy);
$.ajax({
type: "POST",
url: "mail.php",
data: {roy: jo},
success: function(msg){
alert(msg);
}
});
return false;
});
});
</script>
Change
<form method="post" name="myForm" action="tac.php">
To
<form method="post" id="myForm" action="tac.php">
This code
$("#myForm")
is looking for an element with id="myForm" not name="myForm"
Cheers
It's not working because you are trying to trigger an event of an id that doesn't exist.
$("#myForm").submit(function() { the id "myForms" it doesn't exist on < form > tag
put id="myForm" in < form > and it will work fine.
Like this: <form method="post" id="myForm" action="tac.php"> and also remove the name="myForm" because it has no use on form tags ...
Is it possible to submit two forms using a single submit button?
like if a user clicks submit on a form, that form runs test.php and form.php with the variables still intact?
If not then is it possible when the user clicks submit on a form it runs only test.php then test.php runs form.php with the variables still intact.
I don't think this is possible on a normal form submission, but you can try to utilize an AJAX request on both forms on demand. (This is just an example, not tested, just a guide or an idea.).
<!-- forms -->
<fieldset><legend>Form #1</legend>
<form id="form_1" action="test.php">
<label>Username: <input type="text" name="username" /></label>
<label>Password: <input type="text" name="password" /></label>
</form>
</fieldset>
<br/>
<fieldset><legend>Form #2</legend>
<form id="form_2" action="form.php">
<label>Firstname: <input type="text" name="fname" /></label>
<label>Lastname: <input type="text" name="lname" /></label>
</form>
</fieldset>
<button id="submit" type="button">Submit</button>
<!-- the forms is just an example -->
<!-- it would be weird to separate such fields in to different forms -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').on('click', function(){
$.ajax({
url: $('#form_1').attr('action'),
data: $('#form_1').serialize(),
type: 'POST', // or whatever get
dataType: 'JSON', // or whatever xml script html
success: function(response) {
}
});
$.ajax({
url: $('#form_2').attr('action'),
data: $('#form_2').serialize(),
type: 'POST', // or whatever get
dataType: 'JSON', // or whatever xml script html
success: function(response) {
}
});
});
});
</script>
The form can have only one action, if you want to pass data to a different page then you can do that by calling an ajax function..
I am using php, mysql and ajax to display a contact form , but the problem is that the output "1 record inserted" gets showed on the next page . I want to be displayed on the same page on submit .
Following is the code
validation.html
<html>
<head>
<title>Contact Form</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" language="javascript">
// <script type="text/javascript">
$(document).ready(function(){
$("#myButton").click(function() {
alert("Hii");
$.ajax({
cache: false,
type: 'POST',
url: 'validation.php',
data: $("#contact").serialize(),
success: function(d) {
$("#record").html(d);
}
});
});
});
</script>
</head>
<body>
<form method="post" id="contact" action="validation.php">
Name: <input type="text" name="name"> <br>
E-mail: <input type="text" name="email"> <br>
Password: <input type="text" name="pass"> <br>
Mobile: <input type="number" name="mobile"> <br>
<br>
<input type="submit" value="SUBMIT" id="mybutton"/>
</form>
<div id="record">Record has been inserted</div>
</body>
</html>
Can anyone please point out how i can go on doing so or what all changes are needed ?
It's because when you click #myButton, you're submitting the form and it redirects you.
Simply prevent the default action.
$("#myButton").click(function(event) {
event.preventDefault();
alert("Hii"); //what is this for???
$.ajax({
cache: false,
type: 'POST',
url: 'validation.php',
data: $("#contact").serialize(),
success: function(d) {
$("#record").html(d);
}
});
});
U are submitting the button, Just change
<input type="button" id="myButton">Submit</input>
OR
<button id="myButton">Submit</button>
It will invoke your ajax request.
Currently the form is submitted by your button, because it is a Submit-Button. If you don't want the submission of the form there are several methods, but these two are the best:
// Use prevent default
$("#myButton").click(function(e) { // This 'e' is important
e.preventDefault()
# rest of the function here
});
or you could just replace your Submit button with a link tag (just with a placeholder href) like here:
<html>
<head>
<title>Contact Form</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" language="javascript">
<script type="text/javascript">
// Actual Javascript code here
</script>
</head>
<body>
<form method="post" id="contact" action="validation.php">
Name: <input type="text" name="name"> <br>
E-mail: <input type="text" name="email"> <br>
Password: <input type="text" name="pass"> <br>
Mobile: <input type="number" name="mobile"> <br>
<br>
SUBMIT
</form>
<div id="record">Record has been inserted</div>
</body>
</html>
Best case would be combining both.
try to call function onclick event of input element
<input type="submit" value="SUBMIT" id="mybutton" onclick="return myFunction()"/>
then call this function
function myFunction()
{
$.ajax({
cache: false,
type: 'POST',
url: 'validation.php',
data: $("#contact").serialize(),
success: function(d) {
$("#record").html(d);
}
});
return false;
}
also replace this
<form method="post" id="contact" action="validation.php">
with
<form method="post" id="contact" action="validation.php" onsubmit="return false;">
It should help you!
Thanks.
its open another page because your form will do submit procces when you click #myButton.
there are some way to solve this.
1. add attribute into your form tag:
<form method="post" id="contact" action="validation.php" onsubmit="return false;">
or
2. make your button to prevent submit procces by returning false:
$(document).ready(function(){
$("#myButton").click(function() {
alert("Hii");
$.ajax({
cache: false,
type: 'POST',
url: 'validation.php',
data: $("#contact").serialize(),
success: function(d) {
$("#record").html(d);
}
});
return false;
});
});
try this
<input type="button" id="myButton">Submit</input>
OR
Submit
I have a form that calls a php script on submit to insert data into a MySQL database. I would like the output of the php script return to a greybox. I haven't been able to make it work so I appreciate any help you guys can provide.
I have the greybox call on the form definition see below but is not doing the trick.
Here is a subset of the code:
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJX_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<div id="content">
<form id="contact_us" name="contact_us" action="contact-greybox.php" method="POST" onSubmit="return GB_showCenter('Testing', this.action, 500, 500)">
<fieldset>
<label for="employee_id">Employee ID:</label>
<input id="employee_id" name="employee_id" type="number" size="10" /><P />
<label for="employee_name">Employee Name:<strong><br /> (as it should appear on
email) </strong></label>
<input id="employee_name" name="employee_name" type="text" /><P />
</fieldlist>
<p class="submit"><input type="image" name="submit" value="Submit Form" src="icons/ambas_submit.jpg" boder="0">
</form>
</div>
The php is a simple insert statement into MySQL.
Appreciate any help
greybox doesn't support POST submits, but the general pattern is to use ajax to submit the form- otherwise your page will refresh.
You need to set an onclick( $.submit ) to the form input then return false at the end of your ajax call:
$('#contact_us').submit(function(){
//get your inputs here
var e_id = $.('#employee_id').val();
//...etc....
$.post( ...
//set your data/input fields here:
data: { id: e_id },
success: function(response){
//display the response: this is what you get back from: contact-greybox.php
}
})
return false;
});
fancybox is an overlay box that supports being called with pure html as a parameter, so that you can just put this in your success function:
$.fancybox(response);
...or
$.fancybox(response.html)... etc.
I created login from that when clicking submit button sends variables to login_success.php page.but I want to make that when I click submit button login form will be close. I can close form using Jquery
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".loginform").hide();
});
});
</script>
But this time form does not sends request to .php file. I made it like addin script to .php file and then redirected to index.html site.It also good but I can see reflection.How can I combine them?
this is my form
<div class="loginform">
<form action="php/login.php" method="post" id="login">
<fieldset class="loginfield">
<div>
<label for="username">User Name</label> <input type="text" id="username" name="username">
</div>
<div>
<label for="password">Password</label> <input type="password" id="password" name="password">
</div>
</fieldset>
<button type="submit" id="submit-go" ></button>
</form>
</div>
Edit
I used function as NAVEED sad .I installed FireBug in firefox and I can see that my form validation works normal.It sends and request to login.php But I cant make any change on my form.It does not close or $arr values not shown on div tags.
You should use JSON/AJAX combination:
Downlod jQuery
If your form look like this:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<div id='errors'></div>
<div class='loginform' id='loginform'>
<form action="php/login.php" method="post" id="login">
Username:<input type="text" id="username" name="username">
Password:<input type="password" id="password" name="password">
<button type="submit" id="submit-go" value='Login'></button>
</form>
</div>
Your jQuery Code in ajax.js file to submit the form and then get data from 'php/login.php' in JSON and fill the required DIVs. If login is id of the form.
jQuery('#login').live('submit',function(event) {
$.ajax({
url: 'php/login.php',
type: 'POST',
dataType: 'json',
data: $('#login').serialize(),
success: function( data ) {
for(var id in data) {
jQuery('#' + id).html(data[id]);
}
}
});
return false;
});
your login.php file as described in form action attribute:
$username = $_POST['username'];
$password = $_POST['password'];
if( $username and $password found in database ) {
// It will replace only id='loginform' DIV content
// and login form will disappear
$arr = array ( "loginform" => "you are logged in" );
} else {
// It will replace only id='errors' DIV content
$arr = array ( "errors" => "You are not authenticated. Please try again" );
}
echo json_encode( $arr );
More Detail:
How to submit a form in ajax/json:
General jquery function for all forms
Try submit method
$("button").click(function(){
$("form.loginform").submit().hide();
});
PS You do know that applying onclick handler to all <button> elements on the page is bad idea, right?
$(document).ready(function(){
$("button").click(function(){
$(".loginform").hide();
return false;
});
});