jquery and javascript obtained input value of input type equals text but it is empty even though it's not

Question

When i try to obtain the values of input type=text is empty even though they are not. Any idea why?

 var form_data = new FormData(document.getElementById('box')); // Creating object of FormData class
        var cust_name = document.getElementById("cust_name").value;
        var order_num = $("#order_num").val();
 $("#search").click(function(){
            console.log(cust_name) //they are empty even though it's not
            console.log(order_num) //they are empty even though it's not
             $.ajax({
                    url: "search.php",
                    method: "POST",
                    data: {cust_name: cust_name, order_num: order_num}, 
                    error: function (request, status, error) {
                        $("body").append("<div style='background:rgba(255,0,0,0.8);float:left;position:fixed'>" + request.responseText + "</div>")
                    }                   
             }).done(function(msg) {
              $("body").append("<div style='background:rgba(255,0,0,0.8);float:left;position:fixed'>" + msg + "</div>")
              });
             });    

         });

and here is my html code:

<form id="box" method="post">


<input type="text" id="order_num" name="order_num" placeholder="ðŸ” Order number"/> <br/>
<input type="text" id="cust_name" name="cust_name" placeholder="ðŸ” Customer name"/> <br/>
sent date: <input type="date" name="sent_date" id="sent_date"/><br/>
<input type="text" id="sales_person" name="sales_person" placeholder="ðŸ” sales person"/><br/>
<input type="button" id="search" class="button" value="search" name="search"/>
</form>

Where in your program are you obtaining values for inputs of type=text? I don't see it. — Jonathan Wilson
– Jonathan Wilson, Commented Dec 8, 2018 at 0:30
simply, fetch the required values in the click method handler. — ThS
– ThS, Commented Dec 8, 2018 at 0:30
Lines 1,2,3 are executed right away (when page loads) so you are storing the values that your text fields contain when the page loads into those variables. So they are empty. Then at some point in the future you click on search and you display those same empty variables. — James
– James, Commented Dec 8, 2018 at 0:36

AnonymousSB · Accepted Answer · 2018-12-08 01:07:28Z

You need to attach an event listener to the submit event of your form to get the values when the user submits. Here's a stripped down working example.

The problem with your code is that it runs right away when the page loads, and because JavaScript is a runtime language, it doesn't go back and update those variables with the current value.

You could also put those two variable declarations INSIDE your click handler (Shown in bottom solution).

Solution (Preferred)

document.getElementById('box').addEventListener('submit', function(e) {
  e.preventDefault();
  var form_data = new FormData(this);
  var cust_name = document.getElementById("cust_name").value;
  var order_num = document.getElementById("order_num").value;
  console.log(cust_name, order_num);
});

<form id="box" method="post">
  <input type="text" id="order_num" name="order_num" placeholder="ðŸ” Order number"/> <br/>
  <input type="text" id="cust_name" name="cust_name" placeholder="ðŸ” Customer name"/> <br/>
  <button type="submit">Search</button>
</form>

Notes

I used <button> instead of <input type="button">
I passed this to FormData because we have a reference to it from the event handler
I used e.preventDefault() to stop the page from refreshing by default.

Solution (Minimal Code Change)

$("#search").click(function(){
  var form_data = new FormData(document.getElementById('box'));
  var cust_name = document.getElementById("cust_name").value;
  var order_num = $("#order_num").val();
  console.log(cust_name);
  console.log(order_num);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="box" method="post">
  <input type="text" id="order_num" name="order_num" placeholder="ðŸ” Order number"/> <br/>
  <input type="text" id="cust_name" name="cust_name" placeholder="ðŸ” Customer name"/> <br/>
  sent date: <input type="date" name="sent_date" id="sent_date"/><br/>
  <input type="text" id="sales_person" name="sales_person" placeholder="ðŸ” sales person"/><br/>
  <input type="button" id="search" class="button" value="search" name="search"/>
</form>

Collectives™ on Stack Overflow

jquery and javascript obtained input value of input type equals text but it is empty even though it's not

1 Answer 1

Solution (Preferred)

Notes

Solution (Minimal Code Change)

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution (Preferred)

Notes

Solution (Minimal Code Change)

Comments

Your Answer

Sign up or log in

Post as a guest

Related