尝试使用动态行提交表单。行动=""作品,ajax / jquery没有

时间:2015-03-19 04:16:05

标签: jquery ajax forms

我想要这个输出

http://imgur.com/gYan7mg

这是输出通过表单的action =“”语句查看的方式。但是,当我使用$(myform).serialize()时,它会一直给我一个空数组。我需要使用jquery / ajax,因为我需要在局部视图中加载。我的表格如下:

    <form id="invoice" class="form-horizontal" method="post" action="masteraccount/invoice.php">
        <div class="form-group">
            <label for="vehicle" class="col-sm-4 control-label">Choose Vehicle:</label>
            <div class="col-sm-3">
                <select class="form-control" name="vehicle[]">
                    <?php foreach($vehicle as $v) : ?>
                        <option style="padding: 2%;" value="<?php echo $v['id']?>"><?php echo $v['make'] . ", " . $v['model'] . ": " . $v['year']; ?></option>
                    <?php endforeach ?>
                </select>
            </div>
        </div>
        <table class="table" id="invoicetable">
        <thead>
            <tr>
                <th>Quantity</th>
                <th>Part Number</th>
                <th>Part Description</th>
                <th>Customer Cost</th>
                <th>Labor</th>
                <th>Vendor</th>
                <th>Vendor Price</th>
            </tr>
        </thead>
        <tbody>
            <tr name="tr[]">
                <td><input class="form-control" type="text" name="quantity[]"></td>
                <td><input class="form-control" type="text" name="partnumber[]"></td>
                <td><input class="form-control" type="text" name="partdescription[]"></td>
                <td><input class="form-control" type="text" name="customercost[]"></td>
                <td>
                    <select class="form-control" name="laborcode[]">
                        <option value="1">Mechanic</option>
                        <option value="2">Body Work</option>
                        <option value="3">Paint/Spray</option>
                    </select>
                </td>
                <td>
                    <select class="form-control" name="vendor[]">
                        <option value="6">KOI</option>
                        <option value="7">Advanced AutoParts</option>
                        <option value="8">Smyth</option>
                        <option value="9">Online</option>
                    </select>
                </td>
                <td><input class="form-control" type="text" name="vendorprice[]"></td>
            </tr>
        </tbody>
        </table>
        <div class="btn-group-vertical" role="group">
            <!-- <p><a id="lineitem" class="btn btn-primary" href="#" role="button">Add another line Item &raquo;</a></p>
            <p><a id="submit" class="btn btn-primary" href="#" role="button">Submit form &raquo;</a></p>
             -->
            <button type="button" class="btn btn-primary" style="margin-bottom:6px;" id="add">Add new row &raquo;</button>
            <!-- <button type="submit" class="btn btn-primary" style="margin-bottom:6px;" id="submit">Submit invoice &raquo;</button> -->
            <input id="submit" type="submit" class="btn btn-primary" style="margin-bottom:6px;">
            <div class="btn-group" role="group" id="opendropdown">
                <button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle"
                    data-toggle="dropdown" aria-expanded="false">Create Common Invoices <span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                          <li><a href="#">Oil Change</a></li>
                          <li><a href="#">AC Flush/Charge</a></li>
                        </ul>
            </div>
        </div>
</form>

<script>

$('#submit').click(function(event){
    event.preventDefault();
    var datastring = $("#invoice").serialize();

    $.post('masteraccount/invoice.php', {datastring:datastring}, function(data){
        $('#customerContentArea').html(data);
    });
});

1 个答案:

答案 0 :(得分:0)

使用serializeArray()。 serializeArray将一组表单元素编码为名称和值的数组。

var data = $('#invoice').serializeArray(); 
console.log(data);