[英]Ajax to submit form generated dynamically by PHP do-while loop
I have an evaluation bar(progress bar generated by javascript), users can select a value and click to submit it. 我有一个评估栏(由javascript生成的进度条),用户可以选择一个值并单击提交。 The issue is that I'm using PHP to generate the evaluation bars dynamically (using a do-while loop).
问题是我正在使用PHP动态生成评估栏(使用do-while循环)。 I can't figure out how to setup AJAX to recognized and submit any of the forms.
我无法弄清楚如何设置AJAX以识别和提交任何表单。 Now it's submitting only the first one, even though I submit any of others.
现在它只提交第一个,即使我提交了其他任何一个。
My PHP code: 我的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>
I'll really appreciate any help. 我真的很感激任何帮助。 I haven't could realized what is the modification to the AJAX + PHP code.
我还没有意识到对AJAX + PHP代码的修改是什么。 Many thanks for your time.
非常感谢你的时间。
You're generating several forms with id=”form3”. 你正在生成几个id =“form3”的表单。 You're also listening to $(“form3”).submit().
你也在听$(“form3”)。submit()。 You're submitting those forms by listening clicks to '.progress-user':
您通过点击'.progress-user'来提交这些表单:
$('.progress-user').click(function() { $("#form3").submit(); });
So, not matter wich .progress-user do you click on, the first #form3 will be the form submitted. 所以,无论如何.progress-user你点击,第一个#form3将是提交的表单。
You should generate unique id's to your forms and bars when creating them inside the loop. 在循环中创建表单和条形时,应该为表单和条形成唯一的id。 IE;
IE浏览器;
$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));
Now you have several forms with its own unique id and several progress bars with its unique id and a data-number attribute. 现在,您有多个具有自己唯一ID的表单和几个具有唯一ID和数据编号属性的进度条。 Also, the dinamically generated form have that 'progress-form' class.
此外,动态生成的形式具有“进步形式”类。
So now you can listen to clicks on progress bars like before, then caching the data-number of that element: $('.progress-user').click(function() { var formNumber = $(this).attr('data-number'); $("#form" + fromNumber).submit(); });
所以现在你可以像以前一样听取进度条上的点击,然后缓存该元素的数据编号:
$('.progress-user').click(function() { var formNumber = $(this).attr('data-number'); $("#form" + fromNumber).submit(); });
This way, you can be sure the form being submitted is the one whose progress-bar was clicked. 这样,您可以确保提交的表单是单击其进度条的表单。 Now you should also modify your submit listener:
现在您还应该修改提交侦听器:
$('.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();
});
So now you're serializing and sending only the form whose progress bar was clicked, and not the first '#form3' in the document. 所以现在你要序列化并只发送点击进度条的表单,而不是文档中的第一个'#form3'。
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.