HTML-формы и jQuery: кнопки

У меня есть форма, где данные собираются, а затем отправляются на страницу PHP через AJAX. Эта форма имеет простую кнопку после тега </form>, это «обычная» кнопка, на которой я слушаю клик, а затем выполняю мой вызов AJAX.HTML-формы и jQuery: кнопки

<button id="normalbutton">Imabutton</button>

Почему я надену кнопку на улицу? Потому что, если кнопка находится внутри тегов <form>...</form>, даже если моя форма не указана, даже если кнопка не является кнопкой отправки, простой факт нажатия на нее обновляет всю страницу.

Как я могу использовать кнопки внутри моей формы?

До сих пор единственным решением, которое я нашел, является удаление тегов <form>...</form>, потому что я обрабатываю представление с помощью jQuery, и мне больше не нужно иметь форму. Правильно ли это в соответствии с синтаксисом HTML? т. е. можно ли вводить теги, например, без родительской формы? Он работает, но грамматически ли он правильно?

источник

2015-06-28 Fafanellu

Если вы не указали type элемента кнопки, это тип отправки по умолчанию. Использовать <button type="button" id="normalbutton">Imabutton</button>

источник

2015-06-28 09:38:23 brroshan

Вы также можете использовать кнопку типа submit. Все, что вам нужно сделать, когда пользователь нажимает кнопку, - preventDefault();.

$(function(){ 
    $('#buttonId').click(function(){ 
    event.preventDefault(); 
    //Do your AJAX Stuff 
    }); 
});

Кроме того, убедитесь, что action атрибут пуст в вашей форме. Он должен работать.

Даже если проблема не устранена, убедитесь, что атрибут ID не используется нигде.

Заканчивать Jquery Docs - preventDefault()

источник

2015-06-28 09:38:39 Abhinav

Я думаю, что это будет более элегантным, если вы поместите 'event.preventDefault()' после '// Do AJAX Stuff' – kulaeff

Нет, она должна быть первой линии потому, что это поможет в предотвращении Перенаправление – Abhinav

Он будет запретить обработчик по умолчанию. – kulaeff

Поместите кнопку назад в форме и в функции, которая обрабатывает щелчок вставить следующий (в начале):

event.preventDefault();

Где событие является аргументом функции, как это:

$("#normalbutton").click(function(event) { 
event.preventDefault(); 
..... 
});

Больше информации на: http://api.jquery.com/event.preventdefault/

источник

2015-06-28 09:39:27 Geseft

Пожалуйста, проверьте код типа Put «кнопку» = в

<html> 
<head> 
<title>Demo</title> 
</head> 
<body> 
<form action="#"> 
    <input type="text" /> 
    <button type="button" id="normalbutton">Imabutton</button> 
</form> 
</body> 
</html>

источник

2015-06-28 09:39:33

Использование <button type="button" id="normalbutton">Imabutton</button> внутри <form> и она должна работать как обычная кнопка, а не обновить.

источник

2015-06-28 09:39:34 Varun

Прежде всего, с HTML5 можно иметь элементы формы вне фактической формы. Вы можете указать оба using the form-attribute on the button:

Элемент формы, с которым связана кнопка (ее владелец формы). Значение атрибута должно быть атрибутом id элемента в том же документе. Если этот атрибут не указан, элемент должен быть потомком элемента формы. Этот атрибут позволяет размещать элементы в любом месте документа, а не как потомки их элементов.

Кроме того, если вы не укажете type для атрибута по button -элементному его типу submit по умолчанию. Поэтому нажатие этой кнопки всегда будет отправлять форму. У вас есть два варианта:

Вариант 1:set type="button"
Вариант 2: предотвратить Посылают форму:

$('#normalbutton').click(function(event) { 
    event.preventDefault(); 
});

источник

2015-06-28 09:42:18 insertusernamehere

Примечание: также можно использовать 'return false;' вместо 'event.preventDefault()'. – kulaeff

Вы не должны удалить <form> тегов. Либо вы можете использовать тип button для тега <button> или просто использовать <a> - hyper-link. Вы можете вызвать ваш jQuery даже через <a> - hyper-link.

Если бы вы могли поделиться всем кодом, это поможет членам сообщества быстрее ответить на него.

источник

2015-06-28 09:43:32

Из вопроса, кажется, что вы хотите выполнить AJAX через форму, которую вы используете.

Итак, во-первых, нет необходимости использовать тег form при использовании AJAX. Тег form вместе со своими атрибутами method и action отправляет неасинхронный запрос сценарию, указанному атрибутом action, с использованием метода, указанного атрибутом method.

Но, поскольку HTML является языком разметки и делает вашу разметку более семантической, вы можете использовать тег form с атрибутом id.

Следующая вещь, касающаяся кнопок; Вы можете использовать либо input тег с атрибутом type набором для button или button тегов с атрибутом type набора для button, как при помощи кнопок по умолчанию в form теге считаются типа submit

Ссылка:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

источник

2015-06-28 09:46:29

Вы можете использовать return false on submit или onclick function

Использование JQuery

<script> 
$(function(){ 
    $("#normalbutton").click(function(){ 
     return false; 
    }); 
}); 
</script>

источник

2015-06-28 09:50:32

HTML-формы и jQuery: кнопки

ответ

Смежные вопросы