更改按钮类型以提交

Question

我正在尝试做这样的事情：

最初，用户有“编辑预订”按钮，但点击它后，某些东西会激活，按钮变成提交按钮。当用户输入他的信息并单击提交时，此数据将转到 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

实际上，您可以通过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>

Answer 2

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

这应该可行：

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();
  }
}