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

结帐此代码段 - 未经检查的电台不会被序列化。

此外，我真诚的道歉，因为我告诉你属性是“选中”，实际上是“已检查”已修复

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

好的，请再看看那个片段。它已经更新，向您显示您不能在一个时间点检查多个无线电。 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>

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

通过ajax加载的输入不会显示在请求正文

2 个答案: