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。（单击字符部分中的蓝色＆＃39;更新＆＃39;按钮）

修改

该链接要求用户登录，以便您可以使用我所做的测试登录：

电子邮件：test@hotmail.com

密码：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在每个输入标签中添加一个表单提交，我不知道，JavaScripts太大而无法调试。

将其更改为<div>，如您在帖子中所描述的那样，可能会有效。

编辑：或者/另外，您的框架中可能存在某些代码，这些代码在类提交或按钮上触发。删除这些类，然后重试。

按钮点击刷新页面

1 个答案: