配列を順序なしリストに表示するにはどうすればよいですか？

私は次のコードを持っています。gather_form_elements配列を順序付けられていないリストとして表示します。は、ここに私のhtml一部です：配列を順序なしリストに表示するにはどうすればよいですか？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta author="Justin Roohparvar"> 
<link rel="stylesheet" href="CSS\css.css"> 
<script src="Javascript/form.js"></script> 
<title>Contact Form</title> 
</head> 
<body> 

<form method="POST" action="week_1_contact_form.html"> 
    <h1>Contact Form</h1> 
    <input id="first_name" type="text" maxlength="50" size ="25" placeholder="First Name" required> <br /><br /> 
    <input id="last_name" type="text" maxlength="50" size="25" placeholder="Last Name" required> <br /><br /> 
    <input id = "email" type="email" name="email" placeholder="Email" required> <br /> <br /> 
    <input id="phone_number" type="tel" name="phone_number" placeholder="Phone Number" required><br /><br /> 
    <input type="Submit" name="Submit" value="Submit" onclick="getFormElements()"> 

</form> 
</body> 
</html>

そして、私のform.jsのコードは以下の通りです：

function getFormElements() { 
    var gather_form_elements = new Array(document.getElementById("first_name"), document.getElementById("last_name"), 
    document.getElementById("email"), document.getElementById("phone_number")); 

    displayValues(gather_form_elements); 
} 

function displayValues(gather_form_elements) { 
    for(i=0; i<gather_form_elements.length; i++) 
    { 
     document.write(gather_form_elements[i]); 
    } 
}

任意の提案をいただければ幸いです。

出典

2017-06-25 Justin Roohparvar

送信ボタンをクリックせずにフォームを送信できるので、* getFormElements *リスナーはフォームの送信ハンドラにある必要があります。また、大文字と小文字の区別があっても、フォームのプロパティ（「submit」など）の後にコントロールに名前を付けないでください。 – RobG

まず、要素自体だけでなく、入力からvaluesを取得する必要があります。あなたのアプローチでは、次のようになります：

function getFormElements() { 
    var gather_form_elements = new Array(document.getElementById("first_name").value, document.getElementById("last_name").value, 
    document.getElementById("email").value, document.getElementById("phone_number").value); 

    displayValues(gather_form_elements); 
} 

function displayValues(gather_form_elements) { 
    document.write('<ul>'); 
    for(i=0; i<gather_form_elements.length; i++) 
    { 
     document.write('<li>'+gather_form_elements[i]+'</li>'); 
    } 
    document.write('</ul>'); 
}

出典

2017-06-26 00:24:58 newbie

ありがとうnewbie。私は値の機能を完全に忘れていました。私はあなたの助けに感謝します。これは私がそれが欲しいのと同じように機能しました！ –

@JustinRoohparvarうれしい – newbie

新生児によれば、各コントロールの値を取得する必要があります。リスナーのもっと簡単なバージョンは、フォームの要素コレクションを使用することです。コントロールを成功させるには名前を持つ必要があり、あなたはそれがの値を取得するために制御する動作するように活用することができます。これは、あなたがより多くのコントロールを追加することができますし、あなたに何を気にしない

function getFormElements(form) { 
 
    var values = []; 
 
    [].forEach.call(form.elements, function(control) { 
 
    if (control.name) { 
 
     values.push(control.value); 
 
    } 
 
    }); 
 
    // Show values for testing 
 
    console.log(values); 
 
    return values; 
 
}

<form onsubmit="getFormElements(this); return false"> <!-- prevent submit for testing --> 
 
    <h1>Contact Form</h1> 
 
    <input name="first_name" type="text" maxlength="50" size="25" placeholder="First Name" required> <br><br> 
 
    <input name="last_name" type="text" maxlength="50" size="25" placeholder="Last Name" required> <br><br> 
 
    <input name="email" type="email" placeholder="Email" required> <br> <br> 
 
    <input name="phone_number" type="tel" placeholder="Phone Number" required><br><br> 
 
    <input type="submit" value="Submit"> 
 
</form>

彼らへ電話します。

名前を必要とする名前コントロールのみ必要としない場合はIDを使用せず、フォームの送信ハンドラにサブミットリスナーを配置して、フォームの送信方法に関係なくリスナーが呼び出されるようにします。 ;-)

出典

2017-06-26 01:12:35 RobG

配列を順序なしリストに表示するにはどうすればよいですか？

答えて

関連する問題