Question

我尝试做这样的事情：

最初，用户有按钮＆＃34;编辑预订＆＃34;，但点击它后会激活一些内容，按钮变成提交按钮。当用户输入他的信息并单击“提交”时，此数据将转到servlet。

部分工作，但问题是当按钮发生变化时，我没有时间用户可以输入数据。

这是我目前的代码：

 <c:if test="${booking.status == 'Checking'}">
                    <form name="myForm" id="myForm">
                        <input type="button" value="Edit booking" id="editButton"
                               onclick="activate(); changeButton();">
                    </form>
                    <script>
                        function activate() {
                            var editButton = document.getElementById("editButton");
                            if (editButton.value == "Edit booking") {
                                document.getElementById("bookingDate").disabled = false;
                                document.getElementById("returnDate").disabled = false;
                                editButton.setAttribute('type','submit');
                            }
                            else {
                                document.getElementById(editButton).action = "/BookingUpdate";
                                document.getElementById("bookingDate").disabled = true;
                                document.getElementById("returnDate").disabled = true;
                            }
                        }

                    </script>
                    <script>
                        function changeButton() {
                            var editButton = document.getElementById("editButton");
                            if (editButton.value == "Edit booking") {
                                editButton.value = "Submit";
                            }
                            else {
                                editButton.value = "Edit booking";
                                editButton.setAttribute('type', 'button');
                            }
                        }
                    </script>
                </c:if>

Answer 1

如果默认事件处于编辑模式，则需要阻止默认事件，以便它不会提交表单。您可以随时将按钮类型设置为提交，无需将其更改为按钮。

这应该有效：

var button = document.getElementById('editButton');

button.addEventListener('click', toggleButton);

function toggleButton(e){
  var isEdit = button.value === 'Edit booking';

  if(isEdit){
    document.getElementById("bookingDate").disabled = false;
    document.getElementById("returnDate").disabled = false;
    button.value = 'Submit';
    e.preventDefault();
  }
}

Answer 2

实际上，您可以使用submit按钮或直接在javascript代码中调用提交函数document.getElementById("myForm").submit()来提交表单数据。

因此，您可以尝试以下内容：

<form name="myForm" id="myForm">
    <input type="button" value="Edit booking" id="smartButton" onclick="doSomethingSmart();">
</form>
<script>
    var smartButton = document.getElementById("smartButton");
    var myForm = document.getElementById("myForm");
    function doSomethingSmart() {
        if(smartButton.value == "Edit booking") { // we gonna edit booking
            document.getElementById("bookingDate").disabled = false;
            document.getElementById("returnDate").disabled = false;
            smartButton.value = "submit"; // let it in disguise as submit button
        }
        else { // we gonna submit
            if( isUserInputValied() ) {
                myForm.submit(); // submiiiiiiiiiiiiiiiiiit !

                // restore everything as if nothing happened
                document.getElementById("bookingDate").disabled = true;
                document.getElementById("returnDate").disabled = true;
                smartButton.value="Edit Booking";
            }
            else {
                alert("please fill your form correctly!");
            }
        }
    }
    function isUserInputValid() {
        // check whether the user input is valid
    }
</script>

更改按钮类型以提交

2 个答案: