Question

您好我正在使用codeigniter在我的视图页面中，我有一个动态添加表格行的邻居，我有一个表单提交按钮。当我点击添加按钮时，表单会被提交。如何在单击添加按钮时停止表单提交，以及如何在单击实际提交按钮时提交表单。

<html>

<head>
  <meta charset="UTF-8">

 <link href="<?php echo base_url(); ?>assets/css/elfanto_css.css" rel="stylesheet">
  <link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet">
  <link href="<?php echo base_url(); ?>assets/css/demo.css" rel="stylesheet">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-compat-git.js'></script>


<script type='text/javascript'>
var baseurl='<?php echo base_url(); ?>';
$(function() {
    $('#test').on('change', 'input[name="pid[]"]', function() {
        var indexOfTheChangedRow = $(this).closest("tr").index();
        get_values(this.value, indexOfTheChangedRow);
    });
});


function get_values(val,rowIndex)
{
 $.ajax({
    url: baseurl + 'admin/billing/getdetails',
    type: 'post',
    data: {
        val: val
    },
    success: function (indexOfTheChangedRow, response) {
        if (response != "") {
            var json = jQuery.parseJSON(response),
                rowToUpdate = $("#test tr:nth-child(" + (indexOfTheChangedRow + 1) + ")");

            // add the changed row as the context to restrict the search for the classes to this one row only
            $('.description', rowToUpdate).val(json.description);
            $('.type', rowToUpdate).val(json.type);
            $('.qty_used', rowToUpdate).val(json.qty_used);
             $('.qty_prch', rowToUpdate).val(json.qty_prch);

        }
    }.bind(window, rowIndex),
    error: function (response) {
        alert("error");
    }
});
}
function loadgrandtotal() {
    var sum = 0;
    $('.subtot').each(function () {
        var prodprice = Number($(this).text());
        sum = sum + prodprice;
    });
    $("#totalrst").text(sum.toFixed(2));
}


function displayResult() {
<?php

      $attributes = array('class' => 'form-horizontal', 'id' => '');
      $options_employee = array('' => "Select");
      foreach ($employee as $row)
      {
        $options_employee[$row['first_name']] = $row['first_name'];
      }
    $dropdown = form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');

      ?>

    var complex = <?php echo json_encode($dropdown); ?>;

    var row = document.getElementById("test").insertRow(-1);
    row.innerHTML = '<td><div>'+complex+'</div></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td class="subtot"><input type="text" value="" style="width:70px;"/></td>';
}
</script>
</head>
<body bgcolor="#CCCCCC">
            <p><img src="../assets/img/ticket_page/Client.svg">   <input type="text" value=""/></p> 
                    <!-- Your Content Here -->
                        <?php

      $attributes = array('class' => 'form-horizontal', 'id' => '');
      $options_employee = array('' => "Select");
      foreach ($employee as $row)
      {
        $options_employee[$row['first_name']] = $row['first_name'];
      }
 echo form_open('admin/employee/add');  /*I open my form here*/
      ?>
            <div id="form"> 
             <!-- div form starts here.its for add table  -->
            <table id="test">
            <thead>
            <tr>
            <td style="width:80px;"><img src="../assets/img/ticket_page/employee.svg"></td>
            <td style="width:35px;"><img src="../assets/img/ticket_page/start_time.svg"></td>
            <td style="width:35px;"><img src="../assets/img/ticket_page/id.svg"></td>
            <td style="width:145px;"><img src="../assets/img/ticket_page/Description.svg"></td>
            <td style="width:45px;"><img src="../assets/img/ticket_page/Type.svg"></td>
            <td style="width:45px;">  <img src="../assets/img/ticket_page/qty_prch.svg"></td>
            <td style="width:45px;">   <img src="..assets/img/ticket_page/qty_used.svg"></td>
            <td style="width:70px;"> <img src="../assets/img/ticket_page/Price.svg"></td>
            <td style="width:70px;"> <img src="../assets/img/ticket_page/discount.svg"></td>
            <td style="width:70px;"> <img src="../assets/img/ticket_page/Tax.svg"></td>
            <td style="width:70px;"> <img src="../assets/img/ticket_page/Total_01.svg"></td>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td><?php echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');?></td>
            <td><input type="text" name="start_time[]" value="" style="width:35px;"/></td>
            <td><input type="text" name="pid[]"  value="" style="width:35px;"/></td>
            <td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td>
            <td><input type="text" name="type[]" class="type" style="width:45px;"/></td>
            <td><input type="text" name="qty_prch[]" class="qty_prch" style="width:45px;"/></td>
            <td><input type="text" name="qty_used[]" class="qty_used" style="width:45px;"/></td>
            <td><input type="text" name="price[]" class="price" style="width:70px;"/></td>
            <td><input type="text" name="discount[]" class="discount" style="width:70px;"/></td>
            <td><input type="text" name="tax[]" class="tax" style="width:70px;"/></td>
            <td class="subtot"><input type="text" name="total[]" class="total" style="width:70px;"/></td>

            </tr>
            </tbody>



            </table>

            <div id="add_row">
        <button onClick="displayResult()" class="add_r"></button>
                </div>  
<button id="btn" type="submit">SAVE</button>/*this my actual submit button*/
            <button id="btn" type="reset">CANCEL</button>



        <?php echo form_close(); ?>  /*Here I close my form*/       
    </body>
</html>

有人能帮助我吗？我只需在点击提交按钮时提交表单。请帮我解决一下。

Answer 1

将type属性赋予您的按钮，以防止它们在事件处理程序中发生异常时触发提交操作。

您正在使用HTML5按钮元素。请记住，此按钮的默认行为是提交类型，如W3规范中所述。检查this。

<button type="button" onClick="displayResult()" class="add_r"></button>

Answer 2

您确实可以将提交更改为＆＃39;输入＆＃39;按钮，但如果您仍希望稍后使用提交提交表单，请不要更改它。要阻止默认提交表单，请添加到Javascript：

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

如果您仍想提交表单，可以将preventDefault放在if语句中。

当我单击视图页面中的任何按钮时，表单将被提交

2 个答案: