发表新帖
发表新帖

How to clear a form?

后端 未结
关注
11 595
清歌不尽
清歌不尽 2020-12-03 01:34

For example I have a form like this:
相关标签:
11条回答
  • 无人及你
    2020-12-03 01:44

    You can do something similar to this in JS and call it from onclick within your button: 

    function submit() {
  $('#fieldIdOne').val('');
  $('#fieldIdTwo').val('');
}

    And then in your HTML file: 

    <button id="submit" onclick="submit(); return false">SIGN UP</button>

    If you happen to use this solution with Firebase, it actually won't send anything to the database unless you add return false right after the call.

    0 讨论(0)
  • 失恋的感觉
    2020-12-03 01:45

    The easiest way to clear a form is by using the HTML tag

    <input type="reset" value="Reset">

    Example:

    <form>
  <table>
    <tr>
      <td>Name</td>
      <td><input type="text" name="name"></td>
    </tr>
    <tr>
      <td>Reset</td>
      <td><input type="reset" value="Reset"></td>
    </tr>
  </table>
</form>
    0 讨论(0)
  • 粉色の甜心
    2020-12-03 01:47

    You will have to clear them all through javascript (or clear it out server side).

    The reset button will only reset form elements to their initial value - if this was a specific value, that's what it will be reset to.

    0 讨论(0)
  • 借酒劲吻你
    2020-12-03 01:53

    Using JavaScript give the form an ID of 'myform':

    document.getElementById('myform').reset();

    0 讨论(0)
  • 梦毁少年i
    2020-12-03 01:57

    I've summarized some of the suggestions using jQuery to give a more complete solution to the question:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Demo Forms</title>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    </head>
    <body>

        <form method='post' action='someaction.php' name='myform'>

            <input type='text' name='text1'>
            <input type='text' name='text2' value='preset value'>

            <input type='checkbox' name="check1">Check Me

            <textarea rows="2" cols="20" name='textarea1'></textarea>

            <select name='select1'>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>

            <input type='button' value='Reset' name='reset' onclick="return clearForm(this.form);">
            <input type='submit' value='Submit' name='submit'>

            <script>
                function clearForm(form) {
                    var $f = $(form);
                    var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
                    $f.val('').attr('value','').removeAttr('checked').removeAttr('selected');
                }
            </script>
        </form>
    </body>
</html>

    Note that I've added the inclusion of the jquery lib in the head section and added an onclick handler to the Reset button. Lastly, I've added the javascript code based on the feedback from some other answers here.

    I have also added a preset value to one text field. The val('') function would not clear such a field, that's why I've also added attr('value','') to the last script line to clear such default values as well.

    0 讨论(0)
  • 我寻月下人不归
    2020-12-03 01:58

    In jquery simply you can use,

    $("#yourFormId").trigger('reset');
    0 讨论(0)
 看不清?
提交回复
热议问题