按钮onclick刷新页面

Question

我有一个看起来像按钮的 div 样式：

    <form class="ui form segment" name="form" id="myForm" method="POST" style="max-width:950px;">

        <!-- Some fields omitted -->

        <!-- Normal button that has onclick event attached --> 
        <div class="ui blue submit button" id="applyButton" style="width:150px" name="apply">Update</div>


  <!-- 2 submit buttons -->

  <input type ="submit" class="ui blue submit button" id="publish" value = "Publish" style="width:150px" name="publish" onclick="submitForm('/write/submitWork'); this.disabled=true; this.className += ' disabled'; this.value='Sending…'; "/>

  <input class="ui orange submit button" id="saveasdraft" value ="Save as draft" style="width:160px" name="saveasdraft" onclick="submitForm('/write/submitWork'); this.disabled=true; this.className += ' disabled'; this.value='Sending…'; "/>

    </form>

这里是 submitForm() 函数，它根据传入的操作提交表单：

function submitForm(action)
    {
        document.getElementById('myForm').action = action;
        document.getElementById('myForm').submit();
    }

我已将一个 onclick 事件附加到它，从 ajax 请求获取一些数据并将其打印在屏幕上：

$(document).on('click', '#applyButton', function (e) {

    e.preventDefault();
    // for each input radio button
    $('input[type=radio]').each(function () {
        // if the radio button is checked
        if ($(this).is(":checked")) {
            if (!$("#characterList div:contains(" + $(this).val() + ")").length) {
                $('#characterList').append('<div class="ui card"><div class="content"> <div class="header">' + $(this).val() + '</div><div class="description"><p>' + getCharacterData($(this).val()) + '</p></div></div></div>');
            }
        } else {
            $("#characterList div:contains(" + $(this).val() + ")").remove();

        }

    });
});

问题是它会刷新页面，有时会像表单的提交按钮一样工作。我不希望它这样做。

这是一个 link 的实例。（点击字符部分的蓝色 'Update' 按钮）

编辑：

link 要求用户登录，因此您可以使用我做的这个测试登录：

Email: test@hotmail.com

Password: Testuser1

这里还有调用 AJAX 的 getCharacterData() 函数：

function getCharacterData(subject)
        {
        $.ajax({
                url: '/profile/getCharacterTripleData',
                type: 'GET',
                async: false,
                data: { field1: subject},
                success: function (data) {
                //your success code
                response = data;
                },
                error: function (xhr, ajaxOptions, thrownError) {
                //alert("Error: " + thrownError);
             }

            });

            return response;

        }

Answer 1

我不知道你用的是什么 JavaScript 框架。但是您的真实源代码包含 <input class="ui blue submit button" id="applyButton" value = "Update" style="width:150px" name="apply"/>，而不是您声称的 <div class="ui blue submit button" id="applyButton" style="width:150px" name="apply">Update</div>。也许有一些 JavaScript 向每个输入标签添加表单提交，我不知道，JavaScript 太大而无法调试。

将其更改为 <div>，如您在 post 中所述，也许会奏效。

编辑：Alternatively/additionally，您的框架中可能存在一些代码，这些代码会在类提交或按钮上触发。删除那些类并重试。

按钮onclick刷新页面

Button onclick refreshing page

html

jquery

button