2017-02-14 7 views
0

このデータをPHPを使用せずにJSON形式で保存したい場合は、ユーザーが値を与えてsendを押すとJSONにデータが追加されます。PHPを使用しないjqueryを使用してJSONでフォームデータを保存

<!DOCTYPE html> 
<html> 
<body> 

<form action="action_page.php"> 
    First name:<br> 
    <input type="text" name="firstname" value="Mickey"> 
    <br> 
    Last name:<br> 
    <input type="text" name="lastname" value="Mouse"> 
    <br><br> 
    <input type="submit" value="Submit"> 
</form> 



</body> 
</html> 

は、あなたの助けのためにどうもありがとうございます:)事前

+0

_「私はPHPを使用せずにJSON形式でこのデータを保存したい」_どこにデータが保存されていますか? – guest271314

+0

データをjson形式で保存すると、新しいjsonを作成し、すべてのデータを1つのjsonに保存したい –

+0

はい、「PHPを使用しない」とはどういう意味ですか?データはどこに保存されますか?ファイルがユーザーにダウンロードできるようになっていますか? – guest271314

答えて

2

にあなたはあなたのフォームを反復処理し、それはあなたがJSON形式でエンコードすることができ、配列内の値、だ収集することができます。

<!DOCTYPE html> 
<html> 
<body> 

<form action="action_page.php"> 
    First name:<br> 
    <input type="text" name="firstname" value="Mickey"> 
    <br> 
    Last name:<br> 
    <input type="text" name="lastname" value="Mouse"> 
    <br><br> 
    <input type="submit" value="Submit" onclick="logJsonInputs()"> 
</form> 


<script type="text/javascript"> 
function logJsonInputs() { 
    var nameFormElements = document.getElementById("name_form").elements; 
    var inputs = []; 
    for(var i = 0; i < nameFormElements.length; i++) { 
     var element = nameFormElements[i]; 
     inputs[element.name] = element.value; 
    } 

    var jsonInputs = JSON.stringify(inputs); 
    console.log(jsonInputs); 
} 
</script> 

</body> 
</html> 
+0

あなたは私に完全なコードを教えていただけますか? –

+0

@HariOmSrivastavaこれは実際に完全なコードです。 あなたは何が欠けているでしょうか? – Artemis

+0

私の答えは – Boldizsar

0
<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function stringifyForm(formObject) 
     { 
      var jsonObject = {}; 
      var inputElements = formObject.getElementsByTagName("input"); 
       inputElements = Array.prototype.slice.apply(inputElements);  //Because I want to use forEach and getElementsByTagName returns an object. 
       inputElements.forEach(function(e,i,a) 
             { 
             if (e.type != "submit") 
             { 
              jsonObject[e.name] = e.value; 
             } 
             } 
            ); 


      $.post("https://www.apiaas.com/consume.php", 
        { 
        "data":jsonObject 
        }, 
        function(data) 
        { 
        console.log(data); 
        } 
        ); 
     } 

     function jquerySolution(formObject) 
     { 
      var jsonObject = JSON.stringify($(formObject).serializeArray());   

      $.post("https://www.apiaas.com/consume.php", 
        { 
        "data":jsonObject 
        }, 
        function(data) 
        { 
        console.log(data); 
        } 
        );    
     } 
    </script> 
</head> 
<body> 

<form onsubmit="jquerySolution(this);return false;"> 
    First name:<br> 
    <input type="text" name="firstname" value="Mickey"> 
    <br> 
    Last name:<br> 
    <input type="text" name="lastname" value="Mouse"> 
    <br><br> 
    <button type="submit" value="Submit">Submit</button> 
</form> 


</body> 
</html> 
+0

でしたこれは多くの可能性のあるソリューションの1つです。これはJQueryを利用しないため、プロセスが簡単になります。結果のJSONオブジェクトのみをコンソールに送信します。ただし、AJAX呼び出しを使用してオブジェクトをいくつかのエンドポイントに送信することができます。 http://stackoverflow.com/questions/11338774/serialize-form-data-to-json – IrishGeek82

+0

単純な事例を含むJQueryベースのソリューションを含むように更新されたソリューション。 – IrishGeek82

関連する問題