使用javascript添加的表单元素不是从post方法发送的

时间:2014-12-05 05:13:31

标签: javascript jquery html forms

似乎这个问题似乎重复了,但我的问题却没有什么不同,我确实在其他问题中找到了答案,所以我将其作为一个新主题开始。

我有一个表单,其中有一个点击链接,它将在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;。我也可以添加多个孩子。但提交的只有一个孩子。 任何人都可以帮忙。感谢任何建议。

1 个答案:

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