如何从发布错误中重新选择单选按钮？

Question

我有一个用HTML创建的表单，但是当我提交表单帖子并且表单验证出现错误时，返回并不记得我最初的单选。

var radio_options = $('form#contact input[type="radio"]');

for (var i=0; i< radio_options.length; i++) {
    var option =  radio_options[i];
    if (option.checked == true) {
      console.log(option.id); // how to I check this option to the appropriate radio?
    }
  }

HTML：

<form action="check.php" id="contact" method="post">

<div class="radioboxes"><strong id="top-more">Options</strong><br>
  <span class="othertopic" id="wwus"> <font>Please select one option</font></span>
  <div id="top-wwus"><input id="topic_252" name="form_tools_form_id" type="radio" value="252"> <label for="topic_252">Recruitment</label><br>
  <input id="topic_259" name="form_tools_form_id" type="radio" value="259"> <label for="topic_259">Requests</label><br>
  <button name="submit" type="submit">Submit</button> </div> </div> 
</form> 

我可以访问这些值，但是在验证错误后，我无法使它们在无线电中被检查并返回到原始形式。您能在js中看到问题吗？

Answer 1

您需要“记住”所选的值/收音机。

如果这是AJAX请求，则在发送之前将选定的单选存储在JavaScript中，然后，如果存在问题（例如错误），则可以从存储的值中重置适当的表单值。 / p>

如果此表单提交是页面刷新的地方，那么您将在返回响应之前预先填充视图的部分（即表单），或者使用其他方法（例如隐藏字段）或在脚本中设置JavaScript变量标签，然后在加载时访问该标签。

另一种选择是使用localStorage或cookie来按需要设置表单。

这是一个概括性的答案，因为有很多方法可以完成此操作。

Answer 2

 $("input[type='radio']").click(function(){
    var radioValue = $("input[name='form_tools_form_id']:checked").attr('id');
    if(radioValue){
      localStorage.setItem('radioValue', radioValue);
    }
  });
  var givenRadioValue = localStorage.getItem('radioValue');
  $("#"+givenRadioValue).attr('checked', true);