2016-09-29 18 views
0

私はジャーナルアプリを作成しており、入力がHTMLフォームに送信されるたびにオブジェクトインスタンスを作成する必要があります。配列をループすることでObjectインスタンスを生成できますか?

結果で入力を受け取り、新しいObjectインスタンスの値に変換するループを作成したいとします。私のこれまでの試みでは、未定義の値を持つインスタンスが得られます。これも可能ですか?私は=>例をCONSOLE.LOG場合ループで

results = [] 

function example(a, b){ 
    this.a = a; 
    this.b = b; 
} 

function getElements(){ 
var a = document.getElementById("a").value; 
var b = document.getElementById("b").value; 
results.push(a,b) 
} 

私の試みは、例えば

function createNewDay(){ 
    for (i = 0;i<results.length;i++){ 
    var x = new day([i]) 
    } 
} 

の新しいインスタンスを作成する{:未定義、B:未定義}だから

+0

です。おそらくちょうど間違っているが、私はあなたの質問にコードを与えられたとは言えません...あなたがそれで達成しようとしていることは少しはっきりしていません。それぞれの反復で 'day'の新しいインスタンスを作成しましたが、何もしませんでした。そのサンプルはconsole.logの結果とは関係ありません。 –

+0

私はあなたに完全に従っていませんが、 'results.push(新しい例(a、b))'と 'new day(results [i])'を行うことを意味していますか? –

+0

基本的には、私がそれをやろうとしているのは、「submit」ボタンがHTMLフォーム上でクリックされるたびに新しい仕訳入力を作成することです。このジャーナルエントリは新しいObjectインスタンスになります。私はプログラミングに慣れていないので、おそらくこれは最善の方法ではありませんが、私の推論は結果に値をプッシュし、結果をループして、それぞれを新しいObjectインスタンスの別々のプロパティにすることです。したがってresults = [1,2]の場合、Objectインスタンスをthis => object {a:1、b:2}のようにします。 – Alonishka

答えて

1
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <input id="a" type="text"> 
    <input id="b" type="text"> 
    <button type="submit" id="submit">Submit</button> 
    <button type="button" id="view">View results in console</button> 
</body> 
<script type="text/javascript"> 
var results = []; 

function Example(a, b) {a 
    this.a = a; 
    this.b = b; 
} 

function getElements() { 
var a = document.getElementById('a').value; 
var b = document.getElementById('b').value; 
results.push(new Example(a, b)); 
} 

function loopResults() { 
    for (var i = 0; i < results.length; i++) { 
    console.log(results[i]); 
    } 
} 

document.getElementById('submit').addEventListener('click', getElements, false); 
document.getElementById('view').addEventListener('click', loopResults, false); 
</script> 
</html> 

デモ:http://jsbin.com/jehupayomu/1/

+0

ありがとう!これはとてもシンプルですが、私はそれを考えないために自分自身を蹴っています。 – Alonishka

0

.. 。あなたはそのためにjqueryのを使用することができます。

var formDataObject = $("refer_to_form_by_id_or_name").serializeObject(); 

ここで述べたように:Serialize form data to JSON

+0

この質問には 'jQuery'タグが含まれていないため、純粋なJavaScriptソリューションが必要です。 – vlaz

+0

でしょう。おそらく著者はいくつかの図書館がここで役に立つかもしれないことに気づいていないでしょう。バニラ・ジャズの解決策が望まれているとは正確には言いませんでした。著者がそれを明確にするなら、私は答えを削除することができます。 –

0

あなたはこのためFormDataを使用することができます - それは、より一般的なソリューションとなっている:それはもちろん

var form = document.querySelector('form'); 
 

 
form.onsubmit = function() { 
 
    var formdata = new FormData(this); 
 
    var results = {}; 
 
    for ([key, value] of formdata) { 
 
     results[key] = value; 
 
    } 
 
    console.log(results); 
 
    return false; // cancel submission 
 
};
<form method="post" action=""> 
 
    a: <input name="a" value=""><br> 
 
    b: <input name="b" value=""><br> 
 
    <input type="submit"> 
 
</form>

関連する問題