2016-06-29 3 views
1

を提出し、私は2つの形式があります:私はから提出押すと別のフォームの隠された入力にフォームからJSONを追加し、したがって、基本的

  • <form id="form1"> 
    <input type="text" name="firstname"/> 
    <input type="text" name="lastname"/> 
    </form> 
    
    <form id="form2" method="POST" action="http://some.url.com"> 
    <input type="hidden" name="school" value="Random school"/> 
    <input type="hidden" name="year" value = "Random year"/> 
    <input type="hidden" name="placeforJSON" id="json"> 
    <input type="submit"> 
    </form> 
    

    を私は次の事をしたいですフォーム2を作成し、form1を使用してJSONを作成し、「placeforJSON」入力名に入力して、一部のURLにform2を送信します。

    このリクエストは正しく送信できましたが、入力フィールドにJSONを設定しようとしました。

    これはjavascriptのコード(そのイム総初心者に注意し、このコードはインターネットから取られた)である:これは、「設定する関数です

    $.fn.serializeObject = function() { 
        var o = {}; 
        var a = this.serializeArray(); 
        $.each(a, function() { 
        if (o[this.name] !== undefined) { 
         if (!o[this.name].push) { 
          o[this.name] = [o[this.name]]; 
         } 
         o[this.name].push(this.value || ''); 
        } else { 
         o[this.name] = this.value || ''; 
        } 
        }); 
        return JSON.stringify(o); 
        }; 
    

    :これはJSONをstringifies機能です

    placeforJSON提出がクリックされた」入力は:

    $(function() { 
        $('#form2').submit(function() { 
         $('#json').value = $('#form1').serializeObject(); 
         return false; 
        }); 
    }); 
    

私は、このことを期待していましたform2を送信する前にjson文字列を追加しますが、そうではありません。

また、document.getElementById('json').value = $('#form1').serializeObject();も入れてみましたが、それも役に立たなかったです。

<script type="text/javascript"> 
    function product(a,b) { 
     return a*b; 
    } 
    document.getElementById('json').value = product(5,3); 
</script> 

これは渡され、要求内のオブジェクトplaceforJSON = 15が存在した:

面白いことは、例えばこのため、ということです。

誰かがこれを手伝ってくれますか?前もって感謝します。

+0

この行のタイプは $( '#json')です。value = $( '#form1')。serializeObject();は、 $( '#json')になります。val($( '#form1')。serializeObject()); – MoustafaS

+0

私は今、それを試してみました、機能を提出して悲しいことに、まだ空です。 – Sekula1991

+0

イベントにこの行を追加し、コンソールに何が入るかを確認してください。 console.log($( '#form1')。serializeObject()); – MoustafaS

答えて

0

これは、この問題を修正するものです。

HTMLのCODE:

<form id="form1" oninput="inputFunction()> 
<input type="text" name="firstname"/> 
<input type="text" name="lastname"/> 
</form> 

<form id="form2" method="POST" action="http://some.url.com"> 
<input type="hidden" name="school" value="Random school"/> 
<input type="hidden" name="year" value = "Random year"/> 
<input type="hidden" name="placeforJSON" id="json"> 
<input type="submit"> 
</form> 

JavaScriptコード:すべての入力変化で

function toJSONString(form) { 
    var obj = {}; 
    var elements = form.querySelectorAll("input, select, textarea"); 
    for(var i = 0; i < elements.length; ++i) { 
     var element = elements[i]; 
     var name = element.name; 
     var value = element.value; 

     if(name) { 
      obj[ name ] = value; 
     } 
    } 
    return JSON.stringify(obj); 
} 

function inputFunction() { 
    var form = document.getElementById("form1"); 
    var json = toJSONString(form); 
    document.getElementById('json').value = json; 
} 

を、私はJSON文字列とセットを作成その値をjson入力に渡します。

0

$('#json').value = $('#form1').serializeObject();から$('#json').val($('#form1').serializeObject());に変更する必要があります。添付のFiddleを実行し、ブラウザのコンソールを確認してください。

+0

コンソールはうまく見えますが、変更前にリクエストが送信されているため、jsonはサーバーに送信されません。 – Sekula1991

+0

@ Sekula1991ハンドラ関数からfalseを返すようにしてください。ハンドラからfalseを返すと、送信アクションがキャンセルされます。 –

+0

削除されましたが、まだ運がありません – Sekula1991

関連する問題