我正在使用 Javascript 动态创建一个 div，并尝试使用 PHP 在数据库中注册数据。但我正在测试打印我在开始在数据库中注册之前填写的信息，但它只是打印来自“主”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'];
}
}
?>
有什么方法可以打印我动态创建的字段吗？
最佳答案
遗憾的是，我无法提供任何有关 jQuery 的指导，但结合使用标准的 vanilla Javascript 和 PHP，您可以做这样的事情。您的原始表单使用 multi-part/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>
关于javascript - 如何动态创建一个新的div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34436751/