动态表单插入数据库

时间:2016-01-10 04:04:15

标签: javascript php css html5

我的整个注册页面代码在这里。 Link

我尝试将此动态字段添加到注册页面代码中。

<script>

 var i = 1;
 function addKid(){
    if (i <= 6){
      i++;
 var div = document.createElement('div');
 div.style.width = "44%";
 div.style.height = "26px";
 div.style.color = "white";
 div.setAttribute('class', 'myclass');
 div.innerHTML = 'Child : <input type="text" name="child_'+i+'" > Ages : <input type="text" name="ages_'+i+'"><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';
 document.getElementById('kids').appendChild(div);
 }
 }
 function removeKid(div) {
     document.getElementById('kids').removeChild( div.parentNode );
 i--; }

         <div id="kids">
     Child : <input id="child_1" type="text" onfocus="emptyElement('status')" onkeyup="restrict('mwhen')" maxlength="50">

      Ages :  <input id="ages_1" type="text" onfocus="emptyElement('status')" onkeyup="restrict('mwhen')" maxlength="10"><input type="button" id="add_kid()" onClick="addKid()" value="+" />
       </div>

我可以得到&#34; child_1 / chi&#34;和&#34; ages_1 / ags&#34;插入我的数据库。没问题。

当我尝试在我的注册中创建一个额外的动态字段时,&#34; child_2和ages_2&#34; ..... 然后,我无法从&#34; child_2和age_2&#34;中获取该信息。插入我的数据库。

有人可以告诉我自己做错了什么,因为我无法将这些信息输入我的数据库。我想打电话给#34; child_2 / chi2&#34;和&#34;年龄_2 / ags2&#34;对于els之前它会起作用。?

if(isset($_POST["u"])){
// CONNECT TO THE DATABASE
include_once("php_includes/db_conx.php");
// GATHER THE POSTED DATA INTO LOCAL VARIABLES
$u = preg_replace('#[^a-z0-9]#i', '', $_POST['u']);
$e = mysqli_real_escape_string($db_conx, $_POST['e']);
$p = $_POST['p'];
$g = preg_replace('#[^a-z]#', '', $_POST['g']);
$chi = preg_replace('#[^a-z.,-/ ]#i', '', $_POST['chi']);
$ags = preg_replace('#[^0-9.]#i', '', $_POST['ags']);
$chi2 = preg_replace('#[^a-z.,-/ ]#i', '', $_POST['chi2']);
$ags2 = preg_replace('#[^0-9.]#i', '', $_POST['ags2']);
$c = preg_replace('#[^a-z ]#i', '', $_POST['c']);
// GET USER IP ADDRESS
$ip = preg_replace('#[^0-9.]#', '', getenv('REMOTE_ADDR'));
// DUPLICATE DATA CHECKS FOR USERNAME AND EMAIL
$sql = "SELECT id FROM users WHERE username='$u' LIMIT 1";
$query = mysqli_query($db_conx, $sql); 
$u_check = mysqli_num_rows($query);
// -------------------------------------------
$sql = "SELECT id FROM users WHERE email='$e' LIMIT 1";
$query = mysqli_query($db_conx, $sql); 
$e_check = mysqli_num_rows($query);
// FORM DATA ERROR HANDLING
if($u == "" || $e == "" || $p == "" || $g == "" || $chi == "" || $ags == "" || $chi2 == "" || $ags2 == "" || $c == ""){

...

        $sql = "INSERT INTO users (username, email, password, gender, child_1, ages_1, child_2, ages_2, country, ip, signup, lastlogin, notescheck)       
            VALUES('$u','$e','$p_hash','$g','$chi','$ags','$chi2','$ags2','$c','$ip',now(),now(),now())";
    $query = mysqli_query($db_conx, $sql); 
    $uid = mysqli_insert_id($db_conx);

...

function restrict(elem){
var tf = _(elem);
var rx = new RegExp;
if(elem == "email"){
    rx = /[' "]/gi;
} else if(elem == "username"){
    rx = /[^a-z0-9]/gi;
} else if(elem == "child_1"){
    rx = /[^a-z.,-/ ]/gi;
} else if(elem == "ages_1"){
    rx = /[^0-9.]/gi;
} else if(elem == "child_2"){
    rx = /[^a-z.,-/ ]/gi;
} else if(elem == "ages_2"){
    rx = /[^0-9.]/gi;
} 
tf.value = tf.value.replace(rx, "");

} ..

function signup(){
var u = _("username").value;
var e = _("email").value;
var p1 = _("pass1").value;
var p2 = _("pass2").value;
var c = _("country").value;
var chi = _("child_1").value;
var ags = _("ages_1").value;
var chi2 = _("child_2").value;
var ags2 = _("ages_2").value;
var g = _("gender").value;
var status = _("status");
if(u == "" || e == "" || p1 == "" || p2 == "" || c == "" || chi == "" || ags == "" || chi2 == "" || ags2 == "" || g == ""){

...

        }
    ajax.send("u="+u+"&e="+e+"&p="+p1+"&c="+c+"&chi="+chi+"&ags="+ags+"&chi2="+chi2+"&ags2="+ags2+"&g="+g);
}

...

1 个答案:

答案 0 :(得分:0)

请将您的孩子和年龄保存在数组中并将其传递给ajax。这样你就可以循环下面给出的孩子和年龄,并将其插入表格。

对于密码和符合密码,请使用js。并在前端验证它自己。在表格中单独保存密码就足够了。

尝试理解此代码并根据需要进行更改。但我解决了你充满活力的孩子和年龄问题。运行此代码

page1.php中

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</script></script>
    <script type="text/javascript">
         $(document).ready(function(){
             $("#input_form").submit(function(){
             var querystring = $(this).serialize();
                $.ajax({
            url: 'save_child.php',
            type: "POST",
            data: querystring,
            success: function(data) {
            alert("jhkl");
                    }
            });
                 //$('#result').html(querystring);
                 return false;
                 });
        });
    </script>
    <title>Serialize</title>
</head>
<body>
    <form  id="input_form">
        first name: <input type="text" name="username" id="first name"/><br />
     password: <input type="text" name="password" id="last name"/><br />
        email: <input type="text" name="email" id="email"/><br />
     <div id="kids">
     Child : <input id="child_1" type="text" onfocus="emptyElement('status')" onkeyup="restrict('mwhen')" maxlength="50" name="child[]">

      Ages :  <input id="ages_1" type="text" onfocus="emptyElement('status')" onkeyup="restrict('mwhen')" maxlength="10" name="ages[]"><input type="button" id="add_kid()" onClick="addKid()" value="+" />
       </div>  

       <input type="submit" value="send" name="submit" />
    </form>
    <p id="result"></p>
</body>
</html><script>

 var i = 1;
 function addKid(){
    if (i <= 5){
      i++;
 var div = document.createElement('div');
 div.style.width = "44%";
 div.style.height = "26px";
 div.style.color = "white";
 div.setAttribute('class', 'myclass');
 div.innerHTML = 'Child : <input type="text" name="child[]" > Ages : <input type="text" name="ages[]"><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';
 document.getElementById('kids').appendChild(div);
 }
 }
 function removeKid(div) {
     document.getElementById('kids').removeChild( div.parentNode );
 i--; }
</script>

save_child.php

<?php
$child=$_REQUEST['child'];// child array
$ages=$_REQUEST['ages'];
$InputArray = array();
$conn=mysqli_connect("localhost","root","","tes");// data base connection


$InputArray['username']=$_REQUEST['username'];// get datas and store in a array named InputArray
$InputArray['password']=$_REQUEST['password'];
$InputArray['email']=$_REQUEST['email'];
$i=1;
foreach($child as $val){
$b=$i-1;
$InputArray['child_'.$i]=$val;
$InputArray['age_'.$i]=$ages[$b];
$i++;
}


$sql="CREATE TABLE IF NOT EXISTS `userss` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) NOT NULL,
  `email` varchar(20) NOT NULL,
  `password` varchar(20) NOT NULL,
  `country` varchar(20) NOT NULL,
  `child_1` varchar(20) NOT NULL,
  `age_1` varchar(20) NOT NULL,
  `child_2` varchar(20) NOT NULL,
  `age_2` varchar(20) NOT NULL,
  `child_3` varchar(20) NOT NULL,
  `age_3` varchar(20) NOT NULL,
  `child_4` varchar(20) NOT NULL,
  `age_4` varchar(20) NOT NULL,
  `child_5` varchar(20) NOT NULL,
  `age_5` varchar(20) NOT NULL,
  `ip` varchar(60) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ";

    mysqli_query($conn,$sql);
if (count($InputArray) > 0) {
            while (list($key, $val) = each($InputArray)) {
                if(!empty($val)){
                    $fields.= $key . ',';
                    $valset.= "'". $val ."',";
                }
            }
        }   

        $fields = trim($fields, ',');
        $valset = trim($valset, ',');
        $sql = "INSERT INTO userss ($fields) VALUES ($valset)";

        mysqli_query($conn,$sql);
?>

我在你的代码中注意到的另一件事。

$ sql =&#34; SELECT id FROM users WHERE username =&#39; $ u&#39;限制1&#34 ;;

$ sql =&#34; SELECT id FROM users WHERE email =&#39; $ e&#39;限制1&#34 ;;

你已经写了两个查询。把它作为给定的单身

$ sql =&#34; SELECT id FROM users WHERE email =&#39; $ e&#39;和用户名=&#39; $ u&#39;限制1&#34 ;;