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>
Related
So I'm comparing the value of the input field entered by the user to the value of the mysql DB (using an Ajax request to the checkAnswer.php file). The request itself works fine, it displays the correct "OK" or "WRONG" message, but then it does not submit the form if "OK". Should I put the .submit() somewhere else?
HTML code:
<form id="answerInput" action="index" method="post">
<div id="answer-warning"></div>
<div><input id="answer-input" name="answer" type="text"></div>
<input type="hidden" id="id" name="id" value="<?=$id?>">
<div><button type="submit" id="validate">Valider</button></div>
</form>
</div>
JS code
$("#validate").click(function(e){
e.preventDefault();
$.post(
'includes/checkAnswer.php',
{
answer : $('#answer-input').val(),
id : $('#id').val()
},
function(data){
if(data === '1'){
$("#answer-warning").html("OK");
$("#answerInput").submit();
}
else{
$("#answer-warning").html("WRONG");
}
},
'text'
);
});
I think it is because you set your button type as submit. Why?
When you do $("#validate").click(function(e){, you implicitly replace the default submit behavior of the form.
As you want to interfere in the middle of the process for extra stuff, I suggest you change the button type to button or simply remove the type attribute.
Then the $("#validate").click(function(e){ will alter behavior of click, not the submit of form.
<form id="answerInput" action="index" method="post">
<div id="answer-warning"></div>
<input id="answer-input" name="answer" type="text">
<input type="hidden" id="id" name="id" value="<?=$id?>">
<button onlcick="validate()">Valider</button>
</form>
/******** JS ************/
function validate(){
var post = {};
post['answer'] = $('#answer-input').val();
post['id'] = $('#id').val();
$.ajax({
url: 'includes/checkAnswer.php',
type: 'POST',
data: {data: post},
success:function (data) {
console.log('succsess');
},
error:function (jQXHR, textStatus, errorThrown) {
console.log('failure');
}
});
}
I need to pass a single value from my form to my php in the same page. It´s probably not an option to create another .php file and take the code there since there´s a lot going on.
This is the part of the code I need to fix, currently it only works when the code is on another file, since the $_POST is not messing around with other parts of the code. Specifically I need to manage to pass the 'client' or the 'empre' from the form alone to the php.
HTML
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
if($(".cliente").click(function() {
var name = $("#client").val();
var dataString = 'client='+ name;
}))else if($(".empresa").click(function() {
var name = $("#empre").val();
var dataString = 'empre='+ name;
}));
$.ajax({
type: "POST",
data: dataString});
});
</script>
</head>
<body>
<form>
<input name="client" type="text"><br>
<input class="cliente" type="submit" value="Buscar cliente"/><br>
<input name="empre" type="text"><br>
<input class="empresa" type="submit" value="Buscar empresa"/><br>
</form>
//PHP HERE
//HTML AGAIN
</body>
</html>
PHP (same page, just separating for readability)
if(isset($_POST['empre'])){
//DB QUERY
}
elseif(isset($_POST['client'])){
//DB QUERY
}
You can combine and send it in same AJAX call as below, and in PHP you can do:
$parameters = json_decode($_POST['params']);
$parameters would have all the variables sent in that AJAX call.
I would recommend, not to use same page for your AJAX. You should keep it in separate file. That would make code much cleaner, lighter, readable and easy-to-tweak.
$(function() {
$(".cliente, .empresa").click(function(e) {
e.preventDefault();
var paramsToSend = {};
if ($(this).hasClass('client'))
paramsToSend['client'] = $('form[name="client"]').serialize();
else
paramsToSend['empre'] = $('form[name="client"]').serialize()
$.ajax({
url: 'index.php' //assuming this is index.php (same page)
type: "POST",
data: {
params: JSON.stringify(paramsToSend)
},
success: function(data) {},
failure: function(error) {}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="client">
<input name="client" type="text" value="some value"><br>
<input class="cliente" type="submit" value="Buscar cliente" />
</form>
<form name="empre">
<input name="empre" type="text" value="some value"><br>
<input class="empresa" type="submit" value="Buscar empresa" />
</form>
//PHP HERE //HTML AGAIN
Why not use separate forms to process the data? (Your PHP logic mentioned will work with this proposed solution)
$(function() {
$(".cliente").click(function(e) {
e.preventDefault();
alert('Going to post data for client, check the console log now');
$.ajax({
url: $('form[name="client"]').attr('action'),
type: "POST",
data: $('form[name="client"]').serialize(),
success: function(data){
console.log(data);
},
failure: function(error){}
});
});
$(".empresa").click(function(e) {
e.preventDefault();
alert('Going to post data for empre, check the console log now');
$.ajax({
url: $('form[name="empre"]').attr('action'),
type: "POST",
data: $('form[name="empre"]').serialize(),
success: function(data){
console.log(data);
},
failure: function(error){}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="client" action="https://someurl.com/fileto.php">
<input name="client" type="text" value="some value"><br>
<input class="cliente" type="submit" value="Buscar cliente"/>
</form>
<form name="empre" action="https://someurl.com/fileto.php">
<input name="empre" type="text" value="some value"><br>
<input class="empresa" type="submit" value="Buscar empresa"/>
</form>
need some help on this one...
I'm working with a form and a script to show alert...
I'm using this code to achieve this and its working fine:
<input id="autocomplete" class="input_message" type="text" name="message" autocomplete="off" placeholder="...type your message" ><br/>
<input id="input_send" class="input_send" type="submit" name="send" value="SEND">
but if i put some form method, the alert on my script is not working..
<form enctype="multipart/form-data" method="post">
<input id="autocomplete" class="input_message" type="text" name="message" autocomplete="off" placeholder="...type your message" ><br/>
<input id="input_send" class="input_send" type="submit" name="send" value="SEND">
</form>
here is my script:
<div id="alertbox">
<script>
$(document).ready(function(){
$('#input_send').click(function(){
var post = $('#autocomplete').val();
if(post==""){
alert('Enter Message Please');
}else{
$('#loader').fadeIn(400).html('<img src="./loader.gif" align="absmiddle"> <span class="loading">sending</span>');
var datasend = "alert";
$.ajax({
type:'post',
url:'./includes/alerts.php',
data:datasend,
cache:false,
success:function(msg__){
$('#autocomplete').val('');
$('#loader').hide();
$('#alertbox').fadeIn('slow').prepend(msg__);
$('#alerts').delay(5000).fadeOut('slow');
}
});
}
})
});
</script>
</div>
thanks in advance..
the submit button post the form to the server, and the page is reloaded;
you can add return false;,
after the ajax function, then is not sends to the server
need to prevent form submit
$(document).ready(function(){
$('#input_send').click(function(e){
e.preventDefault();//here
var post = $('#autocomplete').val();
if(post==""){
alert('Enter Message Please');
}else{
$('#loader').fadeIn(400).html('<img src="./loader.gif" align="absmiddle"> <span class="loading">sending</span>');
var datasend = "alert";
$.ajax({
type:'post',
url:'./includes/alerts.php',
data:datasend,
cache:false,
success:function(msg__){
$('#autocomplete').val('');
$('#loader').hide();
$('#alertbox').fadeIn('slow').prepend(msg__);
$('#alerts').delay(5000).fadeOut('slow');
}
});
}
})
});
Or change the type of the #input_sendfrom submit to button so that the form submission will not be triggered
<input id="input_send" class="input_send" type="button" name="send" value="SEND">
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!
I need help with submiting data form #send_form to #f_from in another page.
<script type="text/javascript">
function post_form() {
$('#send_form').action = "form01.html";
$('#send_form').submit();
return false;
}
</script>
<form id='send_form' action='form01.html' method='POST' onsubmit="post_form();">
<input type="text" name="f_in01" value="User" />
<input type="text" name="f_in02" value="12345" />
<input type="submit" />
</form>
The form01.html
<script type="text/javascript">
function f_res()
{
var res01=document.f_form.f_in01.value;
var res02=document.f_form.f_in02.value;
var result = res01 + " " + res02;
document.f_form.f_out01.value=result;
}
</script>
<form id="f_form" onSubmit="f_res();return false;">
<input type="text" name="f_in01" /><br>
<input type="text" name="f_in02" /><br>
<br>
<input type="submit" onClick="f_res();" value="Enter w/Sub" /><br>
<input type="text" name="f_out01" />
</form>
Now it doesn't work. The data doesn't post in page01.html
Have you tried
$('#send_form').attr('action', "form01.html");
instead of
$('#send_form').action = "form01.html";
check out this fiddle
Amin is right, but in jQuery, when an event handler returns false, it amounts to the same as e.preventDefault(); e.stopPropagation(). Essentially, you cancel the event. Try returning true, instead of false.
If you don't want the page to change, you'll have to look at AJAX to post the form data.
You want AJAX for this something like:
$('#button').click(function(){
$.ajax({
type:"POST", //php method
url:'process.php',//where to send data...
cache:'false',//IE FIX
data: data, //what will data contain (no SHIT Sherloc...)
//check is data sent successfuly to process.php
//success:function(response){
//alert(response)
//}
success: function(){ //on success do something...
$('.success').delay(2000).fadeIn(1000);
//alert('THX for your mail!');
} //end sucess
}).error(function(){ //if sucess FAILS!!
alert('An error occured!!');
$('.thx').hide();
});
});