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

时间:2018-06-09 18:09:28

标签: javascript php html css ajax

我正在使用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>

2 个答案:

答案 0 :(得分: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>

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

答案 1 :(得分:0)

只需使用$("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(''); 
  }
});