Question

我需要通过点击重置按钮清除文本框，Radiobutton，Dropdown和复选框中的所有值。

HTML：

<!DOCTYPE html>
<html lang="en">

<head>medication</head>

<body>

  <form id="form1" name="zoo">
    <h2>MEDICATION</h2>
    <div class="med">
      <pre>        
        <label>dropdown1<sup>*</sup></label>@Html.DropDownListFor(Model => Model.medication, Model.medication,"Select dropdown1", new { style = "width:200px; height :30px" })   <button style="height:30px;" onclick="opendropdown1()" ;>search</button>    
        Prescription Date  <input type="date" class="sizetestdate" name="testdate" style="width:140px;height:30px;" value=""><br />
        <label>text1</label><input type="text" size="25" style="height:30px;" id="dir" name="dir"/> 
        electronic  <input type="radio" name="yes" id="yes" />Yes&nbsp;<input type="radio" name="yes" id="no"/>No<br />
      </pre>
    </div>
  </form>
  <hr />
  <div class="wrapper">
    <input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);"> </div>
  <div>
    <script src="~/Scripts/reset.js"></script>
  </div>
</body>

JS：

$('form[name="zoo"] input:reset').click(function () {
    $('form[name="zoo"]')
        .find(':radio, :checkbox').removeAttr('checked').end()
        .find('textarea, :text, select').val('')

    return false;
});

Answer 1

这是你想要做的，你甚至不需要任何javascript代码

                <form id="form1" name="zoo">
                    <h2>MEDICATION</h2>
                    <div class="med">
                        <pre>        
            <label>dropdown1<sup>*</sup></label>@Html.DropDownListFor(Model => Model.medication, Model.medication,"Select dropdown1", new { style = "width:200px; height :30px" })   <button style="height:30px;" onclick="opendropdown1()" ;>search</button>    
                Prescription Date  <input type="date" class="sizetestdate" name="testdate" style="width:140px;height:30px;" value=""><br />
        <label>text1</label><input type="text" size="25" style="height:30px;" id="dir" name="dir"/> 
        electronic  <input type="radio" name="yes" id="yes" />Yes&nbsp;<input type="radio" name="yes" id="no"/>No<br />
    </pre>
            </div>
            <hr/>
            <button type="reset" value="Reset">Reset</button>
        </form>

Answer 2

试试这个

<input type='reset' id='reset' value='Reset' name='reset' onclick="resetForm(this.form);"> 
$('#reset').on('click', function () {
     $('.sizetestdate,#dir').val('');
     $('#yes,#no').removeAttr('checked');
       return false;
})

它适合你。检查一下 here

Answer 3

您可以使用解决方案https://jsfiddle.net/0a2bmg8g/1/

＆＃13;

$('input:reset').click(function () {
		$('input[type=date], [type=text]').val('');
    $('input[type=radio]').prop('checked', false);
    return false;
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<form id="form1" name="zoo">
                <h2>MEDICATION</h2>
                <div class="med">
                    <pre>        
        <label>dropdown1<sup>*</sup></label>@Html.DropDownListFor(Model => Model.medication, Model.medication,"Select dropdown1", new { style = "width:200px; height :30px" })   <button style="height:30px;" onclick="opendropdown1()" ;>search</button>    
            Prescription Date  <input type="date" class="sizetestdate" name="testdate" style="width:140px;height:30px;" value=""><br />
    <label>text1</label><input type="text" size="25" style="height:30px;" id="dir" name="dir"/> 
    electronic  <input type="radio" name="yes" id="yes" />Yes&nbsp;<input type="radio" name="yes" id="no"/>No<br />
</pre>
        </div>
    </form>
        <hr />
        <div class="wrapper">
<input type='reset' value='Reset' name='reset' />    </div>

＆＃13;

Answer 4

使用此

Width="{TemplateBinding TickWidth}"

Answer 5

将重置按钮保留在form内。不需要Javascript。请参阅下面的代码。

<form id="form1" name="zoo">
   <h2>MEDICATION</h2>
   <div class="med">
     <pre>        
        <label>dropdown1<sup>*</sup></label>@Html.DropDownListFor(Model => Model.medication, Model.medication,"Select dropdown1", new { style = "width:200px; height :30px" })   <button style="height:30px;" onclick="opendropdown1()" ;>search</button>    
            Prescription Date  <input type="date" class="sizetestdate" name="testdate" style="width:140px;height:30px;" value=""><br />
    <label>text1</label><input type="text" size="25" style="height:30px;" id="dir" name="dir"/> 
    electronic  <input type="radio" name="yes" id="yes" />Yes&nbsp;<input type="radio" name="yes" id="no"/>No<br />
     </pre>
   </div>

   <hr />
   <div class="wrapper">
      <input type='reset' value='Reset' name='reset'>    
   </div>
 </form>

使用重置按钮清除屏幕中的数据

5 个答案: