Изменить элемент HTML с помощью XHttpRequest из формы HTML - PullRequest
Новая
       3

Изменить элемент HTML с помощью XHttpRequest из формы HTML

0 голосов
/ 30 мая 2018

Я хочу иметь возможность ввести имя в форму и отправить обратно сообщение с надписью "Ваше имя" [имя] ", верно?"Я построил эту маленькую тестовую программу, которую планирую включить обратно в основной код, но мне не очень повезло с ней.Я использую метод POST. 

<HTML XMLns="http://www.w3.org/1999/xHTML"> 
<head> 
  <title>A Simple Ajax Example</title> 
  <script type="text/javascript" src="xhr.js"></script>
  <script type="text/javascript" src="simpleajax.js"> </script>
</head> 
<body>
  <h1>Fetching data with Ajax</h1>
  <iframe name="iFrame" style="display: none;"></iframe>
  <form method="post" action="data.php" target="iFrame">
    <label>User Name:</label>
    <input id="namefield" type="text" name="namefield">
    <input type="submit" name="submit" value="Fetch" onclick="loadDoc(namefield.value);">
  </form>
  <div> 
    <p id="targetDiv">The fetched data will go here.</p>  
  </div> 
</body> 
</HTML>

И JavaScript ... 

function loadDoc(name) {
  var xhttp = new XMLHttpRequest();
  var firstName = name;
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("targetDiv").innerHTML = this.responseText;
    }
  };

  xhttp.open("POST", "data.php?namefield=" + firstName, true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send();
}

1 Ответ

0 голосов
/ 30 мая 2018

Вот что тип ввода submit делает из MDN: 

<input> elements of type "submit" are rendered as buttons.
When the click event occurs (typically because the user clicked the button), 
the user agent attempts to submit the form to the server.

Таким образом, чтобы изменить это, один из способов - вернуть false в обработчике onclick, например: 

<input type="submit" name="submit" value="Fetch" onclick="loadDoc(namefield.value);return false;">

Или вы можете использовать Button Element вместо submit, что придаст больше значения тому, что вам нужно сделать: 

<button type="button" onclick="loadDoc(namefield.value);">Fetch</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...