submtting后清空表格

我有这种形式的表单我有两个按钮，当提交按钮提交表单和一个清除按钮来清除表单中的输入字段。submtting后清空表格

我使用了PHP代码，以保持输入和选择从用户的，我使用一个清除按钮以清除表单新信息的信息

这是我用它来保持信息文本框：

<input id="datepicker" name="txt_date" type="text" placeholder="Date" class="form-control input-md" value="<?php echo isset($_POST['txt_date']) ? $_POST['txt_date'] : ''?>">

选择菜单

<select id="selectbasic" name="txt_type" class="form-control"> 
    <option value="">--SELECT--</option> 
     <option <?php if (isset($_POST['txt_type']) && $_POST['txt_type'] == 'Inspection') { ?>selected="true" <?php }; ?>value="Inspection">Inspection</option> 
     <option <?php if (isset($_POST['txt_type']) && $_POST['txt_type'] == 'Service') { ?>selected="true" <?php }; ?>value="Service">Service</option> 
     <option <?php if (isset($_POST['txt_type']) && $_POST['txt_type'] == 'Project') { ?>selected="true" <?php }; ?>value="Project">Project</option> 
    </select>

选择菜单读取数据库

的信息

<?php 
    $sql=mysqli_query($conn,"select DISTINCT db_name,db_user from tbl_staff {$query} order by db_name asc ")or die(mysqli_error($conn)); 
    echo "<select name='txt_name' class='states'>"; 
    echo "<option value=''>--SELECT--</option>"; 
    while($res=mysqli_fetch_array($sql)){ 
    $userid=$res['db_user']; 
    $name=$res['db_name']; 
     if($name!=""){ 

echo "<option value='$userid'";if(isset($_POST['txt_name']) && $_POST['txt_name']==$userid){ echo "selected = 'true'";}echo">$name</option>"; 
     }} echo "</select>";?>

按钮代码：

<input type="submit" name="submit" value="Search" class="btn btn-default"> 
    <input type="reset" name="clear" value="Clear" class="btn btn-default" onclick="return resetForm(this.form);">

要清除我用这个JavaScript

function resetForm(form) { 
    // clearing inputs 
    var inputs = form.getElementsByTagName('input'); 
    for (var i = 0; i<inputs.length; i++) { 
     switch (inputs[i].type) { 
      // case 'hidden': 
      case 'text': 
       inputs[i].value = ''; 
       break; 
      case 'radio': 
      case 'checkbox': 
       inputs[i].checked = false; 
     } 
    } 

    // clearing selects 
    var selects = form.getElementsByTagName('select'); 
    for (var i = 0; i<selects.length; i++) 
     selects[i].selectedIndex = 0; 

    // clearing textarea 
    var text= form.getElementsByTagName('textarea'); 
    for (var i = 0; i<text.length; i++) 
     text[i].innerHTML= ''; 

    return false; 
}

问题的形式是，文本框，然后选择菜单，但明确的工作选择菜单没有工作谁点击清除所有其他领域后，从数据库中读取清楚没有从数据库中读取的选择菜单我该如何解决？

来源

2016-11-30 m7md

你只需要使用这个标记没有的onclick，有你试过这个吗？ – GraveyardQueen

@GraveyardQueen without onclick =“return resetForm（this.form）;”它不适用于任何输入或选择字段 – m7md

你有部署代码的url吗？或者你可以发布整个html部分吗？ – GraveyardQueen

取决于内置的浏览器功能，您可以使用PHP进行清除。

<?php 
// Check if the form is posted 
if ($_SERVER['REQUEST_METHOD'] == 'POST') { 
    // Check if the clear button was clicked 
    if ($_POST['clear']) { 
     // To prevent backspace 
     unset($_POST); 
     header("Location: ".$_SERVER['PHP_SELF']); 
     exit; 
    } 
} 
?> 

<form method="POST" action="<?= $_SERVER['PHP_SELF']; ?>"> 
    <input type="text" name="something" /> 
    <input type="submit" name="submit" value="Post" /> 
    <input type="submit" name="clear" value="Clear" /> 
</form>

来源

2016-11-30 08:24:23 Peter

非常感谢你解决我的问题，而不使用任何JavaScript谢谢:) – m7md

-2

试试这个代码的onclick =“JavaScript的：location.reload（）;希望这将解决您的问题

来源

2016-11-30 08:30:05 Pramitha

如果在窗体上有错误会发生什么？ –

要清除的JavaScript表单元素内的所有投入要素，你可以简单地使用

reset()方法

的HTMLFormElement.reset（）方法来恢复形式元素的默认值。此方法做同样的事情作为点击形式的复位按钮。

要重新使用选择二jQuery插件，您将需要使用选择二选择元素的value设置为null并引发change事件选择元素。

通过检查Select2文档页面中的以下链接，您可以找到更多关于此的信息。

Programmatic control

选择二将触发原来选择的元素上的一些活动，让您与其他组件集成。你可以找到更多关于事件on the options page的信息。

这里是一个例子。

var btn = document.getElementsByTagName('button')[0]; 
 

 
var $sel2 = $(".single").select2({ 
 
    width: "230px", 
 
    tags: "true", 
 
    placeholder: "Select an option" 
 
}); 
 

 
btn.addEventListener('click', function(e) { 
 
    e.preventDefault(); 
 

 
    // Reset Select2 
 
    $sel2.val(null).trigger("change"); 
 

 
    // Reset Form Element 
 
    this.parentElement.reset(); 
 
})

input:not([type=radio]):not([type=checkbox]), button, textarea, select { 
 
    display: block; 
 
    margin:8px 0; 
 
} 
 

 
input[type=radio], input[type=checkbox] { 
 
    margin: 8px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 

 
<form action=""> 
 
    <input type="text" value=""> 
 
    <input type="checkbox" > 
 
    <input type="radio" > 
 
    <textarea cols="30" rows="2"></textarea> 
 
    <select name="" id="sel"> 
 
    <option value="" selected>choose</option> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
    </select> 
 
    <!-- Select2 --> 
 
    <select class="single"> 
 
    <option value=""></option> 
 
    <option value="foo">Foo</option> 
 
    <option value="bar">Bar</option> 
 
    <option value="baz">Baz</option> 
 
    </select> 
 

 
    <button>Reset</button> 
 
</form>

来源

2016-11-30 09:31:39 DavidDomain

submtting后清空表格

回答

相关问题