如何将单独字段中每个数字的电话号码插入数据库?

时间:2017-03-03 08:23:33

标签: php html mysql

我做了这个,但是如何在PHP中将这个电话号码插入MySQL数据库?

Screenshot of phone number input with each number in a separate box

如何使用电子编号数字的分隔符创建输入元素,并将它们插入MySQL数据库?

以下是HTML代码:

<!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>

1 个答案:

答案 0 :(得分:0)

我在下面的函数中添加了一行,以包含jQuery $.post()。您会找到有关.post here的更多信息。这会将电话号码发送到insertphonenumber.php,将电话号码添加到数据库中。

您需要在页面的头部添加指向jquery的链接

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js">
</script>

我还编辑了答案,包括用a分隔每个数字的方法。使用str_split()implode() php函数

您可以return数据(例如html提醒)确认此电话号码已添加到数据库中,如果您愿意,我可以添加此内容,但我在此处保持简单。

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页面:

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