2010-07-13 2 views
18

Это вопрос из двух частей. Кто-то ответил на аналогичный вопрос на днях (который также содержал информацию об этом типе массива в PHP), но я не могу его найти.HTML-элемент ввода тега с именем элемента массива с JavaScript

1.) Во-первых, какова правильная терминология для массива, созданного в конце элемента имени входного тега в форме?

<form> 

    <input name="p_id[]" value="0"/> 
    <input name="p_id[]" value="1"/> 
    <input name="p_id[]" value="2"/> 

</form> 

2.) Как получить информацию из этого массива с помощью JavaScript? В частности, я сейчас хочу просто подсчитать элементы массива. Вот что я сделал, но он не работает.

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

ответ

37

1.) Во-первых, какова правильная терминология для массива, созданного на конце e элемент имени входного тега в форме?

«Oftimes Смешение PHPism»

Что касается JavaScript обеспокоен кучу элементов формы с тем же именем, просто куча элементов формы с тем же именем, и элементы управления формы с именами, которые включают в себя площадь скобки - это просто элементы управления форматом с именами, которые включают квадратные скобки.

РНР именование для элементов формы с тем же именем, иногда полезно (если у вас есть несколько групп управления, так что вы можете сделать что-то вроде этого:

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

) но запутать некоторые человек. Некоторые другие языки приняли конвенцию, поскольку это было изначально написано, но в целом только в качестве дополнительной функции. Например, через this module for JavaScript.

2.) Как получить информацию из этого массива с помощью JavaScript?

Это все еще вопрос получения собственности с тем же именем, что и управление формой от elements. Хитрость заключается в том, что, поскольку имя элемента управления формой включает в себя квадратные скобки, вы не можете использовать dot notation and have to use square bracket notation, как и любой другой JavaScript property name that includes special characters.

Поскольку у вас есть несколько элементов с таким именем, это будет сборник, а не один элемент управления, поэтому вы можете перебрать его с помощью цикла для цикла, использующего его свойство length.

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]; 
} 
+0

Спасибо, это именно то, что я искал. Я немного изменил его, но ... 'for (i = 0; i ubiquibacon

+2

Использование 'i' как глобального не является хорошей идеей (он просто просит, чтобы проблемы, связанные с определением области, укусили вас, сейчас или в будущем, потому что вы попали в плохие привычки). Использование 'document.form' является плохой практикой, потому что (a) коллекция' document.forms' позволит более четко определить, что вы делаете, а 'form' - не очень подробное имя (и' document.form' можно путать с 'document.forms', что делает техническое обслуживание более запутанным.Простование вещей в одну строку в порядке, хотя я был просто более явным, чтобы вы могли видеть, что происходит. – Quentin

+1

@Quentin:' for (var i ...) 'на самом деле то же самое, что« var i; for (i ...) », потому что [переменные JavaScript ограничены функциями] (http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html), а не как и во многих популярных OO-языках. – Laoujin

3

document.form.p_id.length ... не считая().

Вы действительно должны дать вашей форме идентификатор

<form id="myform"> 

Затем обратиться к нему с помощью:

var theForm = document.getElementById("myform"); 

Затем сослаться на элементы, такие как:

for(var i = 0; i < theForm.p_id.length; i++){ 
9

Попробуйте это что-то вроде этого:

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

Чтобы ответить на ваши вопросы в порядке:
1) Там нет конкретного названия для этого. Это просто несколько элементов с тем же именем (и в этом случае также введите тип). Имя не уникально, поэтому id был изобретен (он должен быть уникальным).
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; 
} 
+6

Wow. Это просто уродливо. Используя 'new Array() 'вместо' [] ', сохраняя трекер длины вместо использования' arr.length' или 'arr.push()', инициализируя 'i' вне цикла for, используя' getAttribute' вместо того, чтобы просто идти свойство name, работающее глобально, а не внутри формы, и все полученные (более или менее) те же результаты 'document.forms.element.elements_name'. (Ох и 'getElementsByName' могли быть использованы также). – Quentin

0

Вот некоторые PHP и JavaScript демонстрационный код, который показывает простой способ создания индексных полей на форме (поля, которые имеют такое же имя), а затем обрабатывать их как JavaScript и PHP. Поля должны иметь имена «ID» и «NAME». Javascript использует идентификатор, а PHP использует NAME.

<?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>"; 
Смежные вопросы