Моя кнопка отправки не позволяет нажимать в html

Question

Это мой HTML

<form action="petDetails.php" id="animalInput">
   <ul>
       <li>
           <label for="dogName">Dog Name:</label><input id="dogName" type="text" name="dogName" />
       </li>
       <li>
          <label for="submit"></label><input id="submit" type="submit" value="Enter dog name" name="submit" />
       </li>
  </ul>
</form>

Я пытаюсь нажать кнопку отправки и получить изображение под кнопкой увеличения размера. Я также только учусь AJAX, и я не уверен, может ли это повлиять на это или, может быть, это просто мой HTML.

Answer 1

Ваша реализация верна и работает для меня, просто откройте инструменты разработчика вашего браузера, откройте вкладку сети, запустите фрагмент кода снизу и нажмите кнопку "Отправить". Это приведет к запросу к серверу, safari выводит следующий вывод: e.g. [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (petDetails.php, line 0), что соответствует ожиданиям, поскольку серверный скрипт petDetails.php отсутствует.

<form action="petDetails.php" id="animalInput">
   <ul>
       <li>
           <label for="dogName">Dog Name:</label><input id="dogName" type="text" name="dogName" />
       </li>
       <li>
          <label for="submit"></label><input id="submit" type="submit" value="Enter dog name" name="submit" />
       </li>
   </ul>
</form>

Чтобы сделать то же самое с Ajax, вы можете сделать это так:

// Send data to backend via Ajax
function save_dog_name() {
    // Create XMLHttpRequest Object
    var http_handle = new XMLHttpRequest();
    // Define data which should be send to the server
    var data = 'dogName=' + document.getElementById("dogName").value;
    // Open the connection
    http_handle.open('POST', "petDetails.php", true);
    // Send header to specify that data in request body will be urlencoded
    http_handle.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    // Define what happens if the response has been received
    http_handle.onreadystatechange = function() {
        if(http_handle.readyState == 4 && http_handle.status == 200) {
            // Print response in case everything was OK
            console.log("Data has been received. Server response: " + http_handle.responseText);
        } else {
            // Print error message and response in case something went wrong
            console.log("An error occured. Server response: " + http_handle.status + " " + http_handle.statusText + " " + http_handle.responseText);
        }
    }
    http_handle.send(data);
}

<ul>
    <li>
        <label for="dogName">Dog Name:</label><input id="dogName" type="text" name="dogName" />
    </li>
    <li>
        <label for="submit"></label><button onclick="save_dog_name()">Enter dog name</button>
    </li>
</ul>

Для удобного дизайна кнопок вы можете использовать bootstrap, см .: https://getbootstrap.com/docs/3.4/css/#buttons