簡單表單提交不起作用

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

嘗試將“提交”功能放在表單上而不是按鈕上。

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

Answer 2

1. 首先，我使用以下指令提示一條消息，表明已按下“ 提交”按鈕 ：

    $('#btn').on('click',(function(e) {alert("Submitted");})); 

2. 之后，我確保使用jQuery函數.submit()提交表單：

    $( "#upload_excel" ).submit(); 

3. 最后，這是整個腳本：

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

我的答案基於jQuery文檔和Stackoverflow答案 。

Answer 3

您的.on('submit') Jquery選擇器.on('submit')

您也可以使用e.preventDefault()阻止實際提交表單。

此外， <input>標記沒有</input>結束標記，請使用value="Upload"代替submit或button

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

 <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> 

Answer 4

那么“表單”元素的“動作”屬性又如何呢？

Answer 5

基本上，您必須提交表單，因此您應該在onsubmit塊中具有表單的ID，而不要輸入“提交”按鈕。

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

是的，您需要具有action屬性才能向服務器發布信息或獲取請求

希望這可以幫助。

Answer 6

您尚未在標記中定義“操作”參數。 因此，當您按Submit（提交）時，您將觸發POST調用而未指定要調用的URL。 一個簡單的例子是：

<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頁面或您為接收此呼叫而公開的其他內容。 另一個例子在這里 。