标准提交按钮提交表单，Bootstrap V3 按钮不会提交表单答案

【问题标题】：Standard Submit button submits form, Bootstrap V3 Button won't submit form标准提交按钮提交表单，Bootstrap V3 按钮不会提交表单
【发布时间】：2014-03-23 07:36:58
【问题描述】：

我在一个页面上有两个表单。一个用于上传图片，另一个用于其他目的。

如果我使用标准提交按钮，表单提交就好了，但如果我将它切换到 Twitter Bootsrap 按钮，与标准按钮具有相同的名称和 id，它不会提交表单。我有一些 JQuery 可以更改按钮的外观，但我已经删除了该代码，但它仍然无法正常工作。

   PHP Code
    if (isset($_POST['submit'])) {
    //upload functions
}

   JQuery Code
//Show Instructions When File Is Selected
    $("#file").on('change', function(e) {
               var uploadButton = $('#UploadImage');
               $(uploadButton).removeClass('btn-default');
               $(uploadButton).addClass('btn-upload');
               $("#uploadImageHolder").addClass('alert alert-danger');  
                $('#uploadStatus').html('');
                $('#uploadInstruct').html('<span><img src="../images/redarrow.png">PLEASE CLICK RED BUTTON TO UPLOAD THIS IMAGE</span>');
                $('#initMessage').html('');
                });
    //Show the Loading Screen When Upload Form Is Sent

    $("#myForm").submit(function() {
        $("#uploadSuccess").remove();
        $("#uploadImageHolder").remove();
        $.fancybox(
            '<p  class="text-center"><img src="../images/loading.gif" width="48px" height="48px"></p><p class="text-center">Please Wait While Your Image Is Processed</p>',
            {
                'modal'             : true,
                'overlayColor'      : '#000000',
                'width'             : 350,
                'height'            : 'auto',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });
    });

 <form action="" enctype="multipart/form-data" method="POST" class="form-inline" role="form" id="myForm">
<div class="form-group">
<p>
    <label for="file">File input</label>
    <input id="file" name="file" type="file">
</p>
<input name="NextImageID" type="hidden" value="<?php echo $NextImageID; ?>">
<p id="uploadImageHolder">
    <button type="submit" id="UploadImage" name="submit" class="btn btn-default"><span>Upload Image</span></button><span id='uploadInstruct'></span>
</p>
</div>                      
</form>

我搜索了高低，似乎无法弄清楚发生了什么。提前感谢您的帮助。

【问题讨论】：

您正在删除（实质上是删除）submit 事件时的按钮。为什么不只是hide() 而不是remove()？我不确定它是否会有所作为，但也许这是一个时间问题。此外，action="" 在您提交时不会执行任何操作...如果您不执行 ajax，您将需要一个 action URL。
表单被提交到同一页面，但我添加了页面 URL。没区别。我不认为我在提交之前删除了按钮。被删除的元素只是文本元素。如果我只是把它变成一个标准的表单提交按钮，它提交就好了。我需要对其进行样式设置，使表单变小，以便用户知道下一步该做什么。
被移除的元素，#uploadImageHolder 是持有你的按钮的容器......所以它实际上不仅仅是一个“文本元素”。移除容器时，也会移除其内容。否则，这一切都没有任何意义。将您的remove() 更改为hide()，仅此而已，因此您可以排除它。
我明白你在说什么，只是意识到它在做什么。我完全删除了$("#uploadImageHolder").remove();，但仍然没有提交表单。我还将按钮类型更改为“按钮”而不是“提交”，但这似乎也没有任何区别。
毫无意义。构建两个 jsFiddle 演示......一个带有工作版本，另一个带有这个损坏的版本，因此我们可以进行额外的故障排除。

标签： php jquery forms twitter-bootstrap

【解决方案1】：

我认为您可以将按钮类型更改为普通按钮。

在#UploadImage.click 中，您可以像这样调用表单提交操作：

$( "#other" ).click(function() {
  $( "#target" ).submit();
});

另外，form action 是空的，那是post url？

【讨论】：

$("#UploadImage").click(function() { $("#uploadSuccess").remove(); $("#uploadImageHolder").remove(); $("#myForm" ).submit(); $.fancybox( '<p class="text-center"><img src="../images/loading.gif" width="48px" height="48px"></p><p class="text-center">Please Wait While Your Image Is Processed</p>', { 'modal' : true, 'overlayColor' : '#000000', 'width' : 350, 'height' : 'auto', 'transitionIn' : 'none', 'transitionOut' : 'none' }); }); 新的jQuery代码，仍然没有提交。

【解决方案2】：

了解实际情况的唯一方法是使用浏览器的 DOM 检查工具检查动态 DOM 更改。

但是，表单提交的最低 HTML 标记如下...

<form action="yoururl">
    ....
    <input type="submit" />
</form>

【讨论】：