validacion - Matriz de elementos de nombre de etiqueta de entrada de formulario HTML con JavaScript
validar formulario javascript html5 (5)
Aquí hay un código de demostración de PHP y JavaScript que muestra una forma simple de crear campos indexados en un formulario (campos que tienen el mismo nombre) y luego procesarlos en JavaScript y PHP. Los campos deben tener tanto nombres de "ID" como "NOMBRE". Javascript usa la ID y PHP utiliza el NOMBRE.
<?php
// How to use same field name multiple times on form
// Process these fields in Javascript and PHP
// Must use "ID" in Javascript and "NAME" in PHP
echo "<HTML>";
echo "<HEAD>";
?>
<script type="text/javascript">
function TestForm(form) {
// Loop through the HTML form field (TheId) that is returned as an array.
// The form field has multiple (n) occurrences on the form, each which has the same name.
// This results in the return of an array of elements indexed from 0 to n-1.
// Use ID in Javascript
var i = 0;
document.write("<P>Javascript responding to your button click:</P>");
for (i=0; i < form.TheId.length; i++) {
document.write(form.TheId[i].value);
document.write("<br>");
}
}
</script>
<?php
echo "</HEAD>";
echo "<BODY>";
$DQ = ''"''; # Constant for building string with double quotes in it.
if (isset($_POST["MyButton"])) {
$TheNameArray = $_POST["TheName"]; # Use NAME in PHP
echo "<P>Here are the names you submitted to server:</P>";
for ($i = 0; $i <3; $i++) {
echo $TheNameArray[$i] . "<BR>";
}
}
echo "<P>Enter names and submit to server or Javascript</P>";
echo "<FORM NAME=TstForm METHOD=POST ACTION=" ;
echo $DQ . "TestArrayFormToJavascript2.php" . $DQ . "OnReset=" . $DQ . "return allowreset(this)" . $DQ . ">";
echo "<FORM>";
echo "<INPUT ID = TheId NAME=" . $DQ . "TheName[]" . $DQ . " VALUE=" . $DQ . "" . $DQ . ">";
echo "<INPUT ID = TheId NAME=" . $DQ . "TheName[]" . $DQ . " VALUE=" . $DQ . "" . $DQ . ">";
echo "<INPUT ID = TheId NAME=" . $DQ . "TheName[]" . $DQ . " VALUE=" . $DQ . "" . $DQ . ">";
echo "<P><INPUT TYPE=submit NAME=MyButton VALUE=" . $DQ . "Submit to server" . $DQ . "></P>";
echo "<P><BUTTON onclick=" . $DQ . "TestForm(this.form)" . $DQ . ">Submit to Javascript</BUTTON></P>";
echo "</FORM>";
echo "</BODY>";
echo "</HTML>";
Esta es una pregunta de dos partes. Alguien respondió una pregunta similar el otro día (que también contenía información sobre este tipo de matriz en PHP), pero no puedo encontrarla.
1.) Primero, ¿cuál es la terminología correcta para una matriz creada al final del elemento de nombre de una etiqueta de entrada en un formulario?
<form>
<input name="p_id[]" value="0"/>
<input name="p_id[]" value="1"/>
<input name="p_id[]" value="2"/>
</form>
2.) ¿Cómo obtengo la información de esa matriz con JavaScript? Específicamente, ahora mismo solo quiero contar los elementos de la matriz. Esto es lo que hice, pero no está funcionando.
function form_check(){
for(var i = 0; i < count(document.form.p_id[]); i++){ //Error on this line
if (document.form.p_name[i].value == ''''){
window.alert(''Name Message'');
document.form.p_name[i].focus();
break;
}
else{
if (document.form.p_price[i].value == ''''){
window.alert(''Price Message'');
document.form.p_price[i].focus();
break;
}
else{
update_confirmation();
}
}
}
}
Para responder a sus preguntas en orden:
1) No hay un nombre específico para esto. Es simplemente elementos múltiples con el mismo nombre (y en este caso también tipo). El nombre no es único, por lo que se inventó el ID (se supone que es único).
2)
function getElementsByTagAndName(tag, name) { //you could pass in the starting element which would make this faster var elem = document.getElementsByTagName(tag); var arr = new Array(); var i = 0; var iarr = 0; var att; for(; i < elem.length; i++) { att = elem[i].getAttribute("name"); if(att == name) { arr[iarr] = elem[i]; iarr++; } } return arr; }
Pruebe esto de esta manera:
var p_ids = document.forms[0].elements["p_id[]"];
alert(p_ids.length);
for (var i = 0, len = p_ids.length; i < len; i++) {
alert(p_ids[i].value);
}
document.form.p_id.length ... no cuenta ().
Deberías darle a tu formulario una identificación
<form id="myform">
Luego refiérete usando:
var theForm = document.getElementById("myform");
Luego refiérase a los elementos como:
for(var i = 0; i < theForm.p_id.length; i++){
1.) Primero, ¿cuál es la terminología correcta para una matriz creada al final del elemento de nombre de una etiqueta de entrada en un formulario?
"A veces confunde el PHPismo"
En lo que respecta a JavaScript, un grupo de controles de formulario con el mismo nombre son solo un grupo de controles de formulario con el mismo nombre, y los controles de formulario con nombres que incluyen corchetes son solo controles de formulario con nombres que incluyen corchetes.
La convención de nomenclatura PHP para controles de formulario con el mismo nombre a veces es útil (cuando tiene varios grupos de controles para que pueda hacer cosas como esta:
<input name="name[1]">
<input name="email[1]">
<input name="sex[1]" type="radio" value="m">
<input name="sex[1]" type="radio" value="f">
<input name="name[2]">
<input name="email[2]">
<input name="sex[2]" type="radio" value="m">
<input name="sex[2]" type="radio" value="f">
) pero confunde a algunas personas. Algunos otros idiomas han adoptado la convención desde que se escribió originalmente, pero generalmente solo como una función opcional. Por ejemplo, a través de este módulo para JavaScript .
2.) ¿Cómo obtengo la información de esa matriz con JavaScript?
Todavía es solo cuestión de obtener la propiedad con el mismo nombre que el control de formulario de los elements . El truco es que, dado que el nombre de los controles de formulario incluye corchetes, no puede usar la notación de puntos y debe usar la notación de corchetes al igual que cualquier otro nombre de propiedad de JavaScript que incluya caracteres especiales .
Dado que tiene múltiples elementos con ese nombre, será una colección en lugar de un control único, por lo que puede recorrerlo con un bucle for para que use su propiedad de longitud.
var myForm = document.forms.id_of_form;
var myControls = myForm.elements[''p_id[]''];
for (var i = 0; i < myControls.length; i++) {
var aControl = myControls[i];
}