Jquery Dynamic div多个框并放入数据库

时间:2016-02-06 15:51:22

标签: javascript php jquery

我正在尝试使用字段创建一个动态div块但是很难将其设置为正确,以便每个div块字段在插入数据库时​​都不是相同的id。

不知道如何解决这个问题......任何帮助都请你在2天内挣扎。

如果我不再需要它,也不知道如何删除该块。 如何将其动态发布到我的数据库中?

<div id="boxwidget" class="box-widget">    
    <div class='form-group hideblockfield'><label><span class='error-title error-fields'></span>Title</label><input type='text' class='form-control' id='title' name='title' placeholder='Title'></div>    

    <div class="form-group hideblockfield">
        <label><span class="error-description error-fields"><?php echo $description_error ?></span>Description</label>
        <textarea rows="3" type="text" class="form-control" id="description" name="description" placeholder="Description"></textarea> 

    </div>

    <div id="hideimageroup" class="hideimageroup form-group">
        <label class="hideimagelabel"><span class="error-title error-fields"><?php echo $image_error ?></span>Image</label><br>
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" name="submit">Open gallery</button>
        <input type="hidden" class="form-control" id="image" name="image">
    </div>  

    <div id="hideiconroup" class="hideiconroup form-group">
        <label><span class="error-title error-fields"><?php echo $icon_error ?></span> Icon</label>
        <input type="text" class="form-control" id="icon" name="icon" placeholder="Icon">
    </div>                  

    <div class="form-group hideblockfield">
        <label><span class="error-title error-fields"><?php echo $buttontext_error ?></span>Button Text</label>
        <input type="text" class="form-control" id="buttontext" name="buttontext" placeholder="Button Text">
    </div>  

    <div class="form-group hideblockfield">
        <label><span class="error-btnurl error-fields"><?php echo $buttonurl_error ?></span>Button Url</label>
        <input type="text" class="form-control" id="buttontext" name="buttontext" placeholder="Button Url">
    </div>  
</div> 


添加新盒子

function createnewblock(){

    var $div = $('div[id^="boxwidget1"]:last');

    // And increment that number by 1
    var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

    // Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
    var $klon = $div.clone().prop('id', 'boxwidget1'+num );

    $('#boxarea').append($klon);  

}

1 个答案:

答案 0 :(得分:1)

首先,您在JS中的第一行可能未定义,因为页面上没有任何ID boxwidget1

删除元素:

$('element query').remove()

其次,你要做的事情并不是很清楚

修改

元素的id没有任何相关服务器端,它是映射的name属性。此外,name元素仅适用于包含在form标记中的表单元素,除非您通过JS发送数据。如果没有更多信息,很难清楚地知道发生了什么

您是否可以创建jsfiddle