how to send ajax request one by one same page on particaular block of code

how to send ajax request one by one same page on particaular block of code

Hi Everyone I am a bit confused to send a request using ajax. I can send a request using first text-field (using onkeyup even) and also getting response properly as I needed.

Hi Everyone I am a bit confused to send a request using ajax. I can send a request using first text-field (using onkeyup even) and also getting response properly as I needed.

But now I want to send a request from second text-field also (using onkeyup even) on the same URL and this time the ajax call should execute another block of code. But I am unable to do it. Please help me to get the proper result.

Here is the HTML code:

<div class="form-group">
    <label for="qualityname">Quality Name: </label>
    <input type="text" class="form-control" id="qualityname" placeholder="Enter quality name" name="qualityname" list="addlist">
     <datalist id="addlist" class="response"></datalist>
</div>

<div class="form-group"> <label for="qualitycolor">Product Color(number on shadecard):</label> <input type="text" class="form-control" id="qualitycolor" placeholder="Enter product color" name="qualitycolor" list="addlist1"> <datalist id="addlist1" class="response1"></datalist> </div>

Jquery Code:

/Code for first text-field ajax request/
    $('document').ready(function(){
        $('#qualityname').keyup(function(){
          if(!($('#qualityname').val() == '')){
            $.ajax({
              type: 'POST',
              url: 'scripts.php',
              data: $(this).serialize()
            })
            .done(function(data){
              $('.response').html(data);
            })
            .fail(function(){
              alert('data not post');
            });
            return false;
          }
          else{
            $('#response').html('<span></span>');
          }
        });

/Code for second text-field ajax request/ $('#qualitycolor').keyup(function(){ if(!($('#qualitycolor').val() == '')){ $.ajax({ type: 'POST', url: 'scripts.php', data: $(this).serialize() }) .done(function(data){ $('.response1').html(data); }) .fail(function(){ alert('data not post'); }); return false; } else{ $('#response1').html('<span></span>'); } }); });

script.php code:

 include "connection.php";

/code for response first text-field request/ if ($_SERVER["REQUEST_METHOD"] == "POST"){ $qualityname = $_POST['qualityname']; $sql = "select DISTINCT quality_name from products where quality_name like '".$qualityname."%' limit 10"; if(!$result = mysqli_query($con, $sql)){ echo mysqli_error($con); }

while($row = mysqli_fetch_array($result)){
    echo "&lt;option&gt;".$row['quality_name']."&lt;/option&gt;";
}

/code for response second text-field request/

}


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

jQuery ajax get request method example

### jQuery Ajax Get Request Method Example This article is originally published at [https://www.tutsmake.com/jquery-api-ajax-get-method-example/](https://www.tutsmake.com/jquery-api-ajax-get-method-example/...

How To Create Chat App in PHP Using Ajax and JQuery

In this tutorial, you'll learn how to create chat system in PHP using Ajax and JQuery

Ajax (jQuery) PHP Script // move_uploaded_file-problem

I'm working on a&nbsp;<strong>gallery-upload</strong>-function with