मेरे पास प्रत्येक उपयोगकर्ता के लिए आइटम वाली एक तालिका है और प्रत्येक तालिका में नए आइटम के लिए इनपुट फ़ील्ड हैं।

"जोड़ें" -बटन पर क्लिक करके नया दर्ज किया गया आइटम डेटाबेस में भेजा जाता है और तालिका में प्रदर्शित होता है। यह एक टेबल के लिए सही काम करता है, हालांकि, कई टेबल के लिए नहीं।

मैंने jQuery फ़ंक्शन में आईडी को कक्षाओं में बदलने की कोशिश की है, लेकिन फिर आइटम सभी तालिकाओं में जोड़े जाते हैं और न केवल वांछित में।

यहाँ मेरा कोड है:

Index.php

 <body>
    <div class="container">
   
<?php  
  
$usertables = array();
$usertables[] = 'user1';
$usertables[] = 'user2';
$usertables[] = 'user3';
$usertables[] = 'user4';
                            
foreach ($usertables as $value){
                            
    $query = "SELECT * FROM $value ORDER BY id ASC";
    $statement = $connect->prepare($query);
    $statement->execute();
    $result = $statement->fetchAll();                                               
?>    
            
        <h3><?php echo $value; ?></h3>
           
        <form method="post" id="add_details">
            <input type="hidden" name="value" value="<?= htmlspecialchars($value); ?>" />
            <div class="form-group">
                <label>Item name</label>
                <input type="text" name="item_name" class="form-control" required />
            </div>
            <div class="form-group">
                <label>Height</label>
                <input type="text" name="item_height" class="form-control" required />
            </div>
            <div class="form-group">
                <label>Width</label>
                <input type="text" name="item_width" class="form-control" required />
            </div>
            <div class="form-group">
                <label>Color</label>
                <input type="text" name="item_color" class="form-control" required />
            </div>
            <div class="form-group">
                <input type="submit" name="add" id="add" class="btnn btn-success" value="Add" />
            </div>
        </form>
           
        <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Height</th>
                <th>Width</th>
                <th>Color</th>
            </tr>
         </thead>
         <tbody id="table_data">
<?php
    foreach($result as $row) {
        echo '<tr>
               <td>'.$row["item_name"].'</td>
               <td>'.$row["item_height"].'</td>
               <td>'.$row["item_width"].'</td>
               <td>'.$row["item_color"].'</td>
              </tr>';
    }
?>
        </tbody>
        </table>
                
<?php                 
}   // end of foreach                
?>
              
</div>
</body>
</html>

<script>
    $(document).ready(function(){
        $('#add_details').on('submit', function(event){
            event.preventDefault();
            $.ajax({
                url:"insert.php",
                method:"POST",
                data:$(this).serialize(),
                dataType:"json",
                beforeSend:function(){
                    $('#add').attr('disabled', 'disabled');
                },
                success:function(data){
                    $('#add').attr('disabled', false);
                    if(data.item_name) {
                        var html = '<tr>';
                        html += '<td>'+data.item_name+'</td>';
                        html += '<td>'+data.item_height+'</td>';
                        html += '<td>'+data.item_width+'</td>';
                        html += '<td>'+data.item_color+'</td></tr>';
                        $('#table_data').append(html);
                        $('#add_details')[0].reset();
                    }
            }
        })
    });
});
</script>

सम्मिलित करें.php

<?php

$connect = new PDO("mysql:host=localhost;dbname=usertables", "root", "");

//$tablename = $_GET['tablename'];
$value = $_POST["value"];
//echo $value;
$data = array(
      ':item_name'  => $_POST["item_name"],
      ':item_height'  => $_POST["item_height"],
      ':item_width'  => $_POST["item_width"],
      ':item_color'  => $_POST["item_color"],
); 

$query = "INSERT INTO $value 
                (item_name, item_height, item_width, item_color) 
        VALUES (:item_name, :item_height, :item_width, :item_color)";

$statement = $connect->prepare($query);

if($statement->execute($data)) {
    $output = array(
       'item_name' => $_POST['item_name'],
       'item_height' => $_POST['item_height'],
       'item_width' => $_POST['item_width'],
       'item_color' => $_POST['item_color'],
    );

    echo json_encode($output);
}
?>

चूंकि मैं jQuery के लिए नया हूं, इसलिए मैं पूछना चाहता हूं कि केवल संबंधित तालिका में jquery-Add-function चलाने का कोई आसान तरीका है या नहीं?

आपके सहयोग के लिए धन्यवाद!

2
Columbus 27 सितंबर 2020, 14:55

1 उत्तर

सबसे बढ़िया उत्तर

आप विशेष उपयोगकर्ता तालिका के लिए $value की आईडी के रूप में tbody का उपयोग कर सकते हैं और जब उपयोगकर्ता सबमिट बटन पर क्लिक करता है तो $(this).find("input[name=value]").val() का उपयोग करके इनपुट का मूल्य प्राप्त करता है और फिर डेटा को जोड़ने के लिए $('#' + value).append(html); का उपयोग करता है। केवल विशेष उपयोगकर्ता तालिका के लिए tbody। इसके अलावा, केवल आपको अपने html कोड में परिवर्तन करने की आवश्यकता है, जो कि tbody में आईडी जोड़ रहा है। :<tbody id="<?= htmlspecialchars($value); ?>">

डेमो कोड :

$('form').on('submit', function(event) {
  event.preventDefault();
  var $this = $(this)
  var value = $(this).find("input[name=value]").val(); //get hidden input value
  console.log(value)
  /* $.ajax({
     url: "insert.php",
     method: "POST",
     data: $(this).serialize(),
     dataType: "json",
     beforeSend: function() {
       $('#add').attr('disabled', 'disabled');
     },
     success: function(data) {
       $('#add').attr('disabled', false);
       if (data.item_name) {
         var html = '<tr>';
         html += '<td>' + data.item_name + '</td>';
         html += '<td>' + data.item_height + '</td>';
         html += '<td>' + data.item_width + '</td>';
         html += '<td>' + data.item_color + '</td></tr>';*/
  var html = "<tr><td colspan='4'>append me</td></tr>";
  $('#' + value).append(html); //append data 
  $this[0].reset();

  /* }
    }
  })*/

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="add_details">
  <input type="hidden" name="value" value="something" />
  <div class="form-group">
    <label>Item name</label>
    <input type="text" name="item_name" class="form-control" required />
  </div>
  <div class="form-group">
    <input type="submit" name="add" id="add" class="btnn btn-success" value="Add" />
  </div>
</form>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Height</th>
      <th>Width</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody id="something">

  </tbody>
</table>
<form method="post" id="add_details">
  <input type="hidden" name="value" value="something1" />
  <div class="form-group">
    <label>Item name</label>
    <input type="text" name="item_name" class="form-control" required />
  </div>
  <div class="form-group">
    <input type="submit" name="add" id="add" class="btnn btn-success" value="Add" />
  </div>
</form>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Height</th>
      <th>Width</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody id="something1">

  </tbody>
</table>
0
Swati 27 सितंबर 2020, 15:43