时间戳

首页 > 解决方案 > Jquery ajax发布多行输入 - 只是输入值的第一行发布

javascript - Jquery ajax发布多行输入 - 只是输入值的第一行发布

问题描述

我有一个大问题，我没有找到任何解决方案来解决这个问题。问题：当我点击更新按钮时，我想发布行的值。（如果我点击第一行更新按钮，然后发布第一行输入的值，如果我点击第二行更新按钮，然后发布第二行输入的值等等）

现在只发布第一行输入的值，不管点击了哪个行更新按钮。（因为我不知道如何在代码的 javascript 部分使用表单 id）

有多个表单（每行），但是当我尝试在代码的 javascript 部分发布姓氏、名字和重要性值的值时，我不知道如何使用表单的 id ({$formcount})。我希望有人可以帮助我，因为我快疯了。（我在stackoverflow上查看了很多类似的问题和解决方案，但我无法解决问题）。非常感谢。

<table>
    {counter start=0 print=false name=fcount}
    {foreach item=teamplayer from=$squad}
    {counter assign=formcount name=fcount}
    {if $teamplayer.position != 0}
    <tr>
        <form action="edit_clubs.php" id="{$formcount}" name="upd" method="post" onsubmit="return false">

            <input type="hidden" name="myseason" id="season" value="{$season}" />
            <input type="hidden" name="update" id="update" value="1" />
            <input type="hidden" name="myplayer" id="myplayer" value="{$teamplayer.id_person}" />
            <input type="hidden" name="myclub" id="myclub" value="{$club.id}" />
            <td><input type="text" id="lastname{$teamplayer.id_person}" name="lastname" value="{$teamplayer.lastname}" size="8" maxlength="8"></td>

            <td><input type="text" id="firstname{$teamplayer.id_person}" name="firstname" value="{$teamplayer.firstname}" size="8" maxlength="8"></td>

            <td><input type="text" id="importance{$teamplayer.id_person}" name="importance" value="{$teamplayer.importance}" size="8" maxlength="8"></td>
            <td>

                <a data-target="#upd" class="update" data-myseason="{$season}" data-myplayer="{$teamplayer.id_person}" data-myclub="{$club.id}">Update</a>
                <div class="loader"></div>
            </td>


    </tr>
    {/if}

    </form>
    {/foreach}
</table>

<script type = "text/javascript"
src = "http://code.jquery.com/jquery-3.3.1.min.js" > < /script>


    <script type = "text/javascript" >
    $('.update').click(function() {

        var myplayer = $(this).attr('data-myplayer');
        var myseason = $(this).attr('data-myseason');
        var myclub = $(this).attr('data-myclub');
        var lastname = $('input[name=lastname]').val();
        var firstname = $('input[name=firstname]').val();
        var importance = $('input[name=importance]').val();
        var dataString = 'myseason=' + myseason + '&update=1&' + 'myplayer=' + myplayer + '&' + 'myclub=' + myclub + '&' + 'lastname' + myplayer + '=' + lastname + '&' + 'firstname' + myplayer + '=' + firstname + '&' + 'importance' + myplayer + '=' + importance;
        $.ajax({
            url: 'edit_clubs.php',
            type: 'POST',
            data: dataString,
        });
    });

</script>

标签： javascriptphpjqueryajaxforms

解决方案

您需要根据按下的按钮进行选择，例如，您可以使用按钮查找<tr>然后搜索字段。

$('.update').click(function() {

    var myplayer = $(this).attr('data-myplayer');
    var myseason = $(this).attr('data-myseason');
    var myclub = $(this).attr('data-myclub');
    var lastname = $(this).closest('tr').find('input[name=lastname]').val();
    var firstname = $(this).closest('tr').find('input[name=firstname]').val();
    var importance = $(this).closest('tr').find('input[name=importance]').val();
    // don't build the post data by hand
    //var dataString = 'myseason=' + myseason + '&update=1&' + 'myplayer=' + myplayer + '&' + 'myclub=' + myclub + '&' + 'lastname' + myplayer + '=' + lastname + '&' + 'firstname' + myplayer + '=' + firstname + '&' + 'importance' + myplayer + '=' + importance;
    $.ajax({
        url: 'edit_clubs.php',
        type: 'POST',
        data: {
            myseason: myseason,
            update: '1',
            myplayer: myplayer,
            myclub: myclub,
            ['lastname'+myplayer]: lastname,
            ['firstname'+myplayer]: firstname,
            ['importance'+myplayer]: importance
        },
    });
});

此外，id 在文档中必须是唯一的，因此您不能让表单中的所有字段都具有与所有其他表单相同的 id。

推荐阅读