Question

我正在使用Javascript动态创建div并尝试使用PHP在数据库中注册数据。但我正在测试打印我填写的信息，然后才开始在数据库中注册，但它只打印来自“main”div的信息，而不是来自动态创建的div。我该如何创建div？

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x <= max_fields) { //max input box allowed
      x++;
      $(wrapper).append('<div id="loopdiv"><h2>Dilemma</h2> Video länk: <br><textarea type="text" rows="1" cols="40" name="videolink"></textarea><div>1.<input type="text" name="answer1" id="answer"/><select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></div><div>2.<input type="text" name="answer2" id="answer"/><select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></div><div>3.<input type="text" name="answer3" id="answer"/><select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></div><div>4.<input type="text" name="answer4" id="answer"/><select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></div><br><br></div>'); //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

<form action="adddilemman.php" method="post" enctype="multipart/form-data">
  <br><br>  
  <div name="loopdiv" id="loopdiv">
    <h2 name="h2" id="h2">Dilemma</h2> 
    Video länk: <br>
    <textarea type="text" rows="1" cols="40" name="videolink"></textarea>
    <div>
        1.
        <input type="text" name="answer1" id="answer"/>
         <select>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
           <option value="6">6</option>
           <option value="7">7</option>
           <option value="8">8</option>
           <option value="9">9</option>
           <option value="10">10</option>
        </select>
    </div>
    <div>
        2.
        <input type="text" name="answer2" id="answer"/>
        <select>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>              
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
       </select>           
    </div>
    <div>
        3.
        <input type="text" name="answer3" id="answer"/>
        <select>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
       </select>
    </div>
    <div>
        4.
        <input type="text" name="answer4" id="answer"/>
        <select>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
       </select>
    </div>
    <br><br></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="input_fields_wrap">
      <div>
      </div>
    </div>
  <button class="add_field_button">Lägg till fler svar</button>	
  <button type="submit" name="submit">Submit</button>	
</form>

这是打印我在字段中写的东西的代码

<?php
If(isset($_REQUEST['submit'])!=''){

   If($_REQUEST['videolink']=='' || $_REQUEST['answer1']=='' || $_REQUEST['answer2']==''|| $_REQUEST['answer3']=='' || $_REQUEST['answer4']==''){

      Echo "please fill the empty field.";

   } Else {

      Echo $_REQUEST['videolink'];
   }
}
?>

有没有办法打印我动态创建的字段？

Answer 1

遗憾的是，我不能提供真正的jQuery指导，但使用标准的vanilla Javascript和PHP，你可以做这样的事情。您的原始表单使用多部分/ formdata作为enctype，因此可以使用核心javascript中提供的FormData对象轻松模拟。

要将数据发送到所需的adddilemman.php脚本，请更改ajax调用中的URL。因此，不要使用document.location.href将其更改为'adddilemman.php'

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();
        /* This is here only to simplify development and display here */

        $delimiter=isset( $_POST['delimiter'] ) ? $_POST['delimiter'] : '|';

        /* process form submission: for testing purposes just echo out data sent */
        foreach( $_POST as $field => $value ) {
            if( $field!='delimiter' ){
                if( is_array( $value ) ) echo 'Array values: '.$field.'='.rtrim( str_replace( $delimiter, ',', implode( ' ', $value ) ), ',' ).'<br />';
                else echo 'String value: '.$field.'='.trim( str_replace( $delimiter, '', $value ) ).'<br />';
            }
        }


        exit(); 
    }
?>
<!doctype html>
<html>
    <head>
        <title>Video do-hickey</title>
        <style>
            form,
            #loopdiv section{
                display:block!important;
                width:80%;
                height:auto;
                float:none;
                margin:0.25rem auto;    
                box-sizing:content-box;
            }
            h2{
                margin:0 auto 1rem auto;    
            }
            #loopdiv section{
                border:1px solid gray;
                clear:both;
                min-height:250px;
                padding:0.25rem;                
            }
            textarea,
            input[type='text'],
            select{
                width:40%;
                height:2rem;
            }
            label,
            section div{
                display:block;
                clear:both;
                float:left;
                min-width:80%;  
                width:auto;
            }
            div textarea,
            div input[type='text'],
            div select{
                /*float:right;  */
            }
            textarea{
                resize:none;
            }
        </style>
        <script type='text/javascript' charset='utf-8'>
            var max_input_fields=10;
            var delimiter='|';

            function http( data, callback ){
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if( xhr.readyState==4 && xhr.status==200 ) callback.call( this, xhr.response );
                };
                xhr.open( 'POST', document.location.href, true );
                xhr.send( data );
            }

            function cbhttp(r){
                document.querySelectorAll('output')[0].innerHTML=r  
            }

            function bindEvents(){
                var oBttnAdd=document.getElementById('bttnadd');
                var oBttnSub=document.getElementById('bttnsub');
                var oForm=document.getElementById('dynelems');
                var oParent=document.getElementById('loopdiv');

                oBttnSub.onclick=function(e){
                    /* scan the form and get values from all elements ( including dynamcially added ) and submit the form via xhr */
                    var col=oForm.querySelectorAll('input[type="text"],textarea,select');
                    var data=new FormData();
                        data.append('delimiter',delimiter);

                    for( var n in col ) if( col[n] && col[n].nodeType==1 ) {
                        data.append( col[n].name, col[n].value.replace( delimiter, '' ) + delimiter );
                    }
                    http.call( this, data, cbhttp );
                };

                oBttnAdd.onclick=function(e){
                    /* Add new rows based upon selected option from dropdown menu */
                    var col=oParent.querySelectorAll('section[data-id]');
                    var length=col.length;
                    if( length < max_input_fields ){
                        var newid=parseInt( col[ length-1 ].dataset.id ) + 1;
                        var clone=oParent.childNodes[1].cloneNode( true );
                            clone.dataset.id=newid;
                            /* Set new name for the textarea */
                            clone.childNodes[3].childNodes[1].name='videolink'+newid;

                        oParent.appendChild( clone );
                    }
                }
            }
            document.addEventListener('DOMContentLoaded', bindEvents,false);
        </script>
    </head>
    <body>
        <form id='dynelems' action='adddilemman.php' method='post'>
            <div id='loopdiv'>
            <?php
                /* Data-id is used by js to determine next suitable id */
                echo "
                    <section data-id=1>
                        <h2>Dilemma</h2>
                        <div>Video länk:<textarea rows='1' cols='40' name='videolink1'></textarea></div>";

                for( $i=1; $i <= 4; $i++ ){

                    /* Add four text fields and four select menus */
                    echo "
                        <div>
                            Answer: <input type='text' name='answer{$i}[]'/>
                            <select name='options{$i}[]'>";

                    /* Add options to each select menu */
                    for( $j=1; $j <= 10; $j++ ){
                        echo "<option value={$j}>{$j}";
                    }

                    /* Close each nested div & select menu */
                    echo "
                            </select>
                        </div>";
                }
                /* Close initial section */
                echo "
                    </section>";

            ?>
            </div>

            <div class='input_fields_wrap'>
              <div></div> 
            </div>

            <input id='bttnadd' type='button' name='add_field_button' value='Lägg till fler svar'/>
            <input id='bttnsub' type='button' name='sub' value='Submit'/>
        </form>
        <output></output>
    </body>
</html>

Answer 2

您的input元素应该是数组

在下面的jQuery代码中附加

<div id="loopdiv">
  <h2>Dilemma</h2>
  Video länk: <br>
  <textarea type="text" rows="1" cols="40" name="videolink[]"></textarea>
  <div>1.
    <input type="text" name="answer1[]" id="answer"/>
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>
  <div>2.
    <input type="text" name="answer2[]" id="answer"/>
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>
  <div>3.
    <input type="text" name="answer3[]" id="answer"/>
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>
  <div>4.
    <input type="text" name="answer4[]" id="answer"/>
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>
  <br>
  <br>
</div>

如何动态创建新的div？

2 个答案: