How to get an input text value in jquery?

Question

How go get an input text value in JavaScript?

I want to get input text value in jquery script but it prompted empty.

my script code:

<script type="text/javascript"> 
    var emails;
    function checkRegistration() {
        emails = document.getElementById('my_email').value;
        alert(emails);
    }
</script>

my form code :

<form method="post" role="form" onSubmit="return checkRegistration()" action="#">
    <div class="form-group">
      <input type="email" class="form-control" id="my_email" name="email" placeholder="Enter a valid email address">
    </div>
    <div class="form-group">
      <input type="submit" name="submit" class="btn btn-primary btn-block" value="Forgot Password" />
    </div>
</form>

I don't find any issues with your code, it runs fine.And to answer your title $('#my_email').val(); — Santhosh
– Santhosh, Commented Jan 19, 2016 at 17:05
@SanKrish jsfiddle.net/yo7k586b/1 does not work. It returns "Uncaught ReferenceError: checkRegistration is not defined" — Jay Blanchard
– Jay Blanchard, Commented Jan 19, 2016 at 17:08
And here it in jsbin jsbin.com/mifehanala/edit?html,js,console — Santhosh
– Santhosh, Commented Jan 19, 2016 at 17:10

Ben · Accepted Answer · 2016-01-20 17:05:15Z

1

First check are you using jquery.min.js file or not.

Second if you want to get value using id. id should be unique on that page.

Try below

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

edited Jan 20, 2016 at 17:05

Ben

8,9519 gold badges48 silver badges82 bronze badges

answered Jan 19, 2016 at 16:55

Rajender Kumar

1667 bronze badges

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

3 Comments

Jay Blanchard Over a year ago

Why should the OP "try this"? A good answer will always have an explanation of what was done and why it was done that way, not only for the OP but for future visitors to SO.

Ben Over a year ago

Why does it matter if the OP is "using jquery min file or not"? Minified or not minified won't make a difference to the answer.

Santhosh Over a year ago

@Rajender It doesnt answer the op's question , read the complete question . As your answer only solves his title

guest271314 · Accepted Answer · 2016-01-19 18:00:09Z

0

Edit, Updated

Add required attribute to input type="email" element, to prevent form submission if value not entered by user

Use .onchange event

var emails = document.getElementById("my_email");

function checkRegistration() {
  alert(this.value);
}

emails.onchange = checkRegistration;

<form method="post" role="form" action="#">
  <div class="form-group">
    <input type="email" class="form-control" id="my_email" name="email" placeholder="Enter a valid email address" required>
  </div>
  <div class="form-group">
    <input type="submit" name="submit" class="btn btn-primary btn-block" value="Forgot Password" />
  </div>
</form>

edited Jan 19, 2016 at 18:00

answered Jan 19, 2016 at 16:56

guest271314

1

5 Comments

Jay Blanchard Over a year ago

The OP is using a submit event, so why use the onchange()?

guest271314 Over a year ago

@JayBlanchard Does submit event of form element with action attribute set to # reload page ?

Jay Blanchard Over a year ago

It does, but it will still throw the alert prior to the page reloading.

guest271314 Over a year ago

@JayBlanchard If user submits form before entering values the alert would be empty string. This is why used onchange event at Answer above. Perhaps solution is to add required attribute to input type="email" element ?

Jay Blanchard Over a year ago

Given that the OP says "it prompted empty" you may be right.

Collectives™ on Stack Overflow

How to get an input text value in jquery?

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related