Get two value inputs in javascript

Question

I'm creating a "real-time" checker which checks the input the user has given to check if it's already available on the database (eg username, phone number)

the input box:

<input type = "text" name = "user_username" placeholder="Username" onkeyup="chkstudidnumber(this.value)" autocomplete="off" required/><br/>
<div id = "msg"></div>

the javascript:

<script>
  function chkstudidnumber(val)
  {
      $.ajax ({
        type:"POST",
        url:"check_username.php",
        data:'username='+val,
        success: function(data){
          $("#msg").html(data);
        }
      });
  }
</script>

and finally the php file:

<?php
include("dev_connection.php");

$g_username = htmlentities($_POST['username']);
$stud_username = mysqli_escape_string($con,$g_username);

$sql = "SELECT * FROM users WHERE username = '$stud_username' LIMIT 1 ";
$result = mysqli_query($con,$sql);
$count = mysqli_num_rows($result);

if($count==1) {
  echo "<div id = 'msg_error'>";
  echo "<img src = './img/img_error.png' style='height:20px;width:20px;vertical-align:middle;'> ";
  echo " &nbsp;&nbsp;that username is already registered<br/>";
  echo " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if you forgot your password, please contact us";
  echo "</div>";
} else {
  echo "<div id = 'msg'>";
  echo "<img src = './img/img_check2.png' style='height:10px;width:10px;'> ";
  echo "username available";
  echo "</div>";
}

?>

Now, I want to do this on my firstname and lastname input box

<input type = "text" name = "user_firstname" placeholder="Firstname"autocomplete="off" required/>
<input type = "text" name = "user_lastname" placeholder="Lastname"autocomplete="off" required/>

How can I apply the same javascript (or create a new one) to combine the two inputs into something like check_name.php?fname=samplename&lname=samplelastname

Answer 1

Change your function so that it can accept more then one params like:

function chkstudidnumber(val1, val2)
{
    $.ajax ({
        type:"POST",
        url:"check_username.php",
        data: {
            'fname' : val1,
            'lname' : val2
        },
        success: function(data){
          $("#msg").html(data);
        }
    });
}

Answer 2

Simple use $('form').serialize() in ajax data function to get all the form input's on php page so that you can have all input's like username, first name, last name and all.

Try This:

<script>
  function chkstudidnumber(val)
  {
      $.ajax ({
        type:"POST",
        url:"check_username.php",
        data:$('form').serialize(),
        success: function(data){
          $("#msg").html(data);
        }
      });
  }
</script>

If you have multiple form on the page then you can also provide class or id to the form and use that with serialize function to post that form data only.

Answer 3

<script>
  function chkstudidnumber()
  {
   var firstName = $("input[name=user_firstname]").val();
   var lastName = $("input[name=user_lastname]").val();
          $.ajax ({
        type:"POST",
        url:"check_username.php",
        data:'username='+firstName+'lastname='+lastName,
        success: function(data){
          $("#msg").html(data);
        }
      });
  }
</script>

<input type = "text" name = "user_firstname" placeholder="Firstname"autocomplete="off" required/>
<input type = "text" name = "user_lastname" placeholder="Lastname"autocomplete="off" required onkeyup="chkstudidnumber()" />