更改要提交的按钮类型

Change button type to submit

本文关键字：按钮类型 提交      更新时间：2023-09-26

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

最初，用户有"编辑预订"按钮，但在单击它后，某些内容会激活，按钮变为提交按钮。当用户输入他的信息并单击提交时，这些数据将转到 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>

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

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

这应该有效：

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();
  }
}
相关文章：