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後清空表格

回答

相關問題