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;

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

Answer 2

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> 

Answer 3

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