Display javascript input text in JS/JQuery

Question

Here's my HTML code,

$(".slide").each(function() {
  var a = $(this).find(".input-field"),
    b = $(this).find("a");

  b.click(function() {
    console.log(a.value());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" class="step-form d-flex">
  <div class="slide">
    <h3>Enter your code1</h3>
    <input type="text" class="input-field" placeholder="ZIP CODE">

    <p><a href="#" class="btn-start">Start now!</a></p>
  </div>

  <div class="slide">
    <h3>Enter your code2</h3>
    <input type="text" class="input-field" placeholder="ZIP CODE">

    <p><a href="#" class="btn-start">Start now!</a></p>
  </div>
</form>

I'd like to display the entered text on the input when the button was click.

I've been try this code. but I always results to undefined;

Your question is unclear.. On what input you want to display the entered text? — Guruprasad J Rao
– Guruprasad J Rao, Commented Feb 22, 2018 at 3:52

Hugo G · Accepted Answer · 2018-02-22 03:54:36Z

1

In jQuery you need to use val() instead of value() (API):

$(".slide").each(function() {
  var a = $(this).find(".input-field"),
    b = $(this).find("a");

  b.click(function() {
    console.log(a.val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" class="step-form d-flex">
  <div class="slide">
    <h3>Enter your code1</h3>
    <input type="text" class="input-field" placeholder="ZIP CODE">

    <p><a href="#" class="btn-start">Start now!</a></p>
  </div>

  <div class="slide">
    <h3>Enter your code2</h3>
    <input type="text" class="input-field" placeholder="ZIP CODE">

    <p><a href="#" class="btn-start">Start now!</a></p>
  </div>
</form>

answered Feb 22, 2018 at 3:54

Hugo G

16.7k9 gold badges62 silver badges82 bronze badges

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

Comments

Kusuma · Accepted Answer · 2018-02-22 03:54:47Z

0

It should be .val() not .value()

$(".slide").each(function() {
  var a = $(this).find(".input-field"),
  b = $(this).find("a");
  b.click(function() {
    console.log(a.val());
  });
});

answered Feb 22, 2018 at 3:54

Kusuma

2662 silver badges10 bronze badges

Comments

sanatsathyan · Accepted Answer · 2018-02-22 03:47:44Z

0

You can try :

$(".btn-start").click(function() {
    console.log($(this).closest('.slide').find('.input-field').val());
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" class="step-form d-flex">
  <div class="slide">
    <h3>Enter your code1</h3>
    <input type="text" class="input-field" placeholder="ZIP CODE">

    <p><a href="#" class="btn-start">Start now!</a></p>
  </div>

  <div class="slide">
    <h3>Enter your code2</h3>
    <input type="text" class="input-field" placeholder="ZIP CODE">

    <p><a href="#" class="btn-start">Start now!</a></p>
  </div>
</form>

answered Feb 22, 2018 at 3:47

sanatsathyan

1,79314 silver badges19 bronze badges

Collectives™ on Stack Overflow

Display javascript input text in JS/JQuery

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