Develop Reference

How do I submit form using ajax

I have my form and my ajax laid out but I am not sure how to submit the form using the ajax. I've tried $('#testform').submit() but it didn't call my ajax when I wrapped it with the submit. I might of been doing it wrong. How do I get my form to submit through the ajax and not submit regularly?
<form id="testform" action="https://example.com/api/payments/" method="post">
Name<input type="text" name="name" id="name">
Card Number <input type="text" name="card_number" id="card_number" maxlength="16">
Exp Month <input type="text" name="exp_month" id="exp_month">
Exp Year <input type="text" name="exp_year" id="exp_year">
CVC <input type="text" name="cvc" id="cvc" maxlength="3">
Amount <input type="text" name="amount" id="amount">
<input type="submit" id="submit">
frm = $('#testform');
frm.submit(function(ev)
{
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
dataType: "html",
//Set the HTTP headers for authentication
beforeSend: function (xhr) {
xhr.setRequestHeader('api_key', 'tiyndhinzrkzti5ody0');
xhr.setRequestHeader('email', 'example#example.com');
},
//Serialize the data sent from the form inputs
data: frm.serialize(),
success: function(data) {
$('#return').append(data);
}
});
ev.preventDefault();
});

Instead of frm.submit(function(ev) try the following code
$("#testform").on('submit', function(ev) {
ev.preventDefault();
...
});
After clicking on the submit button you should see the ajax being posted in the console. The "magic" is to attach a handler to the submit event instead of invoking the event itself. Additionally, you had a typo in your previous code ($('testform') instead of $("#testform"))

ajax isnt sending post request to php

Javascript doesn't send any post data to php file
$(document).ready(function(){
function showComment(){
$.ajax({
type:"post",
url:"process.php",
data:"action=showcomment",
success:function(data){
$("#comment").html(data);
}
});
}
showComment();
$("#button").click(function(){
var name = $("#name").val();
var message = $("#message").val();
var dataString = "name="+name+"&message="+message+"&action=addcomment";
$.ajax({
type:"post",
url:"process.php",
data:dataString,
success:function(data){
showComment();
}
});
});
});
form:
<form action="" method="POST" enctype="multipart/form-data">
name : <input type="text" name="name" id="name"/>
</br>
message : <input type="text" name="message" id="message" />
</br>
<input type="submit" value="Post" name="submit" id="button">
<div id="info" />
<ul id="comment"></ul>
</form>
php
$action=$_POST["action"];
if($action=="addcomment"){
echo "Add comment WORKS!";
}
if($action=="showcomment"){
echo "default";
}
Tried to add such lines as if post addcomment than show some words, just for a test since sql request didn't but php doesn't show any response at all, like there was no post action at all.
ps. I'm really new ajax so if possible show me a solution to solve it.

You're using a submit button so it will be making the form submit and reload which will bypass your ajax, you can change your jQuery to listen for the form submit event instead like this:
$("form").on('submit', function(e){
// Stop form from submitting
e.preventDefault();
var name = $("#name").val();
var message = $("#message").val();
var dataString = "name="+name+"&message="+message+"&action=addcomment";
$.ajax({
type:"post",
url:"process.php",
data:dataString,
success:function(data){
showComment();
}
});
});
Or simply change the button from type="submit" to type="button" or replace it with a element.

You are using submit button as Dontfeedthecode mentioned. Your form does not have any action so it is self posting. I have added action and id to the html form and a hidden field to pass the action. Now javascript serialize the form and send it to the process.php.
$(function () {
$("#my-form").on("submit", function (e) {
$("#action").val("addcomment");
$.ajax(
{
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (data) {
showComment();
}
});
return false;
});
});
<form action="process.php" method="POST" id="my-form" enctype="multipart/form-data">
<input type="hidden" id="action" name="action" value="" />
name : <input type="text" name="name" id="name" />
</br>
message : <input type="text" name="message" id="message" />
</br>
<input type="submit" value="Post" name="submit" id="button">
<div id="info" />
<ul id="comment"></ul>
</form>

PHP Form with Button

I have some experience in JAVA GUI programming and I want to achieve the same in a PHP form.
Situation: I want to have a php form with a submit button. When the button is pressed an ActionEvent should be called to update another part of the form.
How to implement such a feature with HTML,PHP,JAVASCRIPT ?

Load latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
HTML code:
<form>
<button type="button" class="formLoader">Click button</button>
<div id="formContentToLoad"></div>
</form>
jQuery code:
<script type="text/javascript">
$(function(){
$(".formLoader").click(function(){
$("#formContentToLoad").load("scriptToRun.php");
});
});
</script>
Whatever markup you need to update in the form, can be put into scriptToRun.php

Use jQuery
Javascript
$(document).ready(function() {
$(".myForm").submit(function() {
$.ajax({
type: "POST",
url: "myForm.php",
data: $(this).serialize(),
success: function(response) {
// todo...
alert(response);
}
})
})
});
Html
<form method="POST" class="myForm">
<input type="text" id="a_field" name="a_field" placeholder="a field" />
<input type="submit" value="Submit" />
</form>
PHP
<?php
if(isset($_POST)) {
$a_field = $_POST["a_field"];
// todo..
}

If you want to use PHP and HTML to submit a form try this:
HTML Form
<form action="" method="post">
<input type="text" placeholder="Enter Name" name="name" />
<input type="submit" name="sendFormBtn" />
</form>
PHP
<?php
if(isset($_POST["sendFormBtn"]{
$name = isset($_POST["name"]) ? $_POST["name"] : "Error Response Here";
//More Validation Here
}

One Javascript Control Multiple Form Submission

I am trying to build a page with multiple forms submitting different values to another php script "another-script.php" using Javascript as shown below:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="simple-msg"></div>
<form name="ajaxform" id="ajaxform" action="another-script.php" method="POST">
<input type=hidden name=a value='value1'>
<input type="button" id="simple-post" value="Run Code" />
</form>
<form name="ajaxform" id="ajaxform" action="another-script.php" method="POST">
<input type=hidden name=a value='value2'>
<input type="button" id="simple-post" value="Run Code" />
</form>
<form name="ajaxform" id="ajaxform" action="another-script.php" method="POST">
<input type=hidden name=a value='value3'>
<input type="button" id="simple-post" value="Run Code" />
</form>
<script>
$(document).ready(function()
{
$("#simple-post").click(function()
{
$("#ajaxform").submit(function(e)
{
$("#simple-msg").html("<img src='/logo/progress_bar.gif'/>");
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
$("#simple-msg").html('<pre>'+data+'</pre>');
},
});
e.preventDefault(); //STOP default action
e.unbind();
});
$("#ajaxform").submit(); //SUBMIT FORM
});
});
</script>
</body>
</html>
The forms should be able to submit different values by themselves but when using Javascript to submit to a different script "another-script.php", only the first form works. Would you please kindly advise what I should do to make each form submitting their own values.
Thank you very much!

Issue with multipart/form-data, ajax and textarea with TinyMCE

I'm working with html/php/ajax/jquery and today I pointed out a little issue that is driving me crazy.
I've got an html form:
<form method="POST" enctype="multipart/form-data" name="myForm" id="myForm" action="">
<label class="form-label">Nome</label>
<input name="nome" type="text" class="form-control"><br>
<label class="form-label">Descrizione</label>
<textarea name="descrizione" id="text-editor" placeholder="" class="form-control" rows="10"></textarea>
<label class="form-label">Stato</label>
<select name="stato" id="source" style="width:30%">
<option value="1">Abilitato</option>
<option value="0">Disabilitato</option>
</select>
<h4>Foto profilo</h4>
<input type="hidden" name="MAX_FILE_SIZE" value="20400000" >
<input style="border:0px;" type="file" name="user_foto" id="file">
<div class="form-actions">
<div class="pull-right">
<button type="submit" class="btn btn-success btn-cons"><i class="icon-ok"></i>Inserisci</button>
<button type="button" class="btn btn-white btn-cons" onclick="window.location.href='index.php'">Indietro</button></a>
</div>
</div>
</form>
I'm working with a JQuery+Ajax script that is able to fire a php script without reloading page, and insert form's data into a table in my database:
$(document).ready(function(){
$('#myForm').on('submit',function(e) {
var formData = new FormData(this);
$.ajax({
url:'inserisciProfessionisti.php',
data: formData,
type:'POST',
async: false,
cache: false,
contentType: false,
processData: false,
success:function(data){
window.location = 'listaProfessionisti.php'
},
error:function(data){}
});
e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});
});
Here my php code:
<?php
session_start();
session_cache_limiter('nocache');
if(!isset($_SESSION['mail'])){
header("location:login.php");
}
include("include/connect.php");
$conn=mysql_connect($HOST, $USER, $PASSWORD);
$db_ok=mysql_select_db($DB, $conn);
$nome=$_POST['nome'];
$descrizione = $_POST['descrizione'];
....
$comando="INSERT INTO professionisti('nome','descrizione',...)VALUES('$nome','$descrizione',...)";
$ris=mysql_query($comando, $conn) or die("Errore connessione database: " . mysql_error());
...
Everything works like a charm apart textarea content. It seems that textarea content wouldn't be passed to my php script.

Issue solved.
I add this onclick="tinyMCE.triggerSave(true,true);" to submit button and everything works like a charm.
I think It should be a tinyMCE bug.