Запрет одной из кнопок на выполнение form action. Как?

Question

[Никита Кочетков]

Есть код:

<form action="php/addNew.php" method="post">
		<input class="styler" type="text" name="name" size="70" maxlength="70"><br></p>
		<input class="styler" id="phone" type="text" name="phoneNumber" size="15" maxlength="15"><br></p>
		<input class="styler" type="text" name="email" size="40" maxlength="40"><br>
		<textarea class="styler"  name="order" cols="70" rows="7"></textarea>
		<input class="styler" type="text" size="19" maxlength="19" disabled="true">
    <button id="Gen" class="styler">Сгенерировать</button>
		<button id="send" class="styler">Отправить</button>
	</form>

Нужно чтобы при нажатии на кнопку "Сгенерировать" выполнялся JS скрипт, но не выполнялся запрос к php файлу. Что делать?

Answer 1

[Rsa97]

<button id="Gen" class="styler" onclick="my_function(); return false;">Сгенерировать</button>

Comments

[Никита Кочетков]

Либо я что-то не так делаю, либо не работает. Все равно направляет на addNew.php

[Rsa97]

fiercekilla: А саму функцию Вы определили? Всё работает, jsfiddle

Answer 2

[Йцу Йцуевич]

return false; отменяет все переходы (которые делает не JS конечно). Это относится и тегам a.
В данном случае тег form осуществляет переход (не JS), следовательно его можно отменить


или так:

document.getElementById("Gen").addEventListener("click", function(){
  return false;
})

Answer 3

[Евгений Петров]

Для решения вашей задачи следует, прежде всего, однозначно определять тип кнопок. Для отправки формы submit, для выполнения кода button. Не нужно кнопке, не связанной с отправкой формы, задавать тип submit.
Отдельно обрабатывать отправку формы (которая может случиться и не при клике на кнопку), отдельно click на кнопке с типом button.
Пример