Comment afficher un tableau dans une liste non ordonnée?

J'ai le code suivant, et je veux que le tableau gather_form_elements apparaisse comme une liste non ordonnée. Voici ma html partie:Comment afficher un tableau dans une liste non ordonnée?

<!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>

Et mon code form.js est ci-dessous:

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]); 
    } 
}

Toutes les suggestions seraient appréciés.

Source

2017-06-25 Justin Roohparvar

Le programme d'écoute * getFormElements * doit se trouver dans le gestionnaire de soumission du formulaire car les formulaires peuvent être soumis sans cliquer sur le bouton d'envoi. De même, ne nommez pas les contrôles après les propriétés du formulaire (comme "submit"), même si la capitalisation est différente. – RobG

Tout d'abord, vous devez obtenir values à partir de vos entrées, pas seulement des éléments lui-même. Avec votre approche, cela devrait ressembler à ceci:

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>'); 
}

Source

2017-06-26 00:24:58 newbie

Merci newbie. J'ai complètement oublié la fonction de valeur. J'apprécie ton aide. Cela a fonctionné comme je le voulais! –

@JustinRoohparvar Content de pouvoir aider – newbie

Comme newbie dit, vous devez obtenir la valeur de chaque contrôles. Une version beaucoup plus simple de l'écouteur est d'utiliser la collection éléments de la forme. Les contrôles doivent avoir un nom pour réussir, vous pouvez tirer parti que pour travailler sur qui contrôle pour obtenir les valeurs de:

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>

Cela vous permet d'ajouter plus de contrôles et ne se soucie pas ce que vous appelle les. N'utilisez donc que des contrôles qui ont besoin d'un nom, n'utilisez pas d'ID si vous n'en avez pas besoin et placez l'écouteur submit sur le gestionnaire de soumission du formulaire de sorte que quel que soit le mode de soumission, l'écouteur est appelé. ;-)

Source

2017-06-26 01:12:35 RobG

Comment afficher un tableau dans une liste non ordonnée?

Répondre

Questions connexes