Моя кнопка HTML5 постоянно обновляет браузер

0

У меня есть простая кнопка, которая имеет событие click, привязанное к его идентификатору. Эта кнопка извлекает значение из ползунка, который затем выводится в <span> вложенном в абзац. Проблема в том, что когда кнопка нажата, страница обновляется, поэтому я вижу значение в течение секунды секунды, а затем исчезает. В реальном мире я хочу, чтобы это произошло, когда все значения были отправлены на сервер, но пока мне просто нужно, чтобы страница не обновлялась, когда я нажимаю кнопку:

// Output to the value of slider one
$("#slider01").on('mousemove', function(evt) {
    var sliderValue = $(this).val();
    $("#value").text(sliderVal);
});

// Retrieve the value from slider one
$("#submit").on("click", function(evt) {
    var sliderValue = $('#slider01').val();
    $("#output > p").append(sliderValue);
    //alert("The value of slider 1 is: " + sliderValue);
});

Вот мои две основные функции.

  • 1
    Вы можете просто изменить тип ввода на button это предотвратит проблему :)
  • 0
    Просто хотел повторить, как @Sergio, упомянутый ранее, вы должны пройти через свои вопросы и принять или подтвердить ответы, которые были полезны для вас, у вас есть 16 вопросов сейчас без принятых ответов. Люди будут менее склонны помогать вам в будущем, если вы не примете их ответы.
Показать ещё 1 комментарий
Теги:

4 ответа

3
Лучший ответ

Похоже, ваша форма публикуется при нажатии кнопки. Чтобы этого не произошло, добавьте evt.preventDefault()

$("#submit").on("click", function(evt) {
  evt.preventDefault();
  var sliderValue = $('#slider01').val();
  $("#output > p").append(sliderValue);
  //alert("The value of slider 1 is: " + sliderValue);
});
Поделиться
3

Какой тип кнопки вы нажимаете? Для кнопки type="submit" обновление - это то, что он должен делать. Возможно, вам захочется попробовать простой type="button", по крайней мере, до тех пор, пока вы не дойдете до того, что действительно хотите, чтобы сообщение было отправлено.

Поделиться
  • 0
    Странно было то, что я изначально использовал type="submit" который, как вы говорите, должен обновляться, затем я изменил его на обычную кнопку, и страница по-прежнему обновлялась.
  • 0
    работал в React и JSX кнопках
1

Чтобы не перезагружать страницу при нажатии кнопки, используйте следующую команду:

$('button').click(function () {
  return false;
}

Во-вторых, вы также можете попытаться использовать это в функции success если вы используете jQuery запрос ajax.

В-третьих, какой код для этого? Я уверен, что есть форма и кнопка input[type="submit"], которая отправляет всю страницу на сервер. Удалите это и используйте простую button.

Поделиться
  • 0
    Спасибо, как вы говорите, кнопка «Отправить» - это то, что мне нужно, когда информация должна быть отправлена на сервер. Я заменил его на <button name="submit1" id="submit">Submit</button> но страница по-прежнему обновлялась, пока я не добавил необходимый код, который вы, ребята, предложили.
1

Это произойдет, если ваша кнопка имеет тип "отправить". Верните false, чтобы предотвратить продолжение формы с помощью submit:

$("#submit").on("click", function(evt) {
    var sliderValue = $('#slider01').val();
    $("#output > p").append(sliderValue);
    //alert("The value of slider 1 is: " + sliderValue);
    return false;
});

Затем вам придется вручную вызвать $('form').submit(); как только вы действительно готовы его отправить.

Поделиться
  • 0
    Спасибо, это звучит как лучший вариант. Странно то, что я удалил type="submit" и заменил его обычной кнопкой, а страница все еще обновлялась.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню