jQuery + Ajax form submission, PHP doesn't get any data - php

I am trying to submit a form that only has a radiobutton group with name=radiob. This is the script I am using for submitting data:
<script type="text/javascript">
$(function() {
$("#myForm").submit(function() {
var dataString = $(this).serialize();
$.ajax({
type: "POST",
url: "index.php?p1=<?php echo $_GET['p1']; ?>",
data: dataString,
success: function() {
$("#ppm").fadeOut("slow");
$("#ppmPlugin").load('?p1=<?php echo $_GET['p1'];?>&result=true');
}
});
return false;
});
});
</script>
But this is what I get in my PHP script:
$_POST array - empty
Array ( )
$_GET array
Array ( [p1] => xxx [result] => true )
But if I alert(dataString); I get radiob=2, that is, the value depending on the radiobutton selected..
How do I fix this problem?

I've tested your code and it works fine. Perhaps you have some kind of redirect in index.php?p1=xxx.
P.S. Tested with this code:
<?php $_GET['p1'] = 1; ?>
<form id="myForm">
<input type="radio" name="radiob" value="1" />
<input type="radio" name="radiob" value="2" />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
$(function() {
$("#myForm").submit(function() {
var dataString = $(this).serialize();
$.ajax({
type: "POST",
url: "index.php?p1=<?php echo $_GET['p1']; ?>",
data: dataString,
success: function(data) {
alert(data);
}
});
return false;
});
});
</script>
And in index.php I have
<?php var_dump($_GET, $_POST); ?>

Related

Use AJAX Return value to PHP function

My ajax successfully return the value but my problem is I can't use the value to my function. How do I convert this div to a value?
<?php
echo $ajax_user_id = '<div id="result"></div>'; //value can display here
getName($ajax_user_id); //value wont work here
?>
<form method="post" id="registerSubmit">
<input type="text" name="user_id" id="user_id">
<button id="submit" type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
$.ajax({
url: "test.php",
method: "post",
data: $(this).serialize(),
dataType: "text",
success: function(Result) {
$('#result').text(Result)
}
})
});
});
</script>
You can't use it that way.because jQuery is a scripting language which runs in browser when DOM is fully loaded and elements are available to make selectors.While php is server side language which runs on server way before page load.anyway to fulfill your need you can try something like this.
<form method="post" id="registerSubmit">
<input type="text" name="user_id" id="user_id">
<button id="submit" type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
$.ajax({
url: "test.php",
method: "post",
data: $(this).serialize(),
dataType: "text",
success: function(Result) {
$('#result').text(Result);
getNameAjax(Result);
}
})
});
});
function getNameAjax(val)
{
$.ajax({
type: "POST",
url: GetNameAjax.php,
data:{'user_id':val},
success: function(res){
$('#name').html(res);
}
});
}
</script>
GetNameAjax.php file you can write like this
$ajax_user_id=$_POST['user_id'];
function getName($ajax_user_id)
{
return "name on the basis of id";
}

On button click perform ajax for sending values in forms are in while loop

How can I send input values through AJAX on button click? My code is below. Thanks in advance.
while
{
<form class="commentform">
<input type="hidden" class="proid" name="proid" value="<?=$rr['id']?>">
<input type="text" class="form-control" name="comval" placeholder="Write a comment.." autocomplete="off">
<button class="btn btn-post" type="button">Post</button>
</div>
</form>
}
$(document).ready(function() {
$(document).on('click', '.btn-post', function(){
var thePostID = $(this).val;
$.ajax({
url: 'fetch_comments.php',
data: { postID: thePostID },
type: 'POST',
success: function() {
alert(data);
}
});
Firstly, the correct method is $(this).val(), not just $(this).val.
Secondly, you can simplify your code by getting the data from the closest form element using serialize(). Try this:
$(document).on('click', '.btn-post', function() {
var $form = $(this).closest('form');
$.ajax({
url: 'fetch_comments.php',
data: $form.serialize(),
type: 'POST',
success: function() {
alert(data);
}
});
});
$("form").serialize();
Serialize a form to a query string, that could be sent to a server in an Ajax request.

Ajax not posting when value based on selectbox

What I have here is ajax that's post information into textbox from database. This ajax work's in input field, but when I tried to use select box it doesn't working. Why is that?
not working
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
working
<input name="tag" id="tag" type="text" value="" />
Index.php
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
<input name="output" id="output" type="text" value="" />
<script type="text/javascript">
$(document).ready(function()
{
$('input[id="tag"]').change(function()
{
var prjt_code = $("#tag").val();
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});
</script>
autocomplete-ajax.php
<?php
if(isset($_POST['prjt_code'])) {
$prjt_code = $_POST['prjt_code'];
$sql = $mysqli1->query("SELECT * FROM project WHERE project='$prjt_code'");
while($row1 = $sql->fetch_assoc())
{
$code = $row1['project_code'];
}
echo $code;
}
?>
You are targeting input[id="tag"] when you want select[id="tag"]
http://jsfiddle.net/releaf/U28jb/
$(document).ready(function() {
$('select[id="tag"]').on('change', function() {
var prjt_code = $("#tag").val();
alert(prjt_code);
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});

jquery, get data via ajax then submit form

I'm trying to get data via ajax then send it through a form. However it doesn't seem to be working. Any ideas what im doing wrong?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form method="get" action="test.php">
<input id="myvar" type="hidden" name="albumid" />
<button type="submit" id="btnsubmit">Submit</button>
</form>
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
</script>
newAlbum.php
<?PHP echo '11'; ?>
test.php
<?php echo $_GET["albumid"]; ?>
Okay try adding as follows:
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
async:false,
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
As someone else pointed out - you need to add the data parameter. But I would also use $(this).serialize(), since that will fetch all form input elements.
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
data: $(this).serialize(),
success: function(data){
var album = data;
$('#myvar').val(album);
},
error : function(data) {
console.log(data);
}
});
});
</script>
Try receiving the data as JSON
$.getJSON()

jQuery send message from form

How to send some message to other php file? I should to see "Loading" or result from my imput. I try to find some answer even this code is from this place, but still dosn't work.
I have:
<form>
something<input name="sthis" type="text" />
<input type="submit" value="submit" id="submit" />
</form>
<script type="text/javascript">
$(function(){
$('submit').click(function(){
$('#container').append('loading');
var sthis = $('#sthis').val();
$.ajax({
url: 'form1.php' ,
type: 'POST',
data: 'sthis: ' + sthis,
success: function(result){
$('#container').append('<p>' + result + '</p>')
}
});
return false;
});
});
});
</script>
Form1.php
<?php
$str = $_POST['sthis'];
echo $str;
}
?>
Any ideas?
Try this, I think should be like
data: {"sthis": sthis},
<form id="form1">
<input name="sthis" type="text" />
<input type="button" value="submit" id="submit" />
</form>
<script type="text/javascript">
$('#submit').click(function(){
$('#container').append('loading');
var data = $('#form1').serialize();
$.ajax({
url: 'form1.php' ,
type: 'POST',
data: data,
success: function(result){
$('#container').append('<p>' + result + '</p>')
}
});
return false;
});
</script>
This will send all data from your form to php file
So there are some things you have to change in your script:
$(function(){
$(':submit').click(function(event){
event.stopPropagation();
$('#container').append('loading');
var sthis = $('#sthis').val();
$.ajax({
url: 'form1.php' ,
type: 'POST',
data: {'sthis': sthis},
success: function(result){
$('#container').append('<p>' + result + '</p>');
}
});
return false;
});
});
First there is an extra }); at the end you can remove.
Your input field must have an id with the name sthis, not just a name, so you can access it with $("#sthis"), like this:
<input name="sthis" type="text" id="sthis" />
3rd, change your the data line so it look like this:
data: {'sthis': sthis},
Also, to capture the event of the button you have to use $(':submit'), watch for the :

Categories