I have a feedback form which is validate by jquery and request is sent to Php page using ajax. So In firebug I checked that it's successfully showing the "Successful Message" but why it's not showing in hmtl page <div id="#feedback_result"></div> tag ?
Jquery Code:
<script>
$(document).ready(function() {
// validate signup form on keyup and submit
$("#feedback").validate({
submitHandler: function(form) {
$.ajax({
url: form.action,
type: form.method,
//async: false,
data: $(form).serialize(),
beforeSend : function (){
$('input[type=submit]').attr('disabled', false);
},
success: function(response) {
$('#feedback_result').html(response);
}
});
},
rules: {
yourfeedback: "required",
},
messages: {
yourfeedback: "Required",
}
});
});
</script>
Html Code:
<div id="#feedback_result"></div>
<form id="feedback" method="post" action="<?php echo htmlspecialchars("feedback_process.php"); ?>">
<table width="400" border="0" cellspacing="5" cellpadding="0">
<tr>
<td>Your feedback</td>
</tr>
<tr>
<td><textarea class="textarea2" name="yourfeedback" placeholder="Your feedback"></textarea></td>
</tr>
<tr>
<td><input type="submit" id="submit" value="Send Feedback" name="submit" class="submit_button"/></td>
</tr>
</table>
</form>
</div>
Note: I've another form in this same page with same jquery/ajax code except the id $("#order").validate({
Try to remove the # from your id value:
<div id="feedback_result"></div>
Related
I design a simple page were user can put name, password and image using html.
I try to sent those data using ajax to specific php page, but I cannot implement this.
how I do this thing
Html code
<?php include('connection.php'); ?>
<form id="form" enctype="multipart/form-data">
<table>
<tr>
<td>Name:</td>
<td><input type="name" id="name"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="pass"></td>
</tr>
<tr>
<td>Photos:</td>
<td><input type="file" id="photos"></td>
</tr>
<tr>
<td><input type="submit" id="go"></td>
</tr>
</table>
</form>
Jquery and ajax
<script>
$(document).ready(function(){
$('#go').click(function(){
var img_name = $('#img_name').val();
var name = $('#name').val();
var pass = $('#pass').val();
$.ajax({
type : "POST",
url : "singup_submit.php",
data : { img_name:img_name, name:name, pass:pass},
success : function(done){
alert(done);
}
});
});
});
</script>
Php code
<?php
include('connection.php');
if(isset($_POST)){
$name = $_POST['name'];
$pass = $_POST['pass'];
$img_name=$_FILES['img_name']['name'];
$qr="INSERT INTO data (name,pass,img_name) VALUES ('$name','$pass','$img_name')";
$ex=mysqli_query($con,$qr) or die(mysqli_error($con));
if($ex==1)
echo 'done';
else
echo 'not done';
}
Follow this code ..It may help you
<script>
$(document).ready(function(){
$("#go").click(function(){
var name = $("#name").val();
var pasword = $("#password").val();
var photos = $("#photos").val();
if(name==''||pass==''||photos==''){
alert("Please Fill All Fields");
}
else{
$.ajax({
type : "POST",
url : "singup_submit.php",
data : formData,
cache : false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
</script>
you are not sending any file in your ajax request.
$(document).ready(function(){
$("#go").on('submit',function(e){
e.preventDefault()
$.ajax({
url: 'singup_submit.php',
type: 'POST',
data: new FormData(this),
contentType: false,
processData: false,
success: function(response){
alert(done);
},
error: function(data){
console.log("error");
console.log(data);
}
},
});
});
});
and then take data from global variables in php as you are doing now.
and please assign name to your form fields like so
<form id="form" enctype="multipart/form-data">
<table>
<tr>
<td>Name:</td>
<td><input type="name" name="name" id="name"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="pass"></td>
</tr>
<tr>
<td>Photos:</td>
<td><input type="file" name="img" id="photos"></td>
</tr>
<tr>
<td><input type="submit" name="submit" id="go"></td>
</tr>
</table>
</form>
and it should work.
A part on my page is responsible for multiple picture uploads, it worked for a while but it is not working anymore.
I'm using a WampServer Version 3.1.7 64bit and testing on localhost.
I have tried accepting and sending datas via ajax instead of html submit, but i didn't get datas on php side either, but on client side i had all datas before sending ( FormData() ).
HTML part:
<div class="div_shadow_here">
<form id="gallery_data" method="post" enctype="multipart/form-data">
<input type="hidden" name="formid" value="<?php echo $_SESSION[" formid "]; ?>" />
<table class="news_table">
<tr>
<td>
<p class="name_col">Gallery name:</p>
</td>
<td>
<input class="input_news" id="gallery_title" type="text" name="gallery_title" />
</td>
</tr>
<tr>
<td>
<p class="name_col">Picture(s):</p>
</td>
<td>
<input class="input_news" id="news_picture_path" type="file" name="picture_path[]" multiple />
<label id="label_for_input" for="picture_path">Select picture(s)</label><span id="uploadState"></span>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="img_container"></div>
</td>
</tr>
</table>
<button class="print_button hidden_a" type="submit" name="login" id="save_news" form="gallery_data">Save</button>
</form>
</div>
PHP part for testing:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<script>console.log("Not empty")</script>';
if (isset($_POST['formid'])) {
echo '<script>console.log("'.$_POST['formid'].
'")</script>';
}
if (isset($_POST['gallery_title'])) {
echo '<script>console.log("'.$_POST['gallery_title'].
'")</script>';
}
if (isset($_FILES['picture_path']['name'])) {
echo '<script>console.log("'.count($_FILES['picture_path']['name']).
'")</script>';
}
} else {
echo '<script>console.log("Empty")</script>';
}
I get Notice: Undefined index: gallery_title.. errors without isset($_POST['gallery_title']) testing (same for all other input fields).
Ajax for testing:
$('body').on('click', '#save_news', function(e) {
e.preventDefault();
var formData = new FormData($(this).parents('form')[0]);
for (var key of formData.keys()) {
console.log(key);
}
for (var value of formData.values()) {
console.log(value);
}
$.ajax({
url: 'galleryupload.php',
type: 'POST',
success: function(data) {
alert("Data Uploaded: " + data);
},
data: formData,
cache: false,
contentType: false,
processData: false
});
return false;
});
I noob and get mad when submit php form, convert input value to json, and other php file get it.
html
<form action="submit.php" method="post" name="form1" id="myform">
<table width="100%" border="0" style="font-size: 65px;">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<tr>
<td></td>
<td><button id="submit">Submit</button></td>
</tr>
</table>
</form>
<script src="script.js"></script>
script.js
$('#myform').submit(function (event) {
name = $('#name').val();
var data = {
name: name
}
$.ajax({
type: "POST",
url: 'submit.php',
contentType: 'application/json',
data: JSON.stringify(data),
dataType: 'json'
});
return false
});
php file
header('Content-Type: application/json');
$name_dirty = json_decode($_POST['name']);
echo $name_dirty;
Can someone help me? submit.php got blank, I cant get the value that I submit from html page. Big Thanks
Your Html
<table width="100%" border="0" style="font-size: 65px;">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<tr>
<td></td>
<td><button id="submit">Submit</button></td>
</tr>
</table>
<script src="script.js"></script>
Your JS
$('#submit').click(function() {
name = $('#name').val()
var data = {
name: name
}
$.ajax({
type: "POST",
url: 'submit.php',
data: data
dataType: 'json'
complete: function (resultData) {
alert('data has been send')
})
})
In your php:
<?php
print_r($_POST['data'])
A few notes. Make sure you check your paths. In my answer i assumed that the problem is in the code and not in wrong paths. Also when you use form tag you can use a submit button like <input type="submit" value="Submit"> to submit your form without using Javascript. It would work in your case but it's just another way to tackle your issue.
In my answer i removed your form tags and triggered the action on button click. There will be no redirect to the page but you can set a redirect inside the js if it is important to you, on success function of the ajax that i added. At the moment i just throw an alert message when it works successfully.
I want to submit a form to a PHP script, let the script do its magic, then return said magic into a div as a visual indicator of its success/failure/change in status.
I have a form which I submit (I've cut out a lot of extraneous inputs/text areas, etc. of code which aren't important):
HTML:
<form name="ajaxform" id="ajaxform" method="post" action="ajax.php">
<table>
<tr class="left">
<td>Reporter:</td>
<td>//list of people</td>
</tr>
<tr class="left">
<td width="75%">
<p><label for="start">Start:</label>
<input type="text" name="start" id="start"></p>
<p><label for="end">End:</label>
<input type="text" name="end" id="end"></p>
</td>
</tr>
<tr>
<td>
<input name="sid" type="hidden" id="sid" value="<?=$sid?>">
<input name="table" type="hidden" id="table" value="add">
<input name="submit" type="submit" id="submit" value="Submit" class="submitForm">
</td>
</tr>
</form>
<div id="messageResponse"></div>
On submitting, the following JS gets run:
JS:
$(function() {
$('#ajaxform').validate({ // initialize the plugin
errorClass: "invalid",
submitHandler: function (form) {
$.ajax({
type:'POST',
url:'ajax.php',
data: $(form).serialize(),
success: function() {
$('#messageResponse').fadeIn(500);
$('#messageResponse').addClass('ui-state-highlight ui-corner-all').removeClass('ui-state-error');
$('#messageResponse').text('Success!' + result);
},
error: function (xhr, ajaxOptions, thrownError) {
$('#messageResponse').fadeIn(500);
$('#messageResponse').addClass('ui-state-error ui-corner-all').removeClass('ui-highlight-error');
$('#messageResponse').text(xhr.status + ' ' + thrownError + ': Something went wrong - check your inputs and try again.');
}
});
setTimeout(function(){ $('#messageResponse').fadeOut(500); }, 5000);
// resets fields
$('#ajaxform')[0].reset();
}
});
});
And then I have the script which get's picked out from a list of several PHP scripts based on the table variable passed from the form's hidden table input:
PHP:
if($_POST['table'] == "add"){
// Do mysql query which gives me an array
$result = array("foo" => "bar", "captain" => "coke");
echo(json_encode($result));
}
I want to submit my form, have it find the appropriate code in ajax.php and execute it, then return the result of that PHP script to messageResponse div. Where is this failing so miserably?
You should pass the result variable in your success method:
success: function (result) {
console.log(result);
}
In addition:
Set the type of data that you're expecting back from the server:
dataType: 'json'
Set the header of your result as JSON (in your PHP file):
header('Content-Type: application/json; charset=utf-8');
Just add:
$.ajax(...,dataType: "json",...);
just remove action from form use this
<form name="ajaxform" id="ajaxform" method="post" action="#">
i am making a website in which i am to embbed the functionality of delete using multiple checkbox. here is my code. my problem is
1. Ajax call is not working.
2. how can i make search from database for array .
<?php
if(isset($_POST['Delete']))
{
$array=$_POST['check_box'];
}
?>
<form method="post" id="form">
<table width="200" border="1">
<tr>
<td>select</td>
<td>NAme</td>
<td>Action</td>
</tr>
<?php
while($selectnumberarr=mysql_fetch_array($selectnumber))
{
?>
<tr>
<td><input type="checkbox" name="check_box[]" class="check_box" id="<?php $selectnumberarr[0]; ?>" /> </td>
<td><?php echo $selectnumberarr[1]; ?></td>
</tr>
<?php
}?>
<input type="submit" name="Delete" id="delete">
</table>
</form>
and below is my ajax and javascript code.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#delete').click(function() {
$.ajax({
type: "POST",
url: "checkbox.php",
data: $('#form').serialize(),
cache: false,
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
any help would be appriciated
your code is almost correct. You need to remove `onChange="show()" for input checkbox, because if you have jquery then you don't need to put events on HTML elements.
Use jquery 'on' method for compatibility for latest php library.
Replace your jquery code with following jquery code :-
<script>
$(document).ready(function(){
$('#delete').on('click',function()
{
var cat_id = $('.check_box:checked').map(function() {
return this.id;
}).get().join(',');
console.log(cat_id);
$.ajax({
type: "POST",
url: "checkbox.php",
data: { "kw ":cat_id },
datatype:'json',
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
Use ".check_box" instead of "element" in jquery to prevent checks for all checkboxes, instead of desired ones.
Hope it helps.
Why you don't use an array for sending the checkboxes like:
HTML part:
<?php
if (isset($_POST['check_box'])) {
var_dump($_POST['check_box']);
echo "ajax call is working";
}
?>
<form id="form">
<table width="200" border="1">
<tr>
<td>select</td>
<td>NAme</td>
<td>Action</td>
</tr>
<?php
while ($selectnumberarr = mysql_fetch_array($selectnumber)) {
?>
<tr>
<td><input type="checkbox" name="check_box[]" class="check_box" value="<?php echo $selectnumberarr[0]; ?>" /> </td>
<td><?php echo $selectnumberarr[1]; ?></td>
</tr>
<?php
}
?>
</table>
<input type="button"name="delete" id="delete" value="Delete" />
</form>
JQuery part:
<script type="text/javascript">
$(document).ready(function(){
$('#delete').click(function() {
$.ajax({
type: "POST",
url: "checkbox.php",
data: $('#form').serialize(),
cache: false,
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
So you can easily get an array of the selected checkboxes in php with:
$idsArray = $_POST["check_box"];
this looks now like:
array(
"1", "2","etc.."
);
so this array contains all the ids of the selected checkboxes for delete.