Wie System: Looping Formen einzigartige ID, bekommen diese IDs mit jQuery/Javascript zum Posten Individuell

Question

Ich bin nur herum mit einfachen PHP und Java durch den Aufbau meiner eigenen Like-System IP-basiert.

Ich suchte nach einer Lösung, aber bisher kein Glück.

HTML generierte Formen in einer while-Schleife in PHP EOT offensichtlich mit jeder Form eindeutige IDs. Es gibt 25 Formulare mit einer Like-Schaltfläche. Diese Formulare befinden sich in einem Bootstrap-Modal. Also, weil es in einem Modal ist, möchte ich nicht, dass es die Seite aktualisiert und meine Liste Zeige mehr zurücksetzt. Da ich versuche, alle Formen zu bekommen, um ein Like von ID für Element mit Javascript zu übermitteln. Code unten.

Irgendwelche Vorschläge oder andere Ansätze?

HTML - PHP While-Schleife (Formulare innerhalb Modals):

<p id="result{$itemID}"></p> 

<form enctype="multipart/form-data" 
    action="{$postLike}" 
    id="myform{$itemID}" 
    name="{$itemID}" 
    method="post"> 

    <input type="hidden" 
     name="itemids" 
     value="{$itemID}"> 

    <input type="hidden" 
     name="ips" 
     value="{$ips}"> 

    <button id="submit-btn{$itemID}" 
     class="btn btn-{$optionLikeColor}" {$optionLikeDisabled}> 

      <span class="glyphicon glyphicon-thumbs-up glyphr" 
       aria-hidden="true"> 
      </span> {$optionILikeText} {$likes} 

    </button> 

</form> 

PHP:

<?php 

    require 'init.php'; 

if($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['itemids'])){ 

if($link === false){ 
    die("ERROR: Could not connect. " . mysqli_connect_error()); 
} 

$itemsid = mysqli_real_escape_string($link, $_POST['itemids']); 
$itemsip = $_SERVER['REMOTE_ADDR']; 


if ($result = mysqli_query($link, "SElECT * FROM likes WHERE itemID='$itemsid' AND ip='$itemsip'")) { 

    $row_cnt = mysqli_num_rows($result); 

    if($row_cnt > 0){ 
      echo 'You\'ve have already liked this item.'; 
    } else { 

     $sql = "INSERT INTO likes (itemID, ip) VALUES ('$itemsid', '$itemsip')"; 
     if(mysqli_query($link, $sql)){ 
      echo 'Thank you!';  
     } else { 
      echo 'Something went wrong, try again later!'; 
     } 


    } 

} 

} else { 

    echo 'Something went wrong, try again later!'; 

} 

    mysqli_close($link); 

?> 

Javascript arbeiten, aber nur für die erste Form: Also ich vermute, ich muss passiert die Form/id Variable in: $ ('# myform'), $ ('# einfügen'), $ ('# myform: input') und $ ('# Ergebnis')

$('#myform').submit(function(){ 
    return false; 
}); 

$('#insert').click(function(){ 
    $.post( 
    $('#myform').attr('action'), 
    $('#myform :input').serializeArray(), 
    function(result){ 
     $('#result').html(result); 
    } 
    ); 
}); 

JavaScript-Konzept funktioniert offensichtlich nicht: P Vorschläge?

$("[id^='myform']").submit(function(){ 
     var ID = $(this).attr('name'); 
     return false; 
    }); 

    $(document).ready(function(){ 
     $(document).on('click','#submit-btn'+ID,function(){ 
      $.post( 
      $('#myform'+ID).attr('action'), 
      $('#myform${ID} :input').serializeArray(), 
      function(result){ $('#result'+ID).html(result); } 
      ); 
     }); 
    }); 

Answer 1

Geben Sie all Ihren Formularen die gleiche Klasse, oder haben Sie eine Möglichkeit, diese Formulare eindeutig auszuwählen. Sie benötigen keine eindeutigen IDs für alle diese Elemente.

Dann:

$(".myFormClass").on("submit", function() { 
    var $f = $(this); // the form that got submitted 
    $.post( 
    $f.attr('action'), 
    $f.find('input').serializeArray(), 
    function(result){ 
     // not sure where you wanted the result. 
     // The point is that you should select it relative to the form $f that you already know. 
     $f.find('span').html(result); 
    } 
); 
}); 

Answer 2

wirkt wie ein Zauber! Vielen Dank!

$('.myFormClass').submit(function(){ 
     return false; 
    }); 

    $('.myFormClass').click(function() { 
     var $f = $(this); 
     $.post( 
     $f.attr('action'), 
     $f.find('input').serializeArray(), 
     function(result){ 
      $f.find('#submit-btn').remove(), 
      $f.find('#result').html(result); 
     } 
     ); 
    });