Изменить тип кнопки представить

Question

Я пытаюсь сделать что-то вроде этого:

Изначально пользователь имеет кнопку «Редактировать номер», но после нажатия на нее что-то включается и кнопка становится кнопку отправки. Когда пользователь вводит информацию и нажимает кнопку отправки, эти данные передаются сервлету.

Это работает частично, но проблема в том, что когда кнопка изменяется, у меня нет времени, когда пользователь может ввести свои данные.

Вот мой текущий код:

<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 или позвонив по отправке функции document.getElementById("myForm").submit() непосредственно в JavaScript коде.

, таким образом, вы можете попробовать что-то, как показано ниже:

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