onClick событие не работает внутри формы tag

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <script>  
     function removeP2() { 
      var parent = document.getElementById("section"); 
      var child = document.getElementById("p2"); 
      parent.removeChild(child); 
     } 
    </script> 
    <body> 
     <nav> 
      <form> 
       <button onclick="removeP2();">Remove</button> 
      </form> 
     </nav> 
     <section id="section"> 
      <p id="p1">Paragraph One.</p> 
      <p id="p2">Paragraph Two.</p> 
     </section> 
    </body> 
</html>

Когда я нажимаю кнопку отправки, функция выполняется как обычно, но после выполнения функции страница перезагружается (удаляется P2 на секунду).onClick событие не работает внутри формы tag

Я нашел решение, которое должно удалить «форму» внутри тега «nav», и оно отлично работает. Просто хочу спросить, в чем проблема, и если мне нужно иметь тег «Form» внутри тега «nav», какую часть мне нужно исправить?

источник

2016-04-21 Daniel Choi

пытается laod сценария в разделе, и он будет работать – PacMan

обновление страницы, поскольку кнопка отправляет форму. – nnnnnn

Вы также должны перенести этот скрипт в свои заголовки, чтобы он предварительно загружал. Он сидит между головой и телом, что неправильно. – ManoDestra

Форма отправляется, и ваша страница перезагружается. Вам нужно остановить отправку формы.

Решение 1: Добавить на вашу кнопку атрибут type.

<button type="button" onclick="removeP2();">Remove</button>

Это позволит убедиться, что кнопка не submit типа, и что форма не будет представлен по щелчку.

Решение 2: Предотвратить отправку события в javascript. Так что сделайте эти изменения.

<button onclick="removeP2(event);">Remove</button>

и в сценарии предотвращения этого события

function removeP2(event) { 
    event.preventDefault(); // prevent the event , ie form submit event 
    var parent = document.getElementById("section"); 
    var child = document.getElementById("p2"); 
    parent.removeChild(child); 
}

Solution 3: Я не вижу никакой необходимости в виде тега там в HTML. Если ваш точный синтаксис у вас и у вас действительно нет каких-либо других элементов или целей при отправке формы, вы можете удалить тег form.

<nav> 
    <button onclick="removeP2();">Remove</button>   
</nav>

источник

2016-04-21 13:19:36

Используйте данный код. Он не представит форму.

<button type="button">My Button</button>

источник

2016-04-21 13:13:13

Смотреть этот код:

https://jsfiddle.net/y7mhu3oL/1/

Решение является onsubmit в виде тега:

<script>  
    function removeP2() { 
     document.getElementById("p2").remove(); 
     } 
    </script> 
<body> 
    <nav> 
     <form method="POST" onsubmit="removeP2(); return false;"> 
      <button>Remove</button> 
     </form> 
    </nav> 
    <section id="section"> 
     <p id="p1">Paragraph One.</p> 
     <p id="p2">Paragraph Two.</p> 
    </section> 
</body>

источник

2016-04-21 13:18:07

event.preventDefault() правильный ответ. Когда вы нажмете кнопку внутри формы, она автоматически отправит эту форму, если вы не предотвратите действие по умолчанию с event.preventDefault;

function removeP2(event) { 
    event.preventDefault() 
    var parent = document.getElementById("section"); 
    var child = document.getElementById("p2"); 
    parent.removeChild(child); 
}

источник

2016-04-21 13:18:30 DrivingInsanee

Это не сработает, если вы также не обновите способ вызова функции для передачи объекта события в качестве параметра. Но не проще ли просто использовать кнопку отправки? – nnnnnn

Что такое кнопка без отправки. Разве это не зависит от браузера? – DrivingInsanee

'' дает вам кнопку без действия по умолчанию вообще. Если вы опустите атрибут 'type' (как в разметке OP), кнопка становится' type = submit' по умолчанию. – nnnnnn

Поскольку вы не определяя кнопку type, ваш браузер при условии, что кнопка type="submit" и попытки «представить» форму (даже если вы не определили какой-либо метод или действие).

Если вы добавите type="button" к тегу кнопки, он переопределяет предположение по умолчанию submit и не будет пытаться отправить форму.

jsfiddle: https://jsfiddle.net/hdpk8c3n/

источник

2016-04-21 13:22:17

onClick событие не работает внутри формы tag

ответ

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