php mysql jquery javascript如果输入为空则不重定向

Question

what i'm trying to achieve is this:

if the input is empty, the user will not be redirected to the update.php page, but if the value of the input is not empty, the user will be redirected to the update.php with the corresponding id from the input that i am talking about..

so far i was not abLe to achieve this, and this is what i have so far:

i am working on the fiLes backend-search.php that feeds the hidden input field to my index.php page, and the main page which is the index.php page..

here are the relewvant codes:

(backend-search.php)

     if(isset($_REQUEST['term'])){
 $sql = "SELECT * FROM productslist WHERE brand LIKE ?";

 if($stmt = mysqli_prepare($link, $sql)){

 $param_term = '%'.$_REQUEST['term'].'%';    mysqli_stmt_bind_param($stmt, 's', $param_term);
     if(mysqli_stmt_execute($stmt)){
         $result = mysqli_stmt_get_result($stmt);
    if(mysqli_num_rows($result) > 0){
        while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
 echo '<p>'.$row['brand'].' - '.$row['wgtvol'].''.$row['unit'].'('.$row['generic'].') <input id="hiddenid" type="hidden" value="'.$row['id'].'" /></p>';
      }
 }
 else{
 echo '<p style="color: #FFFFFF; background: #b20101; font-weight: 700; "> No matching records found, brand name is still available.</p>';
    }
    } else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
       }
 }

 mysqli_stmt_close($stmt);
 }

and the relevant codes from my index.php:

 <div class="search-box pull-left">
 <input id="search" class="m-top m-bot" type="text" autocomplete="off" placeholder="Search by brand">
 <div class="result" id="result"></div>
 </div>


 <script type="text/javascript">
 $(document).ready(function(){
 $('.search-box input[type="text"]').on("keyup input", function(){

    var inputVal = $(this).val();
    var resultDropdown = $(this).siblings(".result");
    if(inputVal.length){
        $.get("backend-search.php", {term: inputVal}).done(function(data){

          resultDropdown.html(data);
        });
      } else{
        resultDropdown.empty();
    }
 });

 $(document).on("click", ".result p", function(){
 $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
 $(this).parent(".result").empty();

 var link = "view-or-add-stock-modal.php?id=";
     console.log(link);
     console.log($(this).text());
     window.location = link + $(this).find('input[type=hidden]').val(); ;
      });
 });
 </script>

please bear with my code-writing as i am a screenreader user and i only rely on this technology as i have visual disability..

though i have tried this variation i have made, it still doesn't work:

     <script type="text/javascript">
 $(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){

    var inputVal = $(this).val();
    var resultDropdown = $(this).siblings(".result");
    if(inputVal.length){
        $.get("backend-search.php", {term: inputVal}).done(function(data){

          resultDropdown.html(data);
        });
     } else{
        resultDropdown.empty();
      }
 });
 $(document).on("click", ".result p", function(){
 $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
 $(this).parent(".result").empty();

 var link = "view-or-add-stock-modal.php?id=";
 console.log(link);
 console.log($(this).text());
 window.location = link + $(this).find('input[type=hidden]').val(); ;
 if ($("input:text").val().replace(/^\s+|\s+$/g, "").length == 0){
 $('.search-box input[type="text"]').hide();
           }
      });
 });
 </script>

i am willing to accept any relevant explanation and fix if one can provide..

thanks in advance.. and please if the moderators are about to flag this as duplicate, i am looking for an specific answer and precise explanation so please do not flag this right away without completely reading the entire post.

Answer 1

As clarified in the question comments.

I would stick to your first solution and just change some code

$(this).parent(".result").empty();

var link = "view-or-add-stock-modal.php?id=";
console.log(link);
console.log($(this).text());

var hiddenInputElem = $(this).find('input[type=hidden]');
//check first if the hidden Input Field is available and has a value
if(hiddenInputElem.length > 0 && hiddenInputElem.val().trim() != ""){
    window.location = link + hiddenInputElem .val();
}

The redirect happens immediately after you change window.location. Therefore you check before if the current clicked <p> Element has an hidden-Input (and if it's not empty). Otherwise no redirect will happen and the user stays on the current page - maybe you want to show some additional Info in this case.

And just a sidenote (my opinion) - Everything is possible - so if you want your code to do something it's archivable - but you need to know what you want :-)

Edit: If you want to keep the user's input just remove this line

$(this).parents(".search-box").find('input[type="text"]').val($(this).text());

Here you set the the textbox input to the value of the clicked p - in every case, and that's maybe not what you want