doufei8250
2018-09-20 11:15
浏览 69
已采纳

AJAX表单只执行一次（第一次输入）

I looped output of sql select rows via while loop. Each rows have own form. Only first form is working. Others forms are just refreshing page withour any results. On form submit via AJAX update.php function is executed. Its only working at first input field and don't know how to trigger others.

PHP

echo " <div class=\"col-6 flex-vcenter-items fs-1\">
    <form id='form".$row["id"]."' action='' method='POST'>
         <input id='id' name='potnik' value='".$row["id"]."' type='hidden' /> 
         <input id='cas' class=\"form-control cas".$row["id"]." fancy-border\" type=\"text\" name=\"posodobljeni_cas\"/>
         <input class='btn btn-outline-primary' id='submit' type='submit' value='Nastavi uro'>
     <label id=\"info\"></label>
 </form>
</div>";

JS

$( document ).ready(function() {
//Async update
    $(function () {
        let idrow = $("#id").val();
        $('#form'+idrow).on('submit', function (e) {

            let updaterow = "update.php?id=";
            console.log(updaterow + idrow);
            e.preventDefault();

            $.ajax({
                type: 'post',
                url: updaterow + idrow,
                data: $('#form'+idrow).serialize(),
                success: function () {
                    console.log('ura posodobljena');
                    //Koda za vstavljanje
                    console.log("Prejšnji čas",$("#id-ura"+idrow).text());
                    $("#id-ura"+idrow).replaceWith( $(".cas"+idrow).val() );
                    console.log("Novi čas",$(".cas"+idrow).val());
                }
            });
        });
    });
});
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • duandi4238 2018-09-20 11:31
    已采纳

    Basic HTML rule is each element has unique id, since you are creating forms in loop i will use classes instead of id's

    echo " <div class=\"col-6 flex-vcenter-items fs-1\">
    <form class='form' data-id='".$row["id"]."' action='' method='POST'>
         <input  name='potnik' value='".$row["id"]."' type='hidden' /> 
         <input  class=\"form-control cas".$row["id"]." fancy-border\" type=\"text\" name=\"posodobljeni_cas\"/>
         <input class='btn btn-outline-primary' type='submit' value='Nastavi uro'>
        <label class=\"info\"></label>
    </form>
</div>";

    Now i will change jQuery code according to the class:-

    $( document ).ready(function() {
    $('input[type=submit]').on('click', function (e) {
        e.preventDefault();
        var obj = $(this);
        let idrow = obj.closest("form").data('id'); // i have used data-id in forms
        let updaterow = "update.php?id=";
        $.ajax({
            type: 'post',
            url: updaterow + idrow,
            data: obj.closest("form").serialize(),
            success: function () {
                //change these code also based on classes
                console.log('ura posodobljena');
                console.log("Prejšnji čas",$("#id-ura"+idrow).text());
                $("#id-ura"+idrow).replaceWith( $(".cas"+idrow).val() );
                console.log("Novi čas",$(".cas"+idrow).val());
            }
        });
    });
});
    点赞 打赏 评论

报告相同问题？

提交

相关推荐 更多相似问题