更改按钮类型以提交

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

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

这应该工作：

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>