Question

你有非常简单的html与表单，但提交不起作用。我检查了我在stackoverflow上找到的多个解决方案，但仍然无效。

<form class="form-horizontal well" method="post" id="upload_excel" name="upload_excel" enctype="multipart/form-data">
    <fieldset>                  
        <div class="control-group">
           <div class="control-label">
               <label>Excel File:</label>
           </div>
            <div class="controls">
                <input type="file" name="file" id="file" class="input-large">
            </div>
        </div>

        <div class="control-group">
            <div class="controls">
                <input type="submit" id="btn" name="Import" class="btn btn-primary button-loading" data-loading-text="Loading...">Upload</input>
            </div>
        </div>
    </fieldset>

和JavaScript在同一个文件中：

<script type="text/javascript" language="javascript" >
    $(document).ready(function (e) {
         $('#btn').on('submit',(function(e) {
             alert('test');
        }));    
     });
</script>

当我点击btn时，不应提交表格并发出警告窗口？

Answer 1

尝试将on submit功能放在表单上而不是按钮上。

<script type="text/javascript" language="javascript" >
    $(document).ready(function (e) {
         $('#upload_excel').on('submit',(function(e) {
             alert('test');
        }));    
     });
</script>

Answer 2

首先，我使用以下说明警告显示提交按钮的消息：
```
$('#btn').on('click',(function(e) {alert("Submitted");}));
```
之后我确保使用 jQuery 提交表单函数.submit()：
```
$( "#upload_excel" ).submit();
```

最后，这是整个脚本：

<script type="text/javascript" language="javascript" >
   $(document).ready(function (e) {
       $('#btn').on('click',(function(e) {
           alert("Submitted");
           $( "#upload_excel" ).submit();
       }));
   });
</script>

我的回答基于jQuery documentation，＆amp;一个Stackoverflow answer。

Answer 3

您有.on('submit')

的错误Jquery选择器

您还可以使用e.preventDefault()来阻止表单实际提交。

此外，<input>代码没有</input>结束标记，使用value="Upload"代替submit或button

＆＃13;

$(document).ready(function (e) {
  $('#upload_excel').on('submit',(function(e) {
    e.preventDefault();
    alert('test');
  }));    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal well" method="post" id="upload_excel" name="upload_excel" enctype="multipart/form-data">
    <fieldset>                  
        <div class="control-group">
           <div class="control-label">
               <label>Excel File:</label>
           </div>
            <div class="controls">
                <input type="file" name="file" id="file" class="input-large">
            </div>
        </div>

        <div class="control-group">
            <div class="controls">
                <input type="submit" id="btn" name="Import" class="btn btn-primary button-loading" data-loading-text="Loading..." value="Upload"/>
            </div>
        </div>
    </fieldset>

＆＃13;

Answer 4

＆＃34;行动＆＃34; ＆＃34;形式的属性＆＃34;元件？

Answer 5

Basiclally你必须提交表格，所以你应该在onsubmit块中有表格的id而不是输入提交按钮。

<script type="text/javascript" language="javascript" >
    $(document).ready(function (e) {
        $('#upload_excel').on('submit',(function(e) {
            alert('test');
        }));    
    });
</script>

是的你需要有action属性来发布帖子或获取服务器请求

希望这有助于。

Answer 6

您尚未定义＆＃34;操作＆＃34;标签中的参数。因此，当您按提交时，您在未指定要调用的URL的情况下触发POST调用。一个简单的例子是：

<form enctype="multipart/form-data" action="__URL__" method="POST">
  <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
  Send this file: <input name="userfile" type="file" />
  <input type="submit" value="Send File" />
</form>

其中URL是PHP页面或您接收此呼叫所暴露的任何其他内容。另一个例子是here。

简单表单提交不起作用

6 个答案: