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 ...
Related
PFB my Html code :
<form id="form" enctype="multipart/form-data">
<label>File One</label>
<input type="file" name="file[]" id="file[]">
<br/>
<label>File Two</label>
<input type="text" id="name" name="name">
<input type="file" name="file[]" id="file[]">
<br/>
<label>File Three</label>
<input type="file" name="file[]" id="file[]">
<input type="submit" id="submit" name="submit" value="Submit">
</form>
I am trying to submit this form using ajax as below :
<script type="text/javascript" >
$(function() {
$('#form').submit(function(event) {
var name = $("#name").val();
var file[] = $("#file[]").val();
var dataString = 'name='+name+'&file[]='+file[];
$.ajax({
type: "POST",
url: "k.php",
data: dataString,
success: function(data123){
alert(data123);
}
});
return false;
});
});
</script>
But its not working. i:e the below line :
var file[] = $("#file[]").val();
var dataString = 'name='+name+'&file[]='+file[];
Any help would be highly useful.
I need to submit multiple photos along with text fields using ajax function but I am stuck in this issue from the past many days.
For uploading files using ajax, you need to do some extra work using the FormData object.
Check out http://blog.teamtreehouse.com/uploading-files-ajax for an example of how to do this.
Due to language limitations I might not understood how to ask Google about what I want to accomplish, but I hope you will understand.
I have three forms which i want to show on the same page without refresh. First form submits action to php which determines which function (with yet another form) to show. But buttons interfere and I am nowhere near what I wanted to do.
Index.php is supposed to send user input to calculator.php which then opens next form depending on value:
<form id="form1" method="post" formaction="calculator.php">
<input id="form1" type="submit" value="Submit" />
<div id="parseSecondForm"></div>
<script type="text/javascript">
$(function(){
$('#form1').on('submit', function(e){
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('formaction'),
data: $(this).serialize(),
beforeSend: function(){
$('#parseSecondForm').html('<img src="loading.gif" />');
},
success: function(data){
$('#parseSecondForm').html(data);
}
});
});
});
</script>
calculator.php receives user input and echoes next form in #parseSecondForm div in index.php:
if (form1 === '1') {
echo '
<form id="form2" method="post" formaction="form2.php">
<input id="form2" type="submit" value="Submit" />
<div id="thankyou"></div>
<!--submit saves php result in MySQL and thanks the user in next div-->
';
}
else {
echo '
<form id="form3" method="post" formaction="form3.php">
<input id="form3" type="submit" value="Submit" />
<div id="thankyou"></div>
<!--submit saves php result in MySQL and thanks the user in next div-->
';
}
I tried to echo modified javascript from index.php, but it just resets all the forms.
Maybe there are some form scripts designated for the cause or any other ideas how can I fix the issue?
In Javascript/HTML you cannot have two items with the same IDs:
<form id="form1" method="post" formaction="calculator.php">
<input id="form1" type="submit" value="Submit" />
form1 can be used only once.
Same for the php dynamically created forms.
I can't process the uploaded image file with php ajax requuest. It's process the text field but can't process uploaded file. Following is my form. can you tell me what is wrong in my simple code and how can i solve it ?
and without upload file i saw that it's not redirect after successfull.
html form
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/css/screen.css" />
<script src="http://jquery.bassistance.de/validate/lib/jquery.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script>
// JQuery Script to submit Form
$(document).ready(function () {
$("#commentForm").validate({
submitHandler : function () {
// your function if, validate is success
$.ajax({
type : "POST",
url : "process.php",
data : $('#commentForm').serialize(),
success : function (data) {
$('#message').html(data);
}
});
return false;
}
});
});
</script>
<form class="cmxform" id="commentForm" method="get" action="" enctype="multipart/form-data">
<fieldset>
<p>
<input type="text" name="text"/>
</p>
<p>
<input type="file" name="img"/>
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</fieldset>
</form>
<div id="message"></div>
php process page:
<?php
$text = $_POST['text'];
$file = $_FILES['img']['name'];
if(empty($text) && empty($file))
{
echo "Both field is empty ";
}
else
{
header("Refresh:3, url=ajax_form.php");
}
?>
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 );
}
});
SOLUTION: I had to drop the sumbmit button and use a regular button. The rest of this code works. I also dropped the HTML form.
I'm trying to send an image + some text to my php script with ajax using formdata.
This is what i got:
$ajax_uploadImage = function (form)
{
var data = new FormData();
data.append('title', form.find('#title').val());
data.append('comment', form.find('#comment').val());
data.append('image', form.find('#image').prop('files')[0]);
$.ajax({
url: '../php/upload_image.php',
data: data,
type: 'POST',
processData: false,
contentType: false,
success: function (data) {
alert('something');
}
});
}
The form in the function parameters is a normal html form, here is the form in html:
<form enctype="multipart/form-data" id="upload_image">
<label for="title">Title:</label>
<input type="text" id="title" name="title" />
<br />
<label for="comment">Comment:</label>
<input type="text" id="comment" name="comment" />
<br />
<label for="image">Image:</label>
<input type="file" id="image" name="image" />
<br />
<input type="submit" value="Upload picture" name="submit">
<hr />
</form>
The alert in success never triggers, can anyone help?
EDIT: Adding the PHP, even though it doesn't do anything:
<?php echo 'something'; ?>
Right now you are storing a jQuery object in the FormData which cannot work. Use the values of those elements instead. In case of the file input you need to use the File object in the files property of the DOM element:
data.append('title', form.find('#title').val());
data.append('comment', form.find('#comment').val());
data.append('image', form.find('#image').prop('files')[0]);
Try adding form action like:
<form enctype="multipart/form-data" id="upload_image" action="upload_image.php">