`EDIT`

Question

我正在使用HTML，bootstrap，php，MySQL和Ajax。我希望当我提交表单时，输入字段的value属性中设置的值变为null。我被困在这里。任何人都可以建议我，我该如何解决这个问题？先谢谢你们。代码如下：

            <form id="cForm" name="cForm" method="post">
            <label>Roll No : </label>
            <input type="text" name="roll" id="roll" value="12"><br>
            <label>Name : </label>
            <input type="text" name="name" id="name" value="Sneha"><br>
            <label>Stream : </label>
            <select name="stream" id="stream">
                <option value="CSE">CSE</option>
                <option value="IT">IT</option>
                <option value="ECE">ECE</option>
                <option value="ME">ME</option>
            </select><br>
            <label>Age : </label>
            <input type="text" name="age" id="age"><br>
            <input type="submit" class="btn-submit" name="submit" value="Submit">

        </form>
        <script type="text/javascript">
    jQuery(document).ready(function() {
            $('.btn-submit').click(function() {
                $.ajax({
                    url:"insert.php",
                    method:"POST",
                    data:$('#cForm').serialize(),
                    success:function(data)
                    {

                            document.getElementById("cForm").reset();
                            $("input[type='text']").val('');

                    }
                });
            });
        });
</script>

Answer 1

首先，您应该删除输入字段的默认值，因为在提交页面刷新时，将弹出默认值。接下来，您应该创建一个事件监听器＆＃34;提交＆＃34;。一旦它存在，找到带有输入的节点，并用空字符串替换该值。工作样本如下：

<form id="cForm" name="cForm" method="post">
    <label>Roll No : </label>
    <input type="text" name="roll" id="roll" value=""><br>
    <label>Name : </label>
    <input type="text" name="name" id="name" value=""><br>
    <label>Stream : </label>
    <select name="stream" id="stream">
        <option value="CSE">CSE</option>
        <option value="IT">IT</option>
        <option value="ECE">ECE</option>
        <option value="ME">ME</option>
    </select><br>
    <label>Age : </label>
    <input type="text" name="age" id="age"><br>
    <input type="submit" class="btn-submit" name="submit" value="Submit">
    <input type="submit" class="btn-modify" name="modify" value="Modify">

</form>

    <script>
        const form = document.querySelector('#cForm');
        let inputs = form.getElementsByTagName('input')
        form.addEventListener('submit', function() {
            console.log('Submit');
            inputs.name.value = '';
            inputs.roll.value = '';
            inputs.age.value = '';
        })
    </script>

不要忘记从输入中删除默认值！否则你会在提交后看到它们。

Answer 2

只需使用$("input[type='text']").val('');删除输入的value标记中的硬编码值。

$("#cForm").on("submit", function(e) {
  e.preventDefault();
  $("input[type='text']").val('');


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cForm" name="cForm" method="post">
  <label>Roll No : </label>
  <input type="text" name="roll" id="roll" value="112"><br>
  <label>Name : </label>
  <input type="text" name="name" id="name" value="john"><br>
  <label>Stream : </label>
  <select name="stream" id="stream">
    <option value="CSE">CSE</option>
    <option value="IT">IT</option>
    <option value="ECE">ECE</option>
    <option value="ME">ME</option>
  </select><br>
  <label>Age : </label>
  <input type="text" name="age" id="age"><br>
  <input type="submit" class="btn-submit" name="submit" value="Submit">
  <input type="submit" class="btn-modify" name="modify" value="Modify">

</form>

`EDIT`

您正在使用ajax提交表单，因此您应该在行内添加行$("input[type='text']").val(''); ajax成功回调函数

$.ajax({
  url:'/some-url/file.php',
  success:function(data){
       //your code to check if the save was success full 
      //and if yes then reset the form inputs
      $("input[type='text']").val(''); 
  }
});

提交表单后删除输入字段的value属性中设置的值

2 个答案:

`EDIT`