Question

我有一个表单，其中输入是使用Jquery动态创建的。如果我将元素硬编码与使用Jquery创建的元素完全相同，那么我可以很好地获得POST数据。但是，当动态创建元素时，它们不会提交POST数据。

用于创建元素的Jquery（使用Jquery-UI拖放元素，当它被删除时，它会在该区域中创建一个新元素。）

$(".drop-container").droppable({
    accept: ".draggable",
    addClasses: false,
    drop: function (event, ui) {
        var drag_name = ui.draggable.html();
        ui.draggable.hide();
        var new_body_count = '<tr><td class="btn btn-primary">' + drag_name + '</td><td class="badge"><input placeholder="Number of Kills" name="body_count" class="number-count" type="number"></td></tr>'
        $('.table').prepend(new_body_count)
    }
});

它创建的HTML -

<tr>
    <td class="btn btn-primary">
        <span class="glyphicon glyphicon-resize-vertical" aria-hidden="true">
            <input type="hidden" name="actor_id[]" value="162705079">
        </span>
        Julie Benz - J
    </td>
    <td class="badge">
        <input placeholder="Number of Kills" name="body_count" class="number-count" type="number">
    </td>
</tr>

它肯定在表单标签内。就像我说的，如果我对html进行硬编码，它就可以了，但是当输入是由Jquery创建的时候，没有帖子。我很确定它是动态创建的。

编辑 -

$('#update_form').on('submit', 'form', function(){
     $('.abridged-hide input').attr('disabled', true);
     $('.unabridged-hide input').attr('disabled', true);
});

编辑 - HTML表单的代码

<legend class="text-center">Film title: <?=$film_title_text?></legend>
<div class="col-md-3">
    <?=form_open('update/add_category');?>
        <label for="category">Category Title</label>
        <?=form_input($cat_title, '');?>
        <button type="submit" class="btn btn-primary">Add Category</button> 
    <?=form_close();?>
</div>
<div id="event_form" class="col-md-6">
    <?=form_open('/update/save_entry', $update_id);?>
    <?php if(isset($thenav['nav_id'])){?>
        <input type="hidden" name="film_id" value="<?=$q?>">
        <div class="form-group">
            <label for="add_category">Add Category</label>
            <?=form_dropdown('cat_id', $cat, '', $cat_id );?>
        </div>
        <div class="form-group">
           <label for="heading">Article Title</label>
           <?=form_input($title, '');?>
        </div>
        <div class="well">
             <div class="form-group">
                  <label for="heading">Add Custom Body Count Field</label>
                  <input type="text" class="form-control" name="body_count">
                  <button class="btn btn-primary" id="custom_body_cnt">Add Custom Body Count Field</button>
             </div>     
         </div>
         <div class="panel panel-primary">
             <div class="panel-heading">Abridged Cast</div>
         <div class="panel-body abridged-hide">
    <?php 
    foreach ($this_actors as $this_actor['name']) {
        $characters = $this_actor['name']->name;
        if(isset($characters[0])){
            $characters = $characters[0];
        }else{
            $characters = '';
        }
        echo "<span class='btn btn-primary draggable'><input type='hidden' class='actor_field' name='actor_id[]' value='".$this_actor['name']->id."'><span class='glyphicon glyphicon-resize-vertical' aria-hidden='true'></span> ".$this_actor['name']->name." - ".$characters."</span>";
    }?>
        </div>
    </div>
    <button id="slide-abridged" class="btn wide-button"><span class='glyphicon glyphicon-resize-vertical' aria-hidden='true'></span></button>

    <div class="panel panel-primary">
    <div class="panel-heading">Unabridged Cast</div>
         <button id="slide-unabridged" class="btn wide-button"><span class='glyphicon glyphicon-resize-vertical' aria-hidden='true'></span></button>
        <div class="panel-body unabridged-hide">
    <?php 
    foreach ($unabridged_actors as $this_actor['name']) {
        $characters = $this_actor['name']->characters;
        if(isset($characters[0])){
            $characters = $characters[0];
        }else{
            $characters = '';
        }
        echo "<input type='text' name='actor_name' value='".$this_actor['name']->id."'>";
        echo "<span class='btn btn-primary draggable'><span class='glyphicon glyphicon-resize-vertical' aria-hidden='true'></span> ".$this_actor['name']->name." - ".$characters."</span>";
    }?>
        </div>
    </div>
    <button id="slide-unabridged" class="btn wide-button"><span class='glyphicon glyphicon-resize-vertical' aria-hidden='true'></span></button>
    <?=form_textarea($article, '');?>
    </div>
    <div class="col-md-3">
        <span class="label label-default">Body Count Inventory</span>
        <div class="well drop-container clearfix">
            <table class="table">               
                <tr>
                    <td class="btn btn-primary">Total</td>
                    <td class="badge"><input placeholder="Number of Kills" name="film_total" class="film_total" disabled type="number"></td>
                </tr>
            </table>
        </div>
       <button type="submit" id="entry_submit" class="btn btn-primary">Update Page</button>
<?php }?>

<?=form_close()?>
</div>

Answer 1

我想问你一些更多的细节，但堆栈溢出不会让我。

无论如何，如果您通过jQuery处理提交事件的POST，很可能是您没有将事件绑定到动态添加的表单。

例如，如果您以这种方式将事件绑定到表单：

$("form").on("submit", function(){
    //do POST stuff
})

它只会在绑定事件时将事件附加到DOM中的表单。

为了将事件绑定到动态元素，您必须通过非动态元素来完成。例如，假设您的表单包含在ID为forms-container的div中。然后你可以附上这样的事件：

$("#forms-container").on("submit", "form", function(){
    //do POST stuff
})

这样，事件将附加到#forms-container内的所有元素，包括动态添加的元素。

Answer 2

我怀疑这是代表团问题，但我仍然不太明白。

这有效 -

$('#reg_form').on('submit', function(event){
    var address = $('input[name=address]').val();
    var city = $('input[name=city]').val();
    var state = $('select[name=state]').val();
    var zip = $('input[name=zip]').val();
   var format_address = address + '+' + city + '+' + state + '+' + zip;
   var password = $('input[name=password]').val();
   var password_verify = $('input[name=confirm_password]').val();
   var email = $('input[name=email]').val();
   var confirm_email = $('input[name=confirm_email]').val();
   if(email != confirm_email){
       event.preventDefault();
       $('.text-danger').show();
       $('.text-danger').html('Email Address does not match.');
  }
  if(password != password_verify)
 {
    event.preventDefault();
    $('.text-danger').show();
    $('.text-danger').html('Password does not match.');
 }
//call google maps api 
$.getJSON( "https://maps.googleapis.com/maps/api/geocode/json?address=" + format_address, function( data ) {
  console.log(data.results[0].geometry.location.lat);
  console.log(data.results[0].geometry.location.lng);
//populate form fields    
  $('input[name=lat]').val(data.results[0].geometry.location.lat);
  $('input[name=lng]').val(data.results[0].geometry.location.lng);
  });

  $(this).unbind('submit');
});

如果我取出了unbind，表单不会发布动态生成的值。我曾尝试过一些喜欢这样做的事情 -

$('.form_container').on('submit', 'form', function(event){

我尝试了一些其他的东西现在不能用。绑定防止默认，取消绑定防止默认。

但就像我说的那样，上面的代码与unbind有效。也许比我更了解约束力和授权的人可以权衡它。

Jquery动态创建输入而不是发布

2 个答案: