Question

我的页面中有多个表单（让我们说2）。我想使用Ajax提交它们。

如何“告诉”我的脚本只引用我提交的表单中的输入字段（而不是另一个表单）？

我可以这样做：

form_data.$(this).parents('form').$("#textArea").val();

而不是：

form_data.append('comment[text]',  $("#textArea").val());

HTML：

<form class="form-horizontal" action='#' method="post" id="addCommentForm4" enctype="multipart/form-data">
    <input type='hidden' name='comment[pageName]' value='<?PHP echo $_GET['page'] ?>' id="pageName" />
    <input type='hidden' name='comment[refID]' value='4' id="refID" />

    <textarea class="form-control" name="comment[text]" id="textArea"></textarea>
    <input type='file' name='file[]' class='multi form-control' maxlength='1' accept='gif|jpg|png|bmp' id="files"/>
    <a class="btn btn-primary submit" id="submit" refID='4'>Send</a>

</form>

<form class="form-horizontal" action='#' method="post" id="addCommentForm5" enctype="multipart/form-data">
    <input type='hidden' name='comment[pageName]' value='<?PHP echo $_GET['page'] ?>' id="pageName" />
    <input type='hidden' name='comment[refID]' value='5' id="refID" />

    <textarea class="form-control" name="comment[text]" id="textArea"></textarea>
    <input type='file' name='file[]' class='multi form-control' maxlength='1' accept='gif|jpg|png|bmp' id="files"/>
    <a class="btn btn-primary submit" id="submit" refID='5'>Send</a>

</form>

AJAX：

$(function() {
    $(".submit").click(function() {

        var element = $(this);
        var refID = element.attr("refID");
        alert(refID);

        var file_data = $('#addCommentForm'+refID+' #files').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file[]', file_data);
        var files_data =  form_data;

        var act = 'add';
        form_data.append('act', act);
        form_data.append('comment[text]',  $("#textArea").val());   
        form_data.append('comment[pageName]',  $("#pageName").val());   
        form_data.append('comment[refID]',  $("#refID").val()); 


        $.ajax({
               type: "POST",
               url: "ajax/addComment.php",

               dataType: 'text',  // what to expect back from the PHP script, if anything
               cache: false,
               contentType: false,
               processData: false,  

               data: form_data,
               success: function(data)
               {
                    $('#commentsBox').html(data);
               }

             });

        return false; 
    });
});

Answer 1

您应该做的第一件事是删除重复的id属性 - 它们在页面上下文中应该是唯一的。使用公共类来标识字段，并从提交的form元素遍历以检索它们的值。

另请注意，最好挂钩submit的{{1}}事件，而不是提交按钮的form。这也使你的问题没有实际意义。试试这个：

click

<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
    <input type='hidden' name='comment[pageName]' class="pagename-field" value='<?PHP echo $_GET['page'] ?>' />
    <input type='hidden' name='comment[refID]' class="refid-field" value='4' />

    <textarea class="form-control comment-field" name="comment[text]"></textarea>
    <input type='file' name='file[]' class='multi form-control comment-field' maxlength='1' accept='gif|jpg|png|bmp' />
    <a class="btn btn-primary submit">Send</a>
</form>

<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
    <input type='hidden' name='comment[pageName]' class="pagename-field" value='<?PHP echo $_GET['page'] ?>' />
    <input type='hidden' name='comment[refID]' class="refid-field" value='4' />

    <textarea class="form-control comment-field" name="comment[text]"></textarea>
    <input type='file' name='file[]' class='multi form-control comment-field' maxlength='1' accept='gif|jpg|png|bmp' />
    <a class="btn btn-primary submit">Send</a>
</form>

另外，我建议从$("form").submit(function(e) { e.preventDefault(); // stop the standard form submission, as you're using AJAX var $form = $(this); var form_data = new FormData(); form_data.append('act', 'add'); form_data.append('comment[text]', $form.find('.comment-field').val()); form_data.append('comment[pageName]', $form.find('.pagename-field').val()); form_data.append('comment[refID]', $form.find('.refid-field').val()); form_data.append('file[]', $form.find('.file-field').prop('files')[0]); $.ajax({ type: "POST", url: "ajax/addComment.php", dataType: 'text', // what to expect back from the PHP script, if anything cache: false, contentType: false, processData: false, data: form_data, success: function(data) { $('#commentsBox').html(data); } }); });返回JSON而不是纯文本。如果您需要更改返回的数据，它将来会更具扩展性。

Answer 2

而不是var locOptions = { maximumAge : 10000, timeout : 5000, enableHighAccuracy : true }; function onLocationSuccess(position) { console.log(position); // alert('success'); $rootScope.pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var geocoder = new google.maps.Geocoder(); geocoder.geocode({'latLng': $rootScope.pos}, function address(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { $rootScope.currentposition = results[1].formatted_address; console.log($rootScope.currentposition); if($scope.switchToState=='signedIn'){ $ionicLoading.hide(); $http.get($rootScope.url +'api/price/?key=movo1026868hk738hkl') .success(function(response) { $rootScope.truckfare=response.datasets; }); console.log('reached here2'); $state.go('app.home'); } else{ $ionicLoading.hide(); $state.go('start'); } } } }); } // onError Callback receives a PositionError object // function onLocationError(error) { alert("Geolocation error: #" + e.code + "\n" + e.message); } navigator.geolocation.getCurrentPosition(onLocationSuccess, onLocationError, locOptions);执行以下任一操作：

$("#textArea").val()
$("#addCommentForm" + refID + " #textArea").val();
$("#addCommentForm" + refID).find("#textArea").val();

提交表格时请参阅textarea

2 个答案: