doulu7921 2017-11-13 09:50
浏览 232
已采纳

同一页面上的多个有用按钮

I've made a "Useful-Button" with jQuery so user can rate e.g. an answer of a question (like the upvote function here on stackoverflow).

function submitForm() {
    var form = document.myform;
    var dataString = $(form).serialize();
    
    $.ajax({
        type:'POST',
    url:'like_submit.php',
    data: dataString,
    success: function(data){
        $('#myResponse').html(data);
        $('#myResponse').fadeIn().delay(3000).fadeOut();
    }
   });
   return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" class="myform" method="post" name="myform">
    Was this 1. answer helpful?
  <input type="hidden" name="answer_id" value="1" />
  <input  class="label__checkbox" type="checkbox" name="helpful" onclick="submitForm()" />
</form>
<div id="myResponse"></div>

The like_submit.php is like this:

<?php
$helpful = $_POST['helpful'];
$answer_id = $_POST['answer_id'];
echo "Thank you! Helpful? $helpful | AnswerID: $answer_id";
?>

So for one answer it works.

But now I want to add more than one answer and I doesn't know how get the script to work for this case.

If I add a second form...

<form id="myform" class="myform" method="post" name="myform">
Was this 2. answer helpful?
  <input type="hidden" name="answer_id" value="2" />
  <input  class="label__checkbox" type="checkbox" name="helpful" onclick="submitForm()" />
</form>
<div id="myResponse"></div>

... I have two problems. I only get the last POST-data right. If I click the first form, it says: Thank you! Helpful? on | AnswerID: 2

Second problem, the response message appears allways an the first position.

Can anyone help? Many thanks!

</div>
  • 写回答

1条回答 默认 最新

  • dongxin991209 2017-11-13 09:54
    关注

    Get the elements relative to the submitted form

    html: onclick="submitForm(this)"

    js:

    function submitForm(el) {
        var form = $(el).closest('form');
        var dataString = form.serialize();
    
        $.ajax({
            type:'POST',
        url:'like_submit.php',
        data: dataString,
        success: function(data){
            form.next('#myResponse').html(data);
            form.next('#myResponse').fadeIn().delay(3000).fadeOut();
        }
       });
       return false;
    }
    

    function submitForm(el) {
        var form = $(el).closest('form');
        var dataString = form.serialize();
            form.next('#myResponse').html(dataString);
            form.next('#myResponse').fadeIn().delay(3000).fadeOut();
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form id="myform" class="myform" method="post" name="myform">
        Was this 1. answer helpful?
      <input type="hidden" name="answer_id" value="1" />
      <input  class="label__checkbox" type="checkbox" name="helpful" onclick="submitForm(this)" />
    </form>
    <div id="myResponse"></div>
    <form id="myform" class="myform" method="post" name="myform">
    Was this 2. answer helpful?
      <input type="hidden" name="answer_id" value="2" />
      <input  class="label__checkbox" type="checkbox" name="helpful" onclick="submitForm(this)" />
    </form>
    <div id="myResponse"></div>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Matlab求解微分方程,如何用fish2d进行预优?