I made this, but how can I insert this phone number into a MySQL database in PHP?
How can I make an input element with a separator for phone number digits, and insert them into a MySQL database?
Here is the HTML code:
<!DOCTYPE html> <html> <style type="text/css"> table,td{ border-collapse: collapse; padding:0; border:2px solid black; } td input{ width:20px; } </style> <script type="text/javascript"> var currentDigit = 1; function isNumberKey(evt){ var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } function moveToNextInputDigit(e){ currentDigit = parseInt(e.id.replace("digit","")); currentDigit++; if(e.value.length == 1 && currentDigit<=10 && document.getElementById("digit"+currentDigit).value.length!=1) { document.getElementById("digit"+currentDigit).focus(); } } function getPhoneNumber() { var phoneNumber = ""; for(var i=1;i<=10;i++) { phoneNumber += document.getElementById("digit"+i).value; } alert("Phone Number: "+ phoneNumber); } </script> <body> <table> <tr> <td><input id="digit1" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> <td><input id="digit2" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> <td><input id="digit3" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> <td><input id="digit4" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> <td><input id="digit5" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> <td><input id="digit6" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> <td><input id="digit7" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> <td><input id="digit8" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> <td><input id="digit9" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> <td><input id="digit10" type="text"maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> </tr> </table> <input type = "button" value="Get Phone Number" onClick="getPhoneNumber()"> </body> </html>
I've added a line to your function below to include jQuery $.post()
. You'll find more info about .post
here . This will add the phone number to the database by sending it to insertphonenumber.php
.
You will need to include a link to jquery at the head of your page
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js">
</script>
I've also edited the answer to include a way to separate each digit with a . using the str_split()
and implode()
php functions
You can return
data such as a html alert to confirm this phone number has been added to the database, I can add this in if you like, but I've kept it simple here.
function getPhoneNumber()
{
var phoneNumber = "";
for(var i=1;i<=10;i++)
{
phoneNumber += document.getElementById("digit"+i).value;
}
// alert("Phone Number: "+ phoneNumber);
// Add in this line to send phoneNumber to insertphonenumber.php via ajax
$.post("insertphonenumber.php", { Number: phoneNumber});
}
PHP page:
<?php //insertphonenumber.php
$username = "root";
$password = "yourDBpassword";
$host = "localhost";
$dbname = "yourDBname";
$db = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8", $username, $password, $options);
$options = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8');
$phoneNumber = $_POST['Number'];
// This will need to be sanitised from SQL injection or XSS attacks.
// have a look at using htmlentities();
// This next line puts a fullstop between each
// str_split() turns the string into an array of individual characters
// Implode takes the array and puts a . between each item.
$phoneNumberSplit = implode('.',str_split($phoneNumber));
// $query = " INSERT INTO yourTable(columnName) VALUES( :number ) ";
$query = " INSERT INTO tablename(columnName) VALUES( :number ) ";
$query_params = array('number' => $phoneNumberSplit);
try
{
// Prepare and execute the query to insert the phoneNumber into the DB
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex)
{
// On a production website, you should not output $ex->getMessage().
// It could provide an attacker with sensitive information about your code.
die("Failed to run query: " . $ex->getMessage());
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.