javascript - how to pass multiple parameter in ajax call using jquery

Greeting of the Day!!!

I am facing problem in passing parameters with ajax URL. i am trying to send multiple data using jquery $.ajax method to my php script but i can pass only single data when i concatenate multiple data. when I try to update another fields but that field not update and first one is updated. only first field update. remains fields are not update. I am facing problem to update another fields. and also I try to pass multiple parameter in ajax URL but getting error. not update any fields.
Please check my code and give me solution.

I hope you all are understand.

Thank You!!!

Here is my code:

<?php
include("connect.php");
?>
<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta charset="utf-8">
    <title>Editable Tables using jQuery - jQuery AJAX PHP</title>   
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="container">    
      <div style="text-align:center;width:100%;font-size:24px;margin-bottom:20px;color: #2875BB;">Click on the underlined words to edit them</div>
      <div class="row">
        <table class= "table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th colspan="1" rowspan="1" style="width: 180px;" tabindex="0">FName</th>
                    <th colspan="1" rowspan="1" style="width: 220px;" tabindex="0">LName</th>
                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Email</th>

                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Gender</th>
                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Address</th>
                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">City</th>
                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Course</th>
                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Hobby</th>
                </tr>
            </thead>

            <tbody>
                <?php
                $query = mysql_query("SELECT * FROM student_data");
                $i=0;
                while($fetch = mysql_fetch_array($query))
                {
                 if($i%2==0) $class = 'even'; else $class = 'odd';
                 echo'<tr class="'.$class.'">
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['fname'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['lname'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['email'].'</span></td>

                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['gender'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['address'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['city'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['course'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['hobby'].'</span></td>
             </tr>';                            
         }
         ?>
     </tbody>
 </table>
</div>
<script src="assets/js/jquery.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script> 
<script type="text/javascript">
    jQuery(document).ready(function() {  
        $.fn.editable.defaults.mode = 'popup';
        $('.xedit').editable();     
        $(document).on('click','.editable-submit',function(){
         var x = $(this).parents('td').children('span').attr('id');
         var y = $('.input-sm').val();
         var z = $(this).parents('td').children('span');
         alert(x);
         alert(y);
         alert(z);
         $.ajax({
            url:"process.php?id="+x+"&fname="+y,
            type: 'GET',
            success: function(s){
               if(s == 'city'){
                   $(z).html(y);}
                   if(s == 'error') {
                       alert('Error Processing your Request!');}
                   },
                   error: function(e){
                       alert('Error Processing your Request!!');
                   }
               });
     });
    });
</script>
</div>
</body>
</html>

Here is my another file:

<?php
include("connect.php");
if($_GET['id'])
{
    $id = $_GET['id'];
    $fname = $_GET['fname'];
    $lname=$_GET['lname'];
    $email=$_GET['email'];

    $gender=$_GET['gender'];
    $address=$_GET['address'];
    $city=$_GET['city'];
    $course=$_GET['course'];
    $hobby = explode(',', $_GET['hobby']);
    if(mysql_query("UPDATE student_data SET fname='$fname', lname = '$lname', email = '$email', gender='$gender', address='$address', city='$city', course='$course', hobby='$hobby' where id='$id'"));
    echo 'success';
}
?>

Here Ajax Code :

<script type="text/javascript">
    jQuery(document).ready(function() {  
        $.fn.editable.defaults.mode = 'popup';
        $('.xedit').editable();     
        $(document).on('click','.editable-submit',function(){
         var x = $(this).parents('td').children('span').attr('id');
         var y = $('.input-sm').val();
         var z = $(this).parents('td').children('span');
         alert(x);
         alert(y);
         alert(z);
         $.ajax({
            url:"process.php?id="+x+"&fname="+y,
            type: 'GET',
            success: function(s){
               if(s == 'city'){
                   $(z).html(y);}
                   if(s == 'error') {
                       alert('Error Processing your Request!');}
                   },
                   error: function(e){
                       alert('Error Processing your Request!!');
                   }
               });
     });
    });
</script>

Greeting of the Day!!!

I hope you all are understand.

Thank You!!!

Here is my code:

<?php
include("connect.php");
?>
<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta charset="utf-8">
    <title>Editable Tables using jQuery - jQuery AJAX PHP</title>   
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="container">    
      <div style="text-align:center;width:100%;font-size:24px;margin-bottom:20px;color: #2875BB;">Click on the underlined words to edit them</div>
      <div class="row">
        <table class= "table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th colspan="1" rowspan="1" style="width: 180px;" tabindex="0">FName</th>
                    <th colspan="1" rowspan="1" style="width: 220px;" tabindex="0">LName</th>
                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Email</th>

                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Gender</th>
                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Address</th>
                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">City</th>
                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Course</th>
                    <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Hobby</th>
                </tr>
            </thead>

            <tbody>
                <?php
                $query = mysql_query("SELECT * FROM student_data");
                $i=0;
                while($fetch = mysql_fetch_array($query))
                {
                 if($i%2==0) $class = 'even'; else $class = 'odd';
                 echo'<tr class="'.$class.'">
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['fname'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['lname'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['email'].'</span></td>

                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['gender'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['address'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['city'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['course'].'</span></td>
                 <td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['hobby'].'</span></td>
             </tr>';                            
         }
         ?>
     </tbody>
 </table>
</div>
<script src="assets/js/jquery.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script> 
<script type="text/javascript">
    jQuery(document).ready(function() {  
        $.fn.editable.defaults.mode = 'popup';
        $('.xedit').editable();     
        $(document).on('click','.editable-submit',function(){
         var x = $(this).parents('td').children('span').attr('id');
         var y = $('.input-sm').val();
         var z = $(this).parents('td').children('span');
         alert(x);
         alert(y);
         alert(z);
         $.ajax({
            url:"process.php?id="+x+"&fname="+y,
            type: 'GET',
            success: function(s){
               if(s == 'city'){
                   $(z).html(y);}
                   if(s == 'error') {
                       alert('Error Processing your Request!');}
                   },
                   error: function(e){
                       alert('Error Processing your Request!!');
                   }
               });
     });
    });
</script>
</div>
</body>
</html>

Here is my another file:

<?php
include("connect.php");
if($_GET['id'])
{
    $id = $_GET['id'];
    $fname = $_GET['fname'];
    $lname=$_GET['lname'];
    $email=$_GET['email'];

    $gender=$_GET['gender'];
    $address=$_GET['address'];
    $city=$_GET['city'];
    $course=$_GET['course'];
    $hobby = explode(',', $_GET['hobby']);
    if(mysql_query("UPDATE student_data SET fname='$fname', lname = '$lname', email = '$email', gender='$gender', address='$address', city='$city', course='$course', hobby='$hobby' where id='$id'"));
    echo 'success';
}
?>

Here Ajax Code :

<script type="text/javascript">
    jQuery(document).ready(function() {  
        $.fn.editable.defaults.mode = 'popup';
        $('.xedit').editable();     
        $(document).on('click','.editable-submit',function(){
         var x = $(this).parents('td').children('span').attr('id');
         var y = $('.input-sm').val();
         var z = $(this).parents('td').children('span');
         alert(x);
         alert(y);
         alert(z);
         $.ajax({
            url:"process.php?id="+x+"&fname="+y,
            type: 'GET',
            success: function(s){
               if(s == 'city'){
                   $(z).html(y);}
                   if(s == 'error') {
                       alert('Error Processing your Request!');}
                   },
                   error: function(e){
                       alert('Error Processing your Request!!');
                   }
               });
     });
    });
</script>

Share Improve this question edited May 24, 2017 at 5:19 asked May 24, 2017 at 4:59 Hardik Chapla 4347 silver badges26 bronze badges

1 @Enstage Yes It's not live but this is demo when I correct this code that time I'll change. Thank You. – Hardik Chapla Commented May 24, 2017 at 5:04
Please have a look at $( "form" ).serialize(); method from jquery – Srishin Kp Commented May 24, 2017 at 5:08
Okay @SrishinKp Thank You!! – Hardik Chapla Commented May 24, 2017 at 5:11

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

The issue is here:

url:"process.php?id="+x+"&fname="+y,

here you are sending only id and fname and in php script you are trying to get:

$id = $_GET['id'];
$fname = $_GET['fname'];
$lname=$_GET['lname'];

ans so many parameters, which is wrong.

The correct approach to send multiple parameter is:

data: {
    key1: value1,
    key2: value2,
    key3: value3,
    and so on
}

or format the proper url by appending all the key : value in it like:

key1=value1&key2=value2&key3=value3

For Sending Single Parameter

data: "id="+id,

For Sending Multiple Parameters

data: {
    id: id,
    fname: fname
},

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to pass multiple parameter in ajax call using jquery - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)