How to remove user input from a text input box with Jquery on submit?

Question

I can't seem to get this to work for the life of me. I've tried setting the value to '' with getElementById('guess').value and $('#guess').val, tried using $('#formGuess').reset(), etc. Don't know why the value won't clear out.

Here is my code on this:

js

$('#submit').on('click', function(e) {
  e.preventDefault();

  var guess = $('#guess').val();
  $('#guess').removeAttr('value');
}

HTML

<div class="container center">
      <div class="row">
        <div class="col-md-4 col-md-offset-4">
          <form class="form-horizontal" method="post" id="guessForm">
            <div class="form-group">
              <div>
                <input type="text" class="form-control" placeholder="Guess" id="guess"/>
              </div>
                <input type="submit" class="btn btn-success" name="submit" value="Guess" id="submit"/>
            </div>
          </form>
        </div>
      </div>

document.getElementById('guess').value will just get the value of the input, to overwrite it you can use document.getElementById('guess').value=''; or jQuery $('#guess').val(''); If you find those still do not work please check your browser console for error reports. — NewToJS
– NewToJS, Commented Mar 21, 2016 at 12:40
My advice would be to monitor when the form is submitted, rather than when the submit button is pressed. Once the form is submitted and you have collected the data you need, you can reset the form, not one element. $('#guessForm').on('submit'... — rybo111
– rybo111, Commented Mar 21, 2016 at 12:47

Ibrahim Khan · Accepted Answer · 2016-03-21 12:47:41Z

4

Set empty string as the value of textbox like following.

$('#guess').val('');

edited Mar 21, 2016 at 12:47

answered Mar 21, 2016 at 12:39

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Damian Wojakowski · Accepted Answer · 2016-03-21 12:49:11Z

0

First, you should attach a "submit" listener to the form, not to the button, e.g.

<form id="someForm"></form>

$("#someForm").submit(function () {
    // your code
});

But if you want to attach it to the button, then you can do that, no worries.

Make sure that the event is called. Are you sure that the function within "click" event is called? Put there a console.log("someText");

If it's called, then make sure that jQuery is getting the right element. Maybe you've made a typo? Maybe there's a missing "#" sign? Or maybe the jQuery is not loaded at all?

Open developers tools and check what's in the console.

Probably you've made a simple mistake - it's always about simple mistakes. : )

answered Mar 21, 2016 at 12:49

Damian Wojakowski

8677 silver badges4 bronze badges

Comments

Munawir · Accepted Answer · 2016-03-21 13:45:56Z

0

From your code,

var guess = $('#guess').val();

you are getting the value not setting.

To set the value

$('#guess').val('');

edited Mar 21, 2016 at 13:45

answered Mar 21, 2016 at 12:45

Munawir

3,3569 gold badges36 silver badges51 bronze badges

Collectives™ on Stack Overflow

How to remove user input from a text input box with Jquery on submit?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related