通过 ajax 加载的输入不会出现在请求正文中

Question

我有表单，在我的引导模式中有两个隐藏的输入和提交按钮

<form method="POST" action="http://127.0.0.1:8000/tours/23/edit" accept-charset="UTF-8" id="editVideoForm">
    <div class="modal-body modal-video-cont">
        <div class="modal-body-container">

        </div>
    </div>
    <div class="clearfix"></div>
    <div class="modal-footer">
        <div class="col-md-5 col-md-offset-7">
            <input class="btn green pull-left ddf_button_pad" name="update_video_form" type="submit" value="Save">

            <button data-dismiss="modal" type="button" class="btn green btn-outline pull-right ddf_button_pad">Cancel</button>

            <input class="position-input" id="editVidTempPos" name="template_position" type="hidden">
            <input id="editVidType" name="type" type="hidden" value="video">
        </div>
    </div>
</form>

在<div class="modal-body-container"> 元素中，我通过 ajax 加载内容（包含单选按钮）（工作正常）

<input type="radio" class="blockRadio video-input" name="resource" data-position="" value="http://127.0.0.1:8000/files/videos/424046_00_05_MM30_exercisefiles.mp4" style="position: absolute; opacity: 0;">

<input type="radio" class="blockRadio video-input" name="resource" data-position="" value="http://127.0.0.1:8000/files/videos/424046_00_05_MM30_exercisefiles.mp4" style="position: absolute; opacity: 0;">

但是，当我提交表单时，我在请求正文中看不到这些单选元素（应该有 resource 索引）

"_token" => "FF1zRnyORk9BzBUIWTj13PI06SZxYld1iLfpNZ0e"
"template_position" => "6"
"type" => "video"

这些输入出现在 DOM 树中。发送表单之前

$( "#editVideoForm" ).submit(function( event ) {
event.preventDefault();
$('#edit-vid').modal('hide');
var formdata = $(this).serialize();

$(this).serialize() 没有看到新的输入。控制台日志 _token=FF1zRnyORk9BzBUIWTj13PI06SZxYld1iLfpNZ0e&template_position=6&type=video

更新

在发送表单之前，触发此事件

event.preventDefault();
    $('#edit-vid').modal('hide');
    var formdata = $(this).serialize();
    var formUrl = $(this).attr('action');
    var position = $('#editVidTempPos').val();
    console.log('#placeForPos' + position);
    $.ajax({
        type: 'POST',
        url: formUrl,
        data: formdata,
        beforeSend: function( xhr ) {
            $('#placeForPos' + position).html('<div class="mt-overlay-2 margin-top-10">' +
                    '<div class="loader_wrapper">' +
                    '<img class="loader" src="/images/loader.gif" alt="Loader" />' +
                    '</div>' +
                    '</div>');
            //console.log(xhr);
        },
        success: function(data) {
            $('#placeForPos' + position).html(data);
            swal({title: "Video for position " +position+ " changed",type: "success"});

        },
        error:  function(xhr, str){
            alert('Error: ' + xhr.responseCode);

当它序列化时，它看不到新的输入，但是如果我删除这个事件，新的输入就会显示出来

Answer 1

同意@CBroe 的评论

更进一步，您可以尝试使用此代码来序列化并发布您的表单：

$("#editVideoForm").submit(function (e) { 
    var frm = $(this);
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        success: function (response)
        {
            alert(response);
        },
        error: function () { 
            alert('error')
        }
    });
    return false;
});

• 你需要 JQUERY
• 这部分代码将异步执行发布
• 如果您不需要异步发布，请在浏览器控制台中使用以下行来验证表单的语法是否正确（之后您必须找到并覆盖以错误方式发布表单的实际代码方式）：

alert(JSON.stringify($("#editVideoForm").serialize()); //UNTESTED

编辑

经过进一步检查，我发现您动态添加的两个输入是无线电输入。因此，给其中一个选中的属性：

<input type="radio" checked id= .......... //Focus on checked attribute

或者，当然，如果您希望输入中的文本将类型更改为文本：

<input type="text" ...... //Rest of tag omitted

EDIT2

检查这个sniper - 未经检查的收音机不会被序列化。

另外，我真诚地道歉，因为我已经告诉过你该属性是“选择的”，实际上它是“检查的”已修复

$().ready(function () {
  
  $('#serialize1').click(function () {
    alert(JSON.stringify($("#frmNotselect").serialize()));
  });
  
  $('#serialize2').click(function () {
    
    $("#frmSelect input[type='radio']").first().attr('checked', true);
    
    
    alert(JSON.stringify($("#frmSelect").serialize()));
  });
  
  $('#serialize3').click(function () {
    
$("#frmSelect").find("input[type='radio']").first().prop('checked', true);
    
    
    alert(JSON.stringify($("#frmSelect").serialize()));
  });
  
  $('#serialize4').click(function () {
    
    
    $("#frmSelect").find('input[type="radio"]').attr('type', 'text');
    
    alert(JSON.stringify($("#frmSelect").serialize()));
  });
  
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='frmNotselect'>
  <div>
    <h4>Not Selected</h4>
    <input type='radio' value='someValue' name='someName' />
    <input type='button' value='serialize' id='serialize1' />
  </div>
</form>

<form id='frmSelect'>
  <div>
    <h4>Selected</h4>
    <label>Normal Type</label>
    <input type='radio' checked value='someValue' name='resource' />
    <br/>
        <label>http://127.0.0.1:8000/files/videos/424046_00_05_MM30_exercisefiles.mp4</label>
    <input type='radio' checked value='http://127.0.0.1:8000/files/videos/424046_00_05_MM30_exercisefiles.mp4' name='resource'/>
    
    <input type='button' value='serialize' id='serialize2' />
    <input type='button' id='serialize3' value='force checked then serialize' />
    <input type='button' value='Convert to txt' id='serialize4' />
    
  </div>
</form>

EDIT3

好的，再看看那个sn-p。它已更新为向您显示您不能在一个时间点检查多个收音机。 HTML 只是不允许这样做。

所以我添加了一个将其转换为文本的函数，但仍然不能有两个具有相同名称的文本输入 - 只有其中一个会被发布。

这里要说明的是，收音机必须用于收音机用途。这些字段应该是具有唯一名称的文本或隐藏字段才能正确发布

Answer 2

<form method="POST" action="http://127.0.0.1:8000/tours/23/edit" accept-charset="UTF-8" id="editVideoForm">
<div class="modal-body modal-video-cont">
    <div class="modal-body-container">
<input type="radio" class="blockRadio video-input" name="resource" data-position="" value="http://127.0.0.1:8000/files/videos/424046_00_05_MM30_exercisefiles.mp4" style="position: absolute; opacity: 0;">

<input type="radio" class="blockRadio video-input" name="resource" data-position="" value="http://127.0.0.1:8000/files/videos/424046_00_05_MM30_exercisefiles.mp4" style="position: absolute; opacity: 0;">
    </div>
</div>
<div class="clearfix"></div>
<div class="modal-footer">
    <div class="col-md-5 col-md-offset-7">
        <input class="btn green pull-left ddf_button_pad" name="update_video_form" type="submit" value="Save">

        <button data-dismiss="modal" type="button" class="btn green btn-outline pull-right ddf_button_pad">Cancel</button>

        <input class="position-input" id="editVidTempPos" name="template_position" type="hidden">
        <input id="editVidType" name="type" type="hidden" value="video">
    </div>
</div>
</form>

请先从控制台检查您的隐藏字段是否添加。并检查您的表单是否正确序列化。