代码之家  ›  专栏  ›  技术社区  ›  Charles Smith

动态将表单ID传递到函数中

  •  0
  • Charles Smith  · 技术社区  · 8 年前

    我在一个页面上有几个表单,我想使用相同的ajax函数。这对一种形式很有效,因为我用 getElementById

    形式

    <form id="postData" name="business" method="post" action="{{ path('location_graph', {'location_id': location.getId }) }}"
          class="m-form m-form--fit m-form--label-align-right">
        <div class="form-group m-form__group row">
            <label class="col-2 col-form-label required" for="description">Business
                Description</label>
            <div class="col-7">
                <input type="text" class="form-control m-input" id="description"
                       name="extra[description]">
            </div>
        </div>
    
        ...
    
        <div class="form-group m-form__group row">
            <button type="submit" class="btn m-btn--square btn-outline-primary">
                Submit
            </button>
        </div>
    </form>
    

    脚本

    document.getElementById('postData').addEventListener('submit', postData);
    
    function postData(event) {
        event.preventDefault();
    
        $.ajax({
            type: $(this).attr("method"),
            url: $(this).attr("action"),
            data: $(this).serialize(),
            success: function (data) {
                console.log(data);
                $('#success__para').html("You data was saved");
            }
        });
    }
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   Unmitigated    8 年前

    你可以附加一个 submit event this.id id 作为参数。

    Javascript代码:

    function postData(event, id) {
        event.preventDefault();
        var elem = $('#'+id);
        $.ajax({
            type: elem.attr("method"),
            url: elem.attr("action"),
            data: elem.serialize(),
            success: function (data) {
                console.log(data);
                $('#success__para').html("You data was saved");
            }
        });
    }
    

    <form id="someid" onsubmit="postData(event, this.id)">