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 (e.g. 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

Mayank Pandeyz · Accepted Answer · 2017-04-03 12:15:10Z

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);
        }
    });
}

answered Apr 3, 2017 at 12:15

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahesh Singh Chouhan · Accepted Answer · 2017-04-03 12:29:34Z

1

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.

edited Apr 3, 2017 at 12:29

answered Apr 3, 2017 at 12:21

Mahesh Singh Chouhan

2,5881 gold badge18 silver badges26 bronze badges

Comments

praveen_programmer · Accepted Answer · 2017-04-03 12:37:37Z

1

<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()" />

edited Apr 3, 2017 at 12:37

answered Apr 3, 2017 at 12:27

praveen_programmer

1,06212 silver badges25 bronze badges

3 Comments

Dranreb Over a year ago

why is there a ` var a = $("input[name=user_lastname]").val();` ?

praveen_programmer Over a year ago

@Dranreb It was just misprint line. I have removed that line.

Dranreb Over a year ago

It works but has flaws. When I "get" the fname and lname in the php, it only reads the fname which is for example I wrote "firstname" in the firstname box and "lastname" in the lastname box, the output of fname is firstnamelname=lastname while the lname is not detected.

Collectives™ on Stack Overflow

Get two value inputs in javascript

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related