удалить значение, установленное в атрибуте значения поля ввода после отправки формы

Question

Я использую HTML, загрузчик, php, MySQL и Ajax.Я хочу, чтобы при отправке формы значение, установленное в атрибуте значения поля ввода, становилось нулевым.Я плохо застрял здесь.Может кто-нибудь, пожалуйста, посоветуйте мне, как решить эту проблему?Заранее спасибо, ребята.коды приведены ниже:

            <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

Просто используйте $("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(''); 
  }
});

Answer 2

Прежде всего вы должны удалить значения по умолчанию для полей ввода, потому что при отправке страница обновится, и появятся значения по умолчанию.Далее вы должны создать прослушиватель событий «submit».Как только он появится, найдите узлы с входными данными и замените значение пустой строкой.Рабочий пример ниже:

<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>

Не забудьте удалить значение по умолчанию со входа !!!В противном случае вы увидите их после отправки.