JS：提交時調用函數

Question

大家好，我還是JS新手，所以我想問一下在提交表單時調用函數的問題。

[更新]表格

<div id="dashboard-side">

    <form id="report" class="form-horizontal" method="post" action="<?= site_url('api/load_report') ?>"> <!-- onsubmit="location.reload()" -->            
        <fieldset>
            <div class="control-group center_div">                    
                <label class="control-label">Sales Name</label>                    
                <div class="controls">
                    <input type="text" name="sales_name" class="form-control input-xlarge txt-up" value="<?php echo set_value('cust_name'); ?>" placeholder="Enter Customer Name" style="height: 30px;"/>                       
                </div>
            </div>

            <div class="control-group center_div">
                <div class="controls form-inline">
                    <input id="get_report" type="submit" class="btn btn-success btn-inline " value="Get Report" style="width:110px; margin-left: -155px;"/>
                </div>  
            </div>                
            <table border="1" width="100%" style="background-color: #dfe8f6;">
                <tr>
                    <td width="154px"><strong>Customer Name</strong></td><td width="128px"><strong>Activity</strong></td>
                    <td width="244px"><strong>Detail</strong></td><td width="141px"><strong>Start Time</strong></td>
                    <td width="142px"><strong>Finish Time</strong></td><td width="39px" style="text-align:center"><strong>Note</strong></td>
                    <td style="margin-left: 50px"><strong>Action</strong></td>   
                </tr>
            </table>
            <!------------------------------------------------------------------------------------->               
            <div id="xreport" class="table-hover" style="background-color: #EAF2F5"></div>


        </fieldset>
    </form>
    </div>

控制者

公共功能load_report（）{

    $this->db->where('user_id', $this->input->post('sales_name'));

    $query = $this->db->get('activity');
    $result = $query->result_array();
    $this->output->set_output(json_encode($result));  }

JS

var load_report = function() {
    $.get('api/load_report', function(o){

        var output = '';            
        for (var i = 0; i < o.length; i++){
            output += Template.dodo(o[i]);

        }            
        $("#xreport").html(output);
    }, 'json');
};

如果我在表單加載時調用該函數，則可以正常工作，但是我想在表單提交時調用該函數，該怎么做？

這是我嘗試過的

var load_report = function () {
    $("#report").submit(function(){
     $.get('api/load_report', function(o){            
        var output = '';            
        for (var i = 0; i < o.length; i++){
            output += Template.dodo(o[i]);

        }            
        $("#xreport").html(output);
    }, 'json');
});
};

它沒有將數組分配給我的#div，而是在新的空白標簽中顯示了數組數據，如下所示： 到目前為止，我的當前結果

任何幫助，將不勝感激，謝謝。

更新：新的調用函數

  var load_report = function () {
    $("#report").submit(function (evt) {
        evt.preventDefault();
        var url = $(this).attr('action');
        var postData = $(this).serialize();

        $.post(url, postData, function (o) {
            if (o.result == 1) {
                var output = '';
                Result.success('Clocked-in');
                for (var i = 0; i < o.length; i++) {
                    output += Template.dodo(o[i]); //this data[0] taken from array in api/load_report
                    console.log(output);
                    $("#xreport").html(output);
                }
            } else {
                Result.error(o.error);
                console.log(o.error);
            }
        }, 'json');
    });
};

有了這個新的調用函數，我可以從api/load_report檢索數據而不會卡在e.preventDefault上，甚至不用打開一個新標簽頁，我console.log並且結果在控制台中正確顯示，但是在控制台上卻不顯示div不知何故。

我的template.js（如果需要）

this.dodo = function(obj){
    var output ='';                     
    output +='<table border=1, width=100%, style="margin-left: 0%"';
    output += '<tr>';
    output += '<td width=120px>' + obj.user_id + '</td>';
    output += '<td width=120px>' + obj.cust_name + '</td>';
    output += '<td width=100px>' + obj.act_type + '</td>';
    output += '<td width=190px>' + obj.act_detail + '</td>';
    output += '<td width=110px>' + obj.date_added + '</td>';
    output += '<td width=110px>' + obj.date_modified + '</td>';         
    output += '<td style="text-align:center" width=30px>' + obj.act_notes + '</td>';
    output += '</tr>';        
    output +='</table>';        
    output += '</div>';        
    return output;
};

結果（注意，user_id = form.sales_name） 結果預覽

Answer 1

您可以始終執行以下操作：

 function myFunction() { alert("Hello! I am an alert box! in a function"); } 

 <form> <input type="text" /> <input type="submit" value="submit" onclick="return myFunction();"/> </form> 

PS此問題可能已經回答了這個問題， 將onclick函數添加到提交按鈕

Answer 2

嘗試通過使用preventDefault()阻止form獲取submit

$("#report").submit(function(e){ //add param "e"
     e.preventDefault(); //to prevent form to submit
     //further code....
});

Answer 3

好吧，嘗試

function mysubmit(){
     $.get('api/load_report', function(o){            
        var output = '';            
        for (var i = 0; i < o.length; i++){
            output += Template.dodo(o[i]);

        }            
        $("#xreport").html(output);
    }, 'json');
}

作為您的腳本和

<form id="report" class="form-horizontal" onsubmit="event.preventDefault(); mysubmit();" method="post" action="<?= site_url('api/load_report') ?>">

作為你的形式

Answer 4

首先，我建議不要像這樣直接在dom上使用onclick或onsubmit 。

<form onsubmit="myFunction();"></form>

對我來說，最大的原因是它對可讀性產生了負面影響，有時甚至會影響項目的未來維護。 最好將html和javascript分開，除非您使用的框架提供模板功能/功能，例如angularjs。

另一個大問題是，您只能存在一個內聯事件，並且很容易意外覆蓋，這可能導致令人困惑的錯誤。

之所以要進入新標簽頁是因為.submit() 。 這將調用您的函數，但隨后進行內部jQuery事件處理，其中包括刷新頁面。 我在這里看到兩種最可行的解決方案。

第一種解決方案：

添加一個event.preventDefault(); 在函數開始時，阻止jQuery刷新頁面。

$("#report").submit(function(e) {
      e.preventDefault();
 });

第二個解決方案（可能更好）：

您正在使用$.get(...)進行ajax調用。 您可以在觸發您的ajax調用的按鈕（可能在用於提交表單的按鈕上）上添加事件偵聽器。 這是一個示例，假定loadData按鈕的ID為loadData 。

$("#loadData").click(function(){
   $.get('api/load_report', function(o){            
      var output = '';            
      for (var i = 0; i < o.length; i++){
          output += Template.dodo(o[i]);
      }            
      $("#xreport").html(output);
  }, 'json');
}