Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.07.2021, 22:30
Интересующийся
Отправить личное сообщение для Миленький Посмотреть профиль Найти все сообщения от Миленький
 
Регистрация: 30.03.2021
Сообщений: 9

Как я могу использовать форму не перезагружая страницу
Здравствуйте, я хочу вызвать
alert("works")
без перезагрузки страницы когда пользователь нажимает кнопку отправить в случае если форма заполнена
Тоесть я пытаюсь использовать форму только для тега required - отправка данных будет на fetch.
Пример кода который я пытаюсь написать
<!DOCTYPE html>

<body>
	<input type="text" id="test">
	<form action="" onsubmit="return false">
		<input type="text" required>
		<input type="text" required>
		<button type="submit" onsubmit="alert('works')">send</button>
	</form>

</body>

<script>
	document.getElementById("test").value = Math.random().toString(36).substring(7);
</script>

</html>
- тоесть я хочу чтоб страница не перезагружалась (для этого
form onsubmit="return false"
) и хочу чтоб когда пользователь отправляет заполненною форму - сработал
button type="submit" onsubmit="alert('works')"

Но похоже return false полностью блокирует onsubmit на кнопочке, как я могу это исправить...?

Последний раз редактировалось Миленький, 05.07.2021 в 22:35.
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2021, 22:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Миленький,
<form action="" onsubmit="alert('works'); return false">
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2021, 14:36
Интересующийся
Отправить личное сообщение для Миленький Посмотреть профиль Найти все сообщения от Миленький
 
Регистрация: 30.03.2021
Сообщений: 9

Спасибо, это работает, однако как я могу использовать чтото подобное используя vue, тоесть @submit="return false;" не работает во vue...
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2021, 15:01
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="vueRoot">
  <form ref="form">
    <input name="userName" v-model="userName">
    <a href="#" v-on:click="submit">SUBMIT</a>
  </form>
</div>
<script>
new Vue({
  el : "#vueRoot",
  data : {userName : 'Ivan'},
  methods : {
    submit : function(){
    alert (`I form: ${this.userName}`)
     // this.$refs.form.submit()
    }
  }
});
</script>

как вариант https://jsfiddle.net/vlasenkofedor/ard3yLu8/

Последний раз редактировалось Vlasenko Fedor, 06.07.2021 в 15:13.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как облегчить страницу Manyasha Общие вопросы Javascript 19 04.10.2018 07:03
Как программно создать форму и добавить контролы в неё? aristov Dojo toolkit 1 13.11.2011 00:55
Как с помощью JS перенаправить на указанную страницу ? saturn Элементы интерфейса 2 31.10.2011 22:57
isDefaultSelected - как ее использовать для...? Semen Events/DOM/Window 2 25.08.2009 20:13
Как заставить браузер использовать закэшированное изображение? fog Общие вопросы Javascript 5 13.08.2009 15:40