更改按钮类型以提交

Question

I'm trying do something like this:

Initially, the user has button "Edit booking", but after clicking on it something activates and button becomes a submit button. When the user enters his info and clicks submit, this data goes to servlet.

It works partially, but the problem is that when the button changes, I don't have a moment when the user can enter their data.

Here is my current code:

 <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

You need to prevent the default event if it's in edit mode so that it won't submit the form. You can always have your button type as submit no need to change it to button.

This should work:

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

Actually, you can submit a form data by either using a submit button or calling a submit function document.getElementById("myForm").submit() directly in javascript code.

thus, you can try something like below:

<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>