Очистить радиокнопки представленной формы

У меня есть форма с двумя группами переключателей. Когда в каждой группе выбраны опции, они остаются выбранными и меняют цвет, чтобы показать, что они были выбраны. Однако, когда я пытаюсь сбросить форму с помощью кнопки очистки , ничего не происходит.Очистить радиокнопки представленной формы

Я хочу, чтобы форма отображалась пользователю так же, как когда она была загружена в первый раз (без выбора, без изменения цвета - просто очищено.), Любые идеи?

Я использую onclick: "javascript: submit()" вместо кнопки отправки, возможно, это вызывает проблему?

Кодекс:

<form action="" method="post"> 
     <p>Date:</p> 
      <input type="radio" name="dateorder" onclick="javascript:submit()" value="dateasc" autocomplete="off" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'dateasc') echo ' checked="checked"';?> /> <label for="dateasc">Newest &rsaquo; Oldest</label> 
      <br> 
      <input type="radio" name="dateorder" onclick="javascript:submit()" value="datedesc" autocomplete="off" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'datedesc') echo ' checked="checked"';?> /> <label for="datedesc">Oldest &rsaquo; Newest</label> 

     <hr><br>  
     <p>Title:</p> 
      <input type="radio" name="title" onclick="javascript:submit()" value="Mr" <?php if (isset($_POST['title']) && $_POST['title'] == 'Mr') echo ' checked="checked"';?> /><label for="Mr">Mr</label> 
      <br> 
      <input type="radio" name="title" onclick="javascript:submit()" value="Mrs" <?php if (isset($_POST['title']) && $_POST['title'] == 'Mrs') echo ' checked="checked"';?> /><label for="Mrs">Mrs</label> 
      <br> 
      <input type="radio" name="title" onclick="javascript:submit()" value="Miss" <?php if (isset($_POST['title']) && $_POST['title'] == 'Miss') echo ' checked="checked"';?> /><label for="Miss">Miss</label><br><br> 
    <p class="clear">Clear Filters<p> 
    </form>

Эти методы я пытался до сих пор:

Метод 1: Дал виде стандартного HTML кнопку сброса только перед тегом закрывающей формы.

Способ 2: Добавлено эта линия как раз перед формой закрытия тега:

<input type="button" onclick="myFunction()" value="Reset form">

Добавлен скрипт после формы закрытия тега:

<script> 
function myFunction() { 
    document.getElementById("myForm").reset(); 
} 
</script>

Метод 3: В тег тела добавил <body onload="document.refine.reset();"> и дал форму имя уточнить.

Метод 4: Набор полей ввода для автозаполнения от

источник

2016-07-29 Andy R

ваши попытки сбросить форму в исходное состояние на самом деле работает, но проблема заключается в том, что, поскольку вы подаете форму каждый раз, когда вы нажимаете на input, страницу и, следовательно, форма перезагружается, а последний щелкнул input теперь имеет начальное состояние checked. Итак, что вам нужно сделать, это перебрать все входы checked и «убрать» их.Вот trimed вниз пример одного из способов сделать это:

var inputs=document.querySelectorAll("input[type=radio]:checked"), 
 
    x=inputs.length; 
 
document.querySelector("button[type=reset]").addEventListener("click",function(event){ 
 
    while(x--)inputs[x].checked=0; 
 
    event.preventDefault(); 
 
},0);

<form> 
 
    <input id="option1a" name="option1" type="radio" value="a"><label for="option1a">Option 1A</label> 
 
    <input checked id="option1b" name="option1" type="radio" value="b"><label for="option1b">Option 1B</label> 
 
    <input id="option1c" name="option1" type="radio" value="c"><label for="option1c">Option 1C</label> 
 
    <hr> 
 
    <input id="option2a" name="option2" type="radio" value="a"><label for="option2a">Option 2A</label> 
 
    <input checked id="option2b" name="option2" type="radio" value="b"><label for="option2b">Option 2B</label> 
 
    <input id="option2c" name="option2" type="radio" value="c"><label for="option2c">Option 2C</label> 
 
    <hr> 
 
    <button type="reset">Clear</button> 
 
</form>

источник

2016-07-29 15:58:52 Shaggy

Спасибо Shaggy, я нашел это лучшим решением, и он работал так, как я хотел. –

с помощью Jquery подпорку() вы зарегистрированный или незарегистрированный селективную кнопку Исли.

$('Radio-buttion').prop('checked', false);

С помощью JavaScript вы должны сделать как это

Document.getElementbyId("Radio-buttion").checked="false"

источник

2016-07-29 15:43:02

Спасибо Хассану Али, я должен дать каждому переключателю уникальный идентификатор? Или я могу запустить JavaScript, который видит тип в качестве переключателя. Пробовал это со следующим: –

вы можете работать с классом, потому что если вы используете идентификатор, вы должны указать им уникальный идентификатор для обоих переключателей. Пожалуйста, примите его как ответ, если вы удовлетворены. Спасибо за ваш интерес. –

Работает отлично с id, но с классом ничего не происходит. Я ожидаю, что у меня ошибка в коде. Это то, что у меня есть: Кнопка формы: <кнопка onclick = "uncheck()"> Снимите отметку «По возрастанию» и скрипт: –

вы можете использовать

<form action="" class="form" method="post">

на Javascript, вы должны использовать

$(document).ready(function(){ 
$(".form input[type=radio]").each(function() { 
$(this).prop('checked', false); 
    }); 
});

check here on jsfiddle

источник

2016-07-29 16:38:14

Должно быть, что-то не хватает, это не отменяет форму при попытке. –

Вы применили class = "form" в

https://jsfiddle.net/q21dy32v/ go and check here see by default Я проверил каждое радио, но на странице загрузки никто не проверяется –

Очистить радиокнопки представленной формы

ответ

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