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-user'来提交这些表单：

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

所以，无论如何.progress-user你点击，第一个＃form3将是提交的表格。

在循环中创建表单和条形时，应该为表单和条形成唯一的id。即;

$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'。

希望这会有所帮助。

Ajax提交由PHP do-while循环动态生成的表单

1 个答案: