0

This seems like a simple problem but for some reason I cannot get it to work properly.

<form id="newZipSubmit" class="mb-25" action="<?php echo get_permalink(); ?>" method="post">
  <input type="text" name="newZip" placeholder="Another Zip" id="newZip">
  <button id="submitNewZip" name="search" type="submit" class="btn btn-primary">Search</button>
    <h4>Click to see Nearby Zips:</h4>
    <ul>
      <li class="liner"><?php echo $nearbyZip1;?></li>
      <li class="liner"><?php echo $nearbyZip2;?></li>
      <li class="liner"><?php echo $nearbyZip3;?></li>
      <li class="liner""><?php echo $nearbyZip4;?></li>
      <li class="liner"><?php echo $nearbyZip5;?></li>
    </ul>
</form>

That's the form...Here's the JS:

$(document).ready(function() {
      $('.liner').on('click', function(){
        $('#newZip').attr('value', $(this).text());
        $('#newZipSubmit').submit();
      });
    });

The process is supposed to go if you click on any of the "liner" class, put that new value into the input, then submit the form to get the results. However the new value never gets there. And I go back to the default.

if(isset($_POST['search'])) {
    $searchZip = $_POST['newZip'];
  } else {
    $searchZip = '77040';
  }

The weird behavior is that if I take out the .submit() function, and just have the input change to the new value, then click on the search button it works.

I am not looking for the difference between the value of the input vs. the .val() in jQuery.

I am trying to figure out how to submit with the new value that is clicked on from the liner class.

Jerome Dela Cruz
  • 13
  • 4
  • the value property and the value attribute have two different purposes (the value attribute is linked to the defaultValue property, whereas the value property is what the input's value currently is) – Kevin B Nov 23 '22 at 21:46
  • it doesn't work due to the difference between these two methods. One does what you intended the other to do. – Kevin B Nov 23 '22 at 21:55

0 Answers0