javascript - 通过 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

编辑

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

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

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

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

编辑2

检查这个片段 - 未经检查的 radio 不会被序列化。

此外，我真诚地道歉，因为我已经告诉过您该属性是“选择”的，而实际上它是“选中”的已修复

$().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>

编辑3

好的，再次看一下该片段。它已更新，以表明您不能在同一时间点检查多于一台 radio 。 HTML 只是不允许这样做。

因此，我添加了一个将其转换为文本的函数，但仍然不能有两个同名的文本输入 - 只能发布其中一个。

这里要指出的是， radio 必须用于 radio 目的。这些字段应该是具有唯一名称的文本或隐藏字段，以便正确发布