捕獲HTML表單，使用JQuery修改和重新發布

我有一個表單（HTML），我試圖發佈到我在Node中編寫的API。捕獲HTML表單，使用JQuery修改和重新發布

我需要在提交前使用JQuery對發佈的表單元素進行一些修改。

當前，我在捕獲表單提交時，附加必要的屬性，然後（嘗試）重新發布它。

我能夠捕捉表單，追加必要的屬性，將其序列化並顯示在頁面上（這看起來是正確的 - 但是發佈它只是返回'未捕獲的RangeError：最大調用堆棧大小超過 at buildParams .. 。'

我還是很新的JQuery的，所以可能已經做了一些非常愚蠢的，但我只是完全卡在此。

有沒有人有任何想法/建議？

謝謝前進

下面是我使用

$('#blk-visits').on('submit', function(e){ //captures form submission 
     e.preventDefault(); // prevent from from submitting 
     var form = this; 
     $(form).append(
      $('<input>') 
       .attr('type', 'hidden') 
       .attr('name', 'store_id') 
       .val(rows_selected) 
     ); 

     $.post("http://localhost:3002/campaign/", form, function(result){ // post to local dev server 
      console.log(result); // print response from server in console 
     }); 

     $('#test-console').text($(form).serialize()); // print form to page for debug 
    });

來源

2017-03-07 Steve

'變種形式=新FORMDATA（本）; form.append（'store_id'，rows_selected）;' – Cr1xus

感謝您的回覆，不幸的是，這給了我'未捕獲的類型錯誤：非法調用' – Steve

$.post("http://localhost:3002/campaign/", {store_id: rows_selected}, function(result){ // post to local dev server 
      console.log(result); // print response from server in console 
     });

這就夠了，不需要創建代碼form

編輯： 作爲您的評論要發送裏面輸入形式也：

var data = $(form).serializeArray().reduce(function(m,o){ 
    m[o.name] = o.value; 
    return m; 
}, {}); 

data['store_id'] = rows_selected; 
$.post("http://localhost:3002/campaign/", data, function(result){ // post to local dev server 
      console.log(result); // print response from server in console 
     });

來源

2017-03-07 16:06:59

感謝您的回覆 - 這確實發佈成功，但只有'store_id'是（我試圖將store_id添加到之前提交的結果中，所以，我認爲問題在於如何追加它，但無法解決（還） – Steve

請檢查我的編輯 –

$('#blk-visits').on('submit', function(e){ //captures form submission 
     e.preventDefault(); // prevent from from submitting 
     var form = new FormData(this); 
     form.append('store_id',rows_selected); 

     $.post("http://localhost:3002/campaign/", form, function(result){ // post to local dev server 
      console.log(result); // print response from server in console 
     }); 

     $('#test-console').text($(form).serialize()); // print form to page for debug 
    });

來源

2017-03-07 16:08:38 Cr1xus

感謝您的回覆，但是當使用這種方法時，我得到'Uncaught TypeError：Illegal invocation'。 – Steve

謝謝大家的回覆。管理讓你的幫助工作。使用序列化是答案，並且可能一直在面對我。

作爲參考，這裏是完整的代碼我使用：

$('#blk-visits').on('submit', function(e){ //captures form submission 
     e.preventDefault(); // prevent form from submitting 
     var form = this; 
     $(form).append(
      $('<input>') 
       .attr('type', 'hidden') 
       .attr('name', 'store_id') 
       .val(rows_selected) 
     ); 

     var data = $(form).serializeArray(); //serialize appended form data 

     $.post("http://localhost:3002/campaigns/", data, function(result){ //post to api 
      $("#console").html(result); //print response from server in console 
     }); 

     $('#test-console').text($(form).serialize()); //print form to page for debug 
     $('input[name="store_id"]', form).remove(); //remove added elements

來源

2017-03-08 10:36:30 Steve

捕獲HTML表單，使用JQuery修改和重新發布

回答

相關問題