似乎这个问题似乎重复了,但我的问题却没有什么不同,我确实在其他问题中找到了答案,所以我将其作为一个新主题开始。
我有一个表单,其中有一个点击链接,它将在form内的div上添加html内容。用户可以多次添加。但是当我提交表格时。使用javascript第一次添加的字段是通过表单提交的,但如果我多次添加,则第二次和之后的表单的数据不会通过表单发布。 我在下面发布了我的代码,任何人都可以帮我找到并解决问题。
<form action="<?php echo $this->getUrl('children/index/addChild') ?>" method="post" id="form-validate" autocomplete="off">
<div class="fieldset">
<?php //echo $this->getBlockHtml('formkey')?>
<h2 class="legend"><?php echo $this->__('Child Name') ?></h2>
<?php if(sizeof($model)==0): ?>
<a href="javascript:show()" id="addchild">Add Child</a>
<div id="child" style="display:none;">
<li>
<div class="field">
<label for="firstname" class="required"><em>*</em><?php echo $this->__('First Name') ?></label>
<div class="input-box">
<input type="text" name="firstname" id="firstname" value="<?php ?>" title="<?php echo $this->__('First Name') ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="lastname" class="required"><em>*</em><?php echo $this->__('Last Name') ?></label>
<div class="input-box">
<input type="text" name="lastname" id="lastname" value="<?php ?>" title="<?php echo $this->__('Last Name') ?>" class="input-text required-entry" />
</div>
</div>
</li>
<li>
<div class="field">
<label for="schoolname" class="required"><em>*</em><?php echo $this->__('School Name') ?></label>
<div class="input-box">
<select id='schoolname' name='schoolname'>
<option value="0">Select School</option>
<?php foreach ($schools as $key => $school): ?>
<option value="<?php echo $school['school_id']; ?>"><?php echo $school['school_name'] ?></option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="field">
<label for="year" class="required"><em>*</em><?php echo $this->__('Year') ?></label>
<div class="input-box">
<input type="text" name="year" id="year" value="<?php ?>" title="<?php echo $this->__('Year') ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="class"><?php echo $this->__('Class(if applicable)') ?></label>
<div class="input-box">
<input type="text" name="class" id="class" value="<?php ?>" title="<?php echo $this->__('Class') ?>" class="input-text" />
</div>
</div>
</li>
<button type="submit" title="<?php echo $this->__('Save') ?>" class="button"><span><span><?php echo $this->__('Save') ?></span></span></button>
</div>
<?php else: ?>
<?php $i=1;
foreach ($model as $key => $value): ?>
<div id="child">
<?php
$arr = array();
$id= $value['child_id'];
?>
<!-- <button type="button" id="removechild">Remove Child</button> -->
<a href="javascript:remove('<?php echo $id; ?>')" id="removechild">Remove Child</a>
<li>
<input type="hidden" value="<?php echo $id; ?>" name="childid<?php echo $i ?>" />
<div class="field">
<label for="firstname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('First Name') ?></label>
<div class="input-box">
<input type="text" name="firstname<?php echo $i ?>" id="firstname<?php echo $i ?>" value="<?php echo $value["firstname"]; ?>" title="<?php echo $this->__("First Name") ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="lastname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('Last Name') ?></label>
<div class="input-box">
<input type="text" name="lastname<?php echo $i ?>" id="lastname<?php echo $i ?>" value="<?php echo $value['lastname']; ?>" title="<?php echo $this->__('Last Name') ?>" class="input-text required-entry" />
</div>
</div>
</li>
<li>
<div class="field">
<label for="schoolname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('School Name') ?></label>
<div class="input-box">
<select id='schoolname<?php echo $i ?>' name='schoolname<?php echo $i ?>' value='<?php echo $value['school_id'] ?>' >
<option value="0">Select School</option>
<?php foreach ($schools as $key => $school): ?>
<option value="<?php echo $school['school_id']; ?>" <?php if($school['school_id']==$value['school_id']){echo "selected" ;} ?> ><?php echo $school['school_name'] ?></option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="field">
<label for="year<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('Year') ?></label>
<div class="input-box">
<input type="text" name="year<?php echo $i ?>" id="year<?php echo $i ?>" value="<?php echo $value['age']; ?>" title="<?php echo $this->__('Year') ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="class<?php echo $i ?>"><?php echo $this->__('Class(if applicable)') ?></label>
<div class="input-box">
<input type="text" name="class<?php echo $i ?>" id="class<?php echo $i ?>" value="<?php echo $value['class']; ?>" title="<?php echo $this->__('Class') ?>" class="input-text" />
</div>
</div>
</li>
</div>
<?php $i++; ?>
<?php endforeach; ?>
<input type="hidden" value="<?php echo $i; ?>" name="count" />
<div id="addition"></div>
<a href="javascript:duplicate(this.val)" id="anotherchild" value="1">Add Another Child</a>
<input type="hidden" id="test" value="0" name="test"/>
<button type="submit" title="<?php echo $this->__('Save') ?>" class="button"><span><span><?php echo $this->__('Save') ?></span></span></button>
<?php endif; ?>
</form>
,脚本是
function duplicate(){
var id=document.getElementById('test').value;
var div = document.createElement('div');
div.className = "row"+id;
div.innerHTML = '<label for="firstname" class="required"><em>*</em><?php echo $this->__("First Name") ?></label><div class="input-box"><input type="text" name="firstname'+id+'" id="firstname'+id+'" title="<?php echo $this->__("First Name") ?>" class="input-text required-entry" /></div><label for="lastname" class="required"><em>*</em><?php echo $this->__("Last Name") ?></label><div class="input-box"><input type="text" name="lastname'+id+'" id="lastname'+id+'" title="<?php echo $this->__("Last Name") ?>" class="input-text required-entry" /></div><label for="schoolname" class="required"><em>*</em><?php echo $this->__("School Name") ?></label><div class="input-box"><select id="schoolname'+id+'" name="schoolname'+id+'"><option value="0">Select School</option><?php foreach ($schools as $key => $school): ?><option value="<?php echo $school["school_id"]; ?>" <?php if($school["school_id"]==$value["school_id"]){echo "selected" ;} ?> ><?php echo $school["school_name"] ?></option><?php endforeach;?></select></div><label for="year" class="required"><em>*</em><?php echo $this->__("Year") ?></label><div class="input-box"><input type="text" name="year'+id+'" id="year'+id+'" title="<?php echo $this->__("Year") ?>" class="input-text required-entry" /></div><label for="class"><?php echo $this->__("Class(if applicable)") ?></label><div class="input-box"><input type="text" name="class'+id+'" id="class'+id+'" title="<?php echo $this->__("Class") ?>" class="input-text" /></div>';
document.getElementById('addition').appendChild(div);
document.getElementById('test').value= ++id;
}
不要为混乱的代码而烦恼,我只想在javascript中添加html命名为&#34;添加&#34;。 让我更清楚地解释我的情景。有一个链接到&#34;添加另一个孩子&#34;当我点击这个链接时,会出现html块,这是javascript里面的div&#34;另外&#34;。我也可以添加多个孩子。但提交的只有一个孩子。 任何人都可以帮忙。感谢任何建议。
答案 0 :(得分:0)
请参阅此jsfiddle。它有提交处理程序,可以序列化您的数据并将其发送到服务器。
$('#form-validate').on('submit', function (e) {
//prevent the default submithandling
e.preventDefault();
alert($(this).serialize())
//send the data of 'this' (the matched form) to yourURL
$.post('yourSubmitUrl.php', $(this).serialize());
});