PHP do-whileループで動的に生成されたフォームを送信するAjax

Question

評価バー（JavaScriptによって生成された進行状況バー）があり、ユーザーは値を選択してそれを送信することができます。問題は、PHPを使用して動的に評価バーを生成することです（do-whileループを使用して）。 AJAXを設定してフォームを認識して送信する方法を理解できません。今は他のものを提出しても、最初のものだけを提出しています。

私のPHPコード：

$editFormAction = $_SERVER['PHP_SELF']; 
if (isset($_SERVER['QUERY_STRING'])) { 
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);} 

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form3")) { 
$insertSQL = sprintf("INSERT INTO tblpersonalidad (idUser, idPost, intEvaluacion, dateFecha) VALUES (%s,%s,%s,%s)", 
        GetSQLValueString($_POST['idUser'], "int"), 
        GetSQLValueString($_POST['idPost'], "int"), 
        GetSQLValueString($_POST['intEvaluacion'], "int"), 
        GetSQLValueString($_POST['dateFecha'], "timestamp"), 
        ); 

mysql_select_db($database_conexionproject_poll, $conexionproject_poll); 
$Result1 = mysql_query($insertSQL, $conexionproject_poll) or die(mysql_error()); 

$insertGoTo = ""; 
if (isset($_SERVER['QUERY_STRING'])) { 
$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?"; 
$insertGoTo .= $_SERVER['QUERY_STRING']; 
} 
header(sprintf("Location: %s", $insertGoTo)); 
} 

do { 
<form id="form3" name="form3"> 

     <div class="progress-user"> 
      <div class="progress-bar-user progress-bar-danger-user"></div> 
      <div class="progress-bar-user progress-bar-warning-user"></div> 
      <div class="progress-bar-user progress-bar-success-user"><span class="rating">0%</span></div> 
    </div> 

     <input class="mi-input" name="intEvaluacion" type="hidden" value="" /> 
     <input type="hidden" name="MM_insert" value="form3" />      
     <input type="hidden" name="intActivo" value="1" /> 
     <input type="hidden" name="idPost" value="<?php echo $row_Datos_polls['idPost']; ?>" /> 
     <input type="hidden" name="idUser" value="<?php echo $_SESSION['MM_IdUser']; ?>" /> 
    </form> 

    } while ($row_Datos_polls = mysql_fetch_assoc($Datos_polls)); 


<script> 

$('.progress-user').on('mousemove', function (e) { 
var self = this; 
var offset = $(self).offset(); 
var width = $(self).width(); 
var relX = Math.round(10 * (e.pageX - offset.left)/width) * 10; 
setBarRating(self, relX); 
$(self).siblings('.mi-input').val(relX); 
}); 

$("#form3").submit(function(a) { 
var url = "<?php echo $editFormAction; ?>"; // the script where you handle the form input. 

$.ajax({ 
     type: "POST", 
     url: url, 
     data: $('#form3').serialize(), // serializes the form's elements. 
     success: function(data) 
     { 
      alert(data); // show response from the php script. 
     } 
    }); 

e.preventDefault(); // avoid to execute the actual submit of the form. 
     }); 

$('.progress-user').click(function() { 
$("#form3").submit(); 
}); 


var setBarRating = function (self, percentage) { 
$(self).find('.progress-bar-success-user span.rating').text(percentage + '%'); 
if (percentage <= 50) { 
$(self).find('.progress-bar-danger-user').width(percentage + '%'); 
$(self).find('.progress-bar-warning-user').width(0); 
$(self).find('.progress-bar-success-user').width(0); 
} else if (percentage > 50 && percentage <= 80) { 
$(self).find('.progress-bar-danger-user').width('50%'); 
$(self).find('.progress-bar-warning-user').width((percentage - 50) + '%'); 
$(self).find('.progress-bar-success-user').width(0); 
} else if (percentage > 80) { 
$(self).find('.progress-bar-danger-user').width('50%'); 
$(self).find('.progress-bar-warning-user').width('30%'); 
$(self).find('.progress-bar-success-user').width((percentage - 80) + '%'); 
} 
}; 
</script> 

私は本当に任意の助けを感謝します。私はAJAX + PHPコードの変更点を認識できませんでした。あなたのお時間をありがとうございました。

Answer 1

あなたはid = "form3"でいくつかのフォームを生成しています。 $（ "form3"）も聞いています。submit（）。あなたは「.progress-ユーザーにクリックを聞くことによって、これらのフォームを送信している：

$('.progress-user').click(function() { $("#form3").submit(); }); 

だから、あなたは上をクリックしますウィッヒの.progressユーザーには関係ない、最初の＃たForm3は、送信されたフォームになります。

ループ内にフォームとバーを作成するときは、フォームとバーに固有のIDを生成する必要があります。 I.E。

$i = 0; 
do { 
<form id="<?php echo 'form' . $i ?>" name="<?php echo 'form' . $i ?>" class="progress-form"> 

    <div class="progress-user" id="<?php 'progress-user' . $i; ?>" data-numer="<?php echo $i; ?>" > 
     <div class="progress-bar-user progress-bar-danger-user"></div> 
     <div class="progress-bar-user progress-bar-warning-user"></div> 
     <div class="progress-bar-user progress-bar-success-user"><span class="rating">0%</span></div> 
</div> 

    <input class="mi-input" name="intEvaluacion" type="hidden" value="" /> 
    <input type="hidden" name="MM_insert" value="form3" />      
    <input type="hidden" name="intActivo" value="1" /> 
    <input type="hidden" name="idPost" value="<?php echo $row_Datos_polls['idPost']; ?>" /> 
    <input type="hidden" name="idUser" value="<?php echo $_SESSION['MM_IdUser']; ?>" /> 
    </form> 
    $i++; //dont forget this :-) 
} while ($row_Datos_polls = mysql_fetch_assoc($Datos_polls)); 

は今、あなたは、独自の一意のIDとその一意のIDを持つ複数のプログレスバーとデータ数の属性を持ついくつかの形式があります。また、ダイナミックに生成されたフォームには、「プログレスフォーム」クラスがあります。そのプログレスバークリックされたものを $('.progress-user').click(function() { var formNumber = $(this).attr('data-number'); $("#form" + fromNumber).submit(); }); この方法では、フォームが送信されていることを確認することができますされています

だから今は、その要素のデータ数をキャッシュ、前のようなプログレスバー上のクリックを聞くことができます。

$('.progress-form').submit(function(e){ 
    var url = "<?php echo $editFormAction; ?>"; 
    var data = $(this).serialize(); 

    $.ajax({ 
     type: "POST", 
     url: url, 
     data: data, 
     success: function(data) 
     { 
      alert(data); // show response from the php script. 
     } 
    }); 
    e.preventDefault(); 
}); 

はだから今、あなたがシリアライズとその進捗バーをクリックし、いない文書の最初の「＃のたForm3」のみのフォームを送っている：今、あなたはまた、あなたの提出リスナーを変更する必要があります。

これが役に立ちます。