Блог

Главная - Вопросы по программированию - Как перенаправить на другую HTML-страницу после отправки формы?

Как перенаправить на другую HTML-страницу после отправки формы?

#javascript #html

#javascript #HTML

Вопрос:

У меня есть HTML-страница, содержащая элемент формы. Форма содержит ввод типа radio и кнопку в конце. Я хочу, чтобы при нажатии кнопки вызывался метод javascript, который получает значение выбранного выбора и перенаправляет на selectedChoice.html страница.

Вот моя HTML-страница. 

 <html>
    <head>
        <script type="application/javascript" src="../js/navigation.js"></script>

    </head>
    <body>
        <div id="chooseBodyPart">
            <form>
                <div class="question-text">
                    <p>Which body part is at dis-ease??</p>
                </div>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="chest"> Chest <br>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="head"> Head <br>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="shoulders"> Shoulders <br>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="eyes"> Eyes <br>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="ears"> Ears <br>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="heart"> Heart <br>
                <button onclick="redirectToNextPageBasedOnResponse();">Proceed</button>
            </form>



        </div>
    </body>
</html>

А ниже мой js.

 function getListOfChoices(form) {
    var choices = form.getElementsByTagName("input");
    return choices;
}


// list of choices should be passed to this method and name of checked choice should be returned.
// In case no choice is selected the return null
function getNameOfCheckedChoice(choices) {
    var selectedChoice = null;
    for (var choiceNumber = 0; choiceNumber < choices.length; choiceNumber  ) {
        if (choices[choiceNumber].checked) {
            selectedChoice = choices[choiceNumber].value;
            break;
        }
    }
    return selectedChoice;
}


function redirectToNextPageBasedOnResponse() {
    var divContainingForm = document.getElementById("chooseBodyPart");
    var form = divContainingForm.getElementsByTagName("form")[0];
    var choices = getListOfChoices(form);
    var selectedChoice = getNameOfCheckedChoice(choices);

    window.location.href = "http://"   window.location.host   "/html/"   selectedChoice   ".html";
}

Работа кода происходит именно так, как я хочу, но как только управление возвращается из redirectToNextPageBasedOnResponse(), URL-адрес не меняется на то, что я закодировал, вместо этого в существующий URL-адрес вставляется параметр запроса со значением, равным выбранному выбору.

Может кто-нибудь, пожалуйста, объяснить, что происходит??

Ответ №1:

Вам не хватает только одной вещи. Вызов preventDefault() события отправки.

Вам нужно принять событие через onclick="redirectToNextPageBasedOnResponse(event);" , а затем в вашем обработчике выполнить event.preventDefault() .

 function getListOfChoices(form) {
  var choices = form.getElementsByTagName("input");
  return choices;
}


// list of choices should be passed to this method and name of checked choice should be returned.
// In case no choice is selected the return null
function getNameOfCheckedChoice(choices) {
  var selectedChoice = null;
  for (var choiceNumber = 0; choiceNumber < choices.length; choiceNumber  ) {
    if (choices[choiceNumber].checked) {
      selectedChoice = choices[choiceNumber].value;
      break;
    }
  }
  return selectedChoice;
}


function redirectToNextPageBasedOnResponse(event) {
  event.preventDefault();
  var divContainingForm = document.getElementById("chooseBodyPart");
  var form = divContainingForm.getElementsByTagName("form")[0];
  var choices = getListOfChoices(form);
  var selectedChoice = getNameOfCheckedChoice(choices);

  window.location.href = "http://"   window.location.host   "/html/"   selectedChoice   ".html";
}  
 <div id="chooseBodyPart">
  <form>
    <div class="question-text">
      <p>Which body part is at dis-ease??</p>
    </div>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="chest"> Chest <br>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="head"> Head <br>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="shoulders"> Shoulders <br>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="eyes"> Eyes <br>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="ears"> Ears <br>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="heart"> Heart <br>
    <button onclick="redirectToNextPageBasedOnResponse(event);">Proceed</button>
  </form>
</div>

Итак, мы предотвращаем поведение формы отправки по умолчанию и добавляем к ней наше собственное пользовательское поведение.

Комментарии:

1. Спасибо. Это сработало. Я застрял со вчерашнего дня. Также IDE показала, что это событие устарело. Что-нибудь по этому поводу??

2. Это не устарело, AFAIK. Какое появляется сообщение об устаревании?

3. Deprecated symbol used. Consult docs for better understanding.

4. Я не уверен. Это обычный способ доступа к событию во встроенных обработчиках событий. Возможно, ваша среда разработки хочет, чтобы вы использовали addEventListener , или есть какое-то расширение, которое ошибочно идентифицирует что-то.

Ответ №2:

Добро пожаловать в Stack Overflow!

Пожалуйста, проверьте 

 window.location=url

или 

 history.pushState({}, "title", url);

вместо этого.