Question

好的，我没有得到这个。

我有一个特定类型的表单声明，jQuery将始终处理表单数据并发送一个Ajax-Request，但在表单中，我有Buttons，一次用于Form-Submission（Ajax），一次用于调用特定函数。像这样：

<button data-click="regenUSID">Regenerate</button>

在jQuery中都这样调用：

$(function() {
    $('form.ajax').submit(function(event) {
        event.preventDefault();
        var data = $(this).serializeArray();
        // do stuff with data       
    });

    $('[data-click]').click(function(event) {
        // prevents form submit
        event.preventDefault();
        // calls defined function and passes element that got clicked on
        window[$(this).attr('data-click')](this);
    });
});

现在奇怪的是，如果我单击数据单击按钮，它可以工作，如果我单击预期的提交按钮，它也可以工作，但如果我在表单中有一个正常的输入文本字段并按回车键，＆＃34;提交＆＃34;表单，它执行表单中第一个按钮所做的任何操作，结论，如果表单提交按钮位于数据单击按钮之前，一切正常，但如果数据单击按钮位于提交按钮之前（即是！），将调用数据点击功能。

解决此问题的一种方法是使用隐藏的提交按钮启动表单，尽管这会破坏HTML。

总而言之，它看起来像这样：

<form class="ajax" action="/formhandler.php?register" method="POST" role="form">
    <div class="usidrecommendation">
        <?php $usid = Server::generateUnusedUSID(); ?>
        <h1 class="text-center"><?php echo $usid; ?></h1>
    </div>
    <button data-click="regenUSID">Regenerate</button>

    <input type="password" name="password" id="password" placeholder="enter Password here">

    <button class="btn btn-primary btn-block btn-submit">Check data</button>
</form>

<script>

function regenUSID(from) {
    // do stuff
    console.log(from);
}

$(function() {
    $('form.ajax').submit(function(event) {
        event.preventDefault();
        var data = $(this).serializeArray();
        // do stuff with data
    });

    $('[data-click]').click(function(event) {
        // prevents form submit
        event.preventDefault();
        // calls defined function and passes element that got clicked on
        window[$(this).attr('data-click')](this);
    })
});
</script>

请注意，每个带有类ajax的表单都不应该提交＆＃34;按照＃34;，它总是必须进行ajax-submission并通过JavaScript。客户端始终启用JavaScript，不用担心。

Answer 1

按钮的默认类型为submit，因此当您在文本框中按Enter键时，请单击第一个按钮。尝试：

 <button data-click="regenUSID" type="button">Regenerate</button>

意外的JavaScript（jQuery）行为（函数调用，而不是表单提交）

1 个答案: