提交类似的 ajax 表单后留在页面上

Question

也许你可以提供帮助，因为我有一个 - 我认为 - ajax 的特殊问题。

我想做的事 我有一个新闻源，在帖子之间我显示包含表单的 div，例如民意调查。应该允许用户交互并提交结果。

目标是什么 用户应该进行交互，提交结果并停留在页面上，查看我将通过 JavaScript/jQuery 显示的结果文本。

有什么问题？ 带有元素的 div 是随机创建的，因此有多个彼此相似的元素，只是内容不同（随机）。有技能要求和技能等级。我会处理 ID，但不知道如何点击。

我有什么？ 该脚本到目前为止有效。我可以成功地将数据插入表中，并且我有一个尊重所有“股票脚本”的脚本，但只对我点击的那个做出反应。

代码在哪里？ 这是我当前的代码。 这些是 div 容器和表单：

<div class="w3-white w3-center"><h3>Please rate '.$fname.' '.$lname.'&#039;s '.$skillname.'-skill '.$skid.'.</h3>
        <form name="skill_rating"   method="post" id="'.$lname.$skillname.'">
            <input type="hidden" name="sid" id="sid" value="'.$skid.'" />
            <input type="hidden" name="aid" id="aid" value="'.$aid.'" />

          <span>
            <input type="radio" name="rating" value="1" checked> 1
            <input type="radio" name="rating" value="2"> 2
            <input type="radio" name="rating" value="3"> 3
            <input type="radio" name="rating" value="4"> 4
            <input type="radio" name="rating" value="5"> 5
            <input type="radio" name="rating" value="6"> 6
            <input type="radio" name="rating" value="7"> 7
            <input type="radio" name="rating" value="8"> 8
            <input type="radio" name="rating" value="9"> 9
            <input type="radio" name="rating" value="10"> 10    <br>                                                                      
         </span>

         <input type="submit" name="submit" />

    </form>
</div>

第二个：

    <div class="w3-white w3-center"><h3>Does '.$conx_ufn.' '.$conx_uln.' have the skill '.$skill.'?</h3>
        <form id="'.$conx_usr.$skill_id.'" name="skill_request" class="skill_request" method="post">

                <input type="hidden" name="uid" value="'.$uid.'" />
                <input type="hidden" name="usr" value="'.$conx_usr.'" />
                <input type="hidden" name="skid" value="'.$skill_id.'" />           
                <span>
                  No
                  <input type="radio" name="vote" value="0">
                  Yes
                  <input type="radio" name="vote" value="1">
                </span>

                <input type="submit" name="submit1" value="submit" class="submit1">                                 
        </form>
    </div>

脚本本身就如您现在所见。但是当为两种形式使用两个函数时它不起作用，即使使用#skill_rating 和#skill_request 或尝试以不同的方式处理它。

$(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'feed_skill_rating.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
        $(this).parent().removeClass("w3-white").css("background-color", "yellow").html("Thank you for the rating. You rated <? echo $fname ?> on a skill.");
        });

});

对此有什么解决方案？我已经尝试了一些东西，但直到现在都没有成功。 提前致谢。

编辑：Randall 的 ID 是正确的，并且由于某种奇怪的原因，我认为我认为 ID 部分是不可能的。错误的。它是。我将它应用到我的代码中。

编辑通知：我添加了一个单独工作的脚本。更改了描述。

Answer 1

同时将action="feed_skill_request.php"标签从你当前的表单中去掉。

$('#".$formId."').submit(function() {
    $.post('feed_skill_request.php', $(this).serialize(), function(res) {
        alert('Response from the form post: '+res)
        // $('#success-message').html(res)
    })
})

Answer 2

我认为让提交输入 type="button" 会起作用