CODEWITHSUNDEEP
javascriptphphtmlcssajax
Sneha Roy
Sneha Roy

Reputation: 17

remove the value set in input field's value attribute after submitting the form

I am using HTML, bootstrap, php, MySQL, and Ajax. I want that when I submit the form the value set in the input field's value attribute become null. I am badly stuck here. Can anyone please advice me that how can I solve this problem?? Thanks in advance guys. codes are given below :

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

Upvotes: 1

Views: 2958

Answers (2)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

Just use $("input[type='text']").val(''); to remove the values hardcoded in the input's value tag.

$("#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

You are using ajax to submit the form so you should add the line $("input[type='text']").val(''); inside you ajax success callback function

$.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(''); 
  }
});

Upvotes: 0

Vitiok
Vitiok

Reputation: 84

First of all you should remove default values of input fields, because on submit the page refreshes and default values will popup. Next you should create an event listener "submit". Once it is present find the nodes with input and replace the value with empty string. The working sample is bellow:

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

Don't forget to remove default value from input!!! Otherwise you will see them after submit.

Upvotes: 1

Related Questions