Javascript重置包含默认值的整个表单

时间:2018-01-05 10:50:41

标签: javascript reset

如何使用JavaScript重置HTML表单?我的表单实际上包含PHP默认值。

我用这个来澄清:

        function reset(){
            document.getElementById("moduleform_insert").reset();
        }         

当没有<input value="0">时,它会完美运作。

是否有任何方法可以清除或者我应该抓住每个输入值并逐个设置为空?

希望有人能给出一些建议。感谢。

4 个答案:

答案 0 :(得分:0)

  

没有时它会完美运作。

     

是否有任何方法可以清除或我应该获取每个输入值   并逐一设置为空?

reset的工作原理

  

HTMLFormElement.reset() 方法会恢复表单元素的默认值   值。此方法与单击表单的重置功能相同   按钮。

如果要清除值,则只需获取它们并逐个清除它们

var form = document.getElementById("moduleform_insert");
var allNumberAndTextInputs = form.querySelectorAll("input[type='number'], input[type='text'] ");
Array.from( allNumberAndTextInputs ).forEach( function( ele ){
  ele.value = ""; //set the value to empty
})

答案 1 :(得分:0)

您可以使用jQuery来执行此操作。

&#13;
&#13;
function reset(){
  jQuery("#moduleform_insert").val('');
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input id="moduleform_insert"  value="0" />
<input type="button" onClick="reset();" value="Reset" />
&#13;
&#13;
&#13;

如果你有多个输入元素,你可以将上面的reset()函数改为这个函数,它将循环遍历所有的输入元素并将它们的值设置为空(你可以将容器id或类放在前面输入jQuery(".container input")):

function reset(){
  jQuery("input").each(function(){
     jQuery(this).val('');
  });
}

答案 2 :(得分:0)

&#13;
&#13;
df = pd.read_json('sample.json', lines=True)
df['dateCreated'] = df['dateCreated'].apply(lambda x: x.get('$$date'))
print (df)
   TCPPort  UDPPort               _id  connected    dateCreated  \
0    15600    14600  FTpfNM4c4OuXAS6d          0  1514997141045   
1    15600    14600  f6Gn2xXyoeMrSvi8          0  1514997141046   
2    15600    14600  oVKsMubQ5rtAhfpq          0  1514997141048   
3    15600    14600  rkQpS6BimYvfDIZU          0  1514997141049   

   dateLastConnected  dateTried              hostname             ip  \
0                NaN        NaN         136.243.73.66  136.243.73.66   
1                NaN        NaN          45.77.187.45   45.77.187.45   
2                NaN        NaN   mainnet.deviota.com           None   
3                NaN        NaN  mainnet2.deviota.com           None   

   isTrusted                                                key  \
0       True  5d301e5f46bb6e0db9d379c19c451cc6905c09885e5529...   
1       True  c752b75fbc74eaba10745937d50abd2decf71c509aff49...   
2       True  a923372977f65fe08f472916f671a1749963cea3670168...   
3       True  9aae219149f088c9295de31125fb1f39060dd4fe1540c0...   

  lastConnections   port  remoteKey  seen  tried  weight  
0              []  16600        NaN     1      0       1  
1              []  16600        NaN     1      0       1  
2              []  16600        NaN     1      0       1  
3              []  16600        NaN     1      0       1  
&#13;
function reset() {
    document.getElementById("Form").reset();
}
&#13;
&#13;
&#13;

答案 3 :(得分:0)

var form = $('#myform');
form.find('input:text,textarea,select').val('');
form.find('input:radio,input:checkbox').each(function(){ 
    this.checked = false; 
});

这是基本代码。您可以根据需要添加“ input:email”,“ input:phone”等。或执行以下操作:

form.find('input').not(':hidden,:submit').val('');