Question

我是HTML和javascript的初学者，所以寻求一些帮助。我有一个表单，它有一个提交按钮。当我点击提交按钮时，按钮的名称将会改变，它将执行一些操作。当我再次点击按钮时，我必须做不同的动作。这是我的代码。

HTML：

        <form name="myform" method="post" onsubmit="return false">

        <input type="submit" id="reschedule" value="reschedule" onclick="changeContent()"/>

Javascript是：

        function changeContent(ref){
        alert(id)
        document.getElementById("reschedule").value="Submit"
        var editables = document.getElementsByClassName('editableText');
        for (var i = 1; i < editables.length; i++) {
            var newstate = !editables[i].isContentEditable;
            editables[i].contentEditable = newstate;
            editables[i].bgcolor='#FF0000'
        }
        if (document.getElementById("Submit").click) {
            alert("submit")
        }
    }

因此，当我点击重新安排时，按钮名称将更改为提交。现在，当我需要点击提交功能时，我需要做一些动作。我怎么能这样做。

Answer 1

你应该在功能结束时return false;，这样你的页面就不会刷新，你可以在同一页面上做任何事情。使用以下javascript代码

        function changeContent(ref){
        alert(id)
        document.getElementById("reschedule").value="Submit"
        var editables = document.getElementsByClassName('editableText');
        for (var i = 1; i < editables.length; i++) {
            var newstate = !editables[i].isContentEditable;
            editables[i].contentEditable = newstate;
            editables[i].bgcolor='#FF0000'
        }
        if (document.getElementById("Submit").click) {
            alert("submit")
        }
        return false;
    }

Answer 2

我想到的第一个解决方案是检查按钮的名称，并根据该值执行一些操作。例如：

function changeContent(ref){
    if(document.getElementById("reschedule").value == "reschedule") {
        alert(id)
        document.getElementById("reschedule").value="Submit"
        var editables = document.getElementsByClassName('editableText');
        for (var i = 1; i < editables.length; i++) {
            var newstate = !editables[i].isContentEditable;
            editables[i].contentEditable = newstate;
            editables[i].bgcolor='#FF0000'
        }
    }
    else if(document.getElementById("reschedule").value == "Submit") {
        // do something else
    }
}

这是你在找什么？

Answer 3

尝试使用按钮，单击提交按钮提交后，页面将与您的操作一起刷新，尝试使用按钮

更新按钮

 <input type="button" id="reschedule" value="reschedule" onclick="changeContent()"/>

然后像这样更改你的java脚本函数

  function changeContent(ref){
        alert(id)
        document.getElementById("reschedule").value="Submit"
        var editables = document.getElementsByClassName('editableText');
        for (var i = 1; i < editables.length; i++) {
            var newstate = !editables[i].isContentEditable;
            editables[i].contentEditable = newstate;
            editables[i].bgcolor='#FF0000'
        }

        if (document.getElementById("Submit").click) {
            alert("submit");
             return true;
        }
        return false;
    }

更新选项：

您可以在javascript函数中使用按钮调用您的操作：

 document.your_form_name.action = "your_action_name";
 document.your_form_name.submit();

Answer 4

应该是：

function changeContent()
{
    document.getElementById("reschedule").value = "Submit";
    var editables = document.getElementsByClassName('editableText');
    for (var i = 1; i < editables.length; i++) 
    {
        var newstate = !editables[i].isContentEditable;
        editables[i].contentEditable = newstate;
        editables[i].bgcolor='#FF0000'
    }
    if (document.getElementById("reschedule").value = "Submit") 
    {
       document.getElementById("reschedule").onclick=function(){
            alert('Hello this submit button click event');
       };
    }
}

HTML中同一按钮中的多个函数

4 个答案: