如何在getElementById中使用数组


How to use array in getElementById

我使用ajax函数从数据库中获取标签和id,其中包含与我的表单中使用的id集完全相同的id集。该查询返回了一个逗号分隔值,我将其发送到第二个函数,如下所示。

这个函数成功地拆分了逗号分隔的值,我用它来构建一个 id 标签数组。

现在我想要的只是将这些 id 标签输入数组变量,并使用它来获取如此提交的表单的值。

请有人帮忙。下面是第二个函数,用于从表单中获取值并提醒它们:

function call_update(params){
var pValues=new array();
newParams=params.split(',');
  for(i=0;i<newParams.length;i++){
    pValues[i] = document.getElementById(newParams[i]).value;
    alert(newParams[i] +" is "+pValues[i]);
  }
}

这是生成的表单的摘录

<form action="#" name="continuation" id="continuation" class="form-horizontal">
                           <div class="form-wizard">
                              <div class="navbar steps">
                                 <div class="navbar-inner">
                                    <ul class="row-fluid">
                                       <li class="span2">
                                          <a href="#tab1" data-toggle="tab" class="step active">
                                          <span class="number">1</span>
                                          <span class="desc"><i class="icon-ok"></i>Statistics</span>   
                                          </a>
                                       </li>
                                       <li class="span2">
                                          <a href="#tab2" data-toggle="tab" class="step">
                                          <span class="number">2</span>
                                          <span class="desc"><i class="icon-ok"></i> Personal Intro</span>   
                                          </a>
                                       </li>
                                       <li class="span2">
                                          <a href="#tab3" data-toggle="tab" class="step">
                                          <span class="number">3</span>
                                          <span class="desc"><i class="icon-ok"></i> Resume</span>   
                                          </a>
                                       </li>
                                       <li class="span2">
                                          <a href="#tab4" data-toggle="tab" class="step">
                                          <span class="number">4</span>
                                          <span class="desc"><i class="icon-ok"></i> Experience</span>   
                                          </a> 
                                       </li>
                                       <li class="span2">
                                          <a href="#tab5" data-toggle="tab" class="step">
                                          <span class="number">5</span>
                                          <span class="desc"><i class="icon-ok"></i> Availability</span>   
                                          </a> 
                                       </li>
                                       <li class="span2">
                                          <a href="#tab6" data-toggle="tab" class="step">
                                          <span class="number">6</span>
                                          <span class="desc"><i class="icon-ok"></i> Photo Book</span>   
                                          </a> 
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                              <div id="bar" class="progress progress-success progress-striped">
                                 <div class="bar"></div>
                              </div>
                              <div class="tab-content">
                                 <div class="tab-pane active" id="tab1">
                                   <fieldset><legend>Personal Information</legend>
                                    <div class="control-group">
                                       <label class="control-label">Username</label>
                                       <div class="controls">
                                          <input type="text" value="jamehex" class="span6 m-wrap" tabindex="1" readonly/>
                                          <span class="help-inline">Username generated from your email address</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Birthday</label>
                                    <div class="controls"><input class="span6 m-wrap m-ctrl-medium date-picker" size="16" value="04-11-2013" type="text"></div>
                           </div><div class="control-group">
                                       <label class="control-label">Bra Size</label>
                                    <div class="controls"><input type="text" value="" name="Bra_Size" id="Bra_Size" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Bust</label>
                                    <div class="controls"><input type="text" value="" name="Bust" id="Bust" class="span6 m-wrap" /><span class="help-inline">Enter Size in Inches</span></div>
                           </div><div class="control-group">
                                       <label class="control-label">Dress Size</label>
                                    <div class="controls"><input type="text" value="" name="Dress_Size" id="Dress_Size" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Ethnic Look</label>
                                    <div class="controls"><input type="text" value="" name="Ethnic_Look" id="Ethnic_Look" class="span6 m-wrap" /><span class="help-inline">Choose Your Ethnic Group</span></div>
                           </div><div class="control-group">
                                       <label class="control-label">Eye Color</label>
                                    <div class="controls"><input type="text" value="" name="Eye_Color" id="Eye_Color" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Hair Color</label>
                                    <div class="controls"><input type="text" value="" name="Hair_Color" id="Hair_Color" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Hair Length</label>
                                    <div class="controls"><input type="text" value="" name="Hair_Length" id="Hair_Length" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Height</label>
                                    <div class="controls"><input type="text" value="" name="Height" id="Height" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Hips</label>
                                    <div class="controls"><input type="text" value="" name="Hips" id="Hips" class="span6 m-wrap" /><span class="help-inline">Enter Size in Inches</span></div>
                           </div><div class="control-group">
                                       <label class="control-label">Other</label>
                                    <div class="controls"><input type="text" value="" name="Other" id="Other" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Personal Site</label>
                                    <div class="controls"><input type="text" value="" name="Personal_Site" id="Personal_Site" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Physique</label>
                                    <div class="controls"><input type="text" value="" name="Physique" id="Physique" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Piercings</label>
                                    <div class="controls"><input type="text" value="" name="Piercings" id="Piercings" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Shoe Size</label>
                                    <div class="controls"><input type="text" value="" name="Shoe_Size" id="Shoe_Size" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Skin Color</label>
                                    <div class="controls"><input type="text" value="" name="Skin_Color" id="Skin_Color" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Waist</label>
                                    <div class="controls"><input type="text" value="" name="Waist" id="Waist" class="span6 m-wrap" /><span class="help-inline">Enter Size in Inches</span></div>
                           </div><div class="control-group">
                                       <label class="control-label">Weight</label>
                                    <div class="controls"><input type="text" value="" name="Weight" id="Weight" class="span6 m-wrap" /></div>
                           </div>                                    
                                    </fieldset>
                                    <fieldset><legend>Details</legend>
                                   <div class="control-group">
                                       <label class="control-label">Acting Union</label>
                                    <div class="controls"><input type="text" value="" name="Acting_Union" id="Acting_Union" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">In-Person Castings</label>
                                    <div class="controls"><input type="text" value="" name="In-Person_Castings" id="In-Person_Castings" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Model Agency</label>
                                    <div class="controls"><input type="text" value="" name="Model_Agency" id="Model_Agency" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Objections</label>
                                    <div class="controls"><input type="text" value="" name="Objections" id="Objections" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Paid Work</label>
                                    <div class="controls"><input type="text" value="" name="Paid_Work" id="Paid_Work" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Pro Status</label>
                                    <div class="controls"><input type="text" value="" name="Pro_Status" id="Pro_Status" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Talent Agency</label>
                                    <div class="controls"><input type="text" value="" name="Talent_Agency" id="Talent_Agency" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Time for Prints</label>
                                    <div class="controls"><input type="text" value="" name="Time_for_Prints" id="Time_for_Prints" class="span6 m-wrap" /></div>
                           </div>                                    
                                    </fieldset>
                                     <fieldset><legend>Location</legend>
                                    <div class="control-group">
                                       <label class="control-label">Country</label>
                                    <div class="controls"><input type="text" value="" name="Country" id="Country" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Nearest City 1</label>
                                    <div class="controls"><input type="text" value="" name="Nearest_City_1" id="Nearest_City_1" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Nearest City 2</label>
                                    <div class="controls"><input type="text" value="" name="Nearest_City_2" id="Nearest_City_2" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Nearest City 3</label>
                                    <div class="controls"><input type="text" value="" name="Nearest_City_3" id="Nearest_City_3" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">State</label>
                                    <div class="controls"><input type="text" value="" name="State" id="State" class="span6 m-wrap" /></div>
                           </div>                                    </fieldset>
                                    <fieldset><legend>Travel</legend>
                                    <div class="control-group">
                                       <label class="control-label">Africa</label>
                                    <div class="controls"><input type="text" value="" name="Africa" id="Africa" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Asia</label>
                                    <div class="controls"><input type="text" value="" name="Asia" id="Asia" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Europe</label>
                                    <div class="controls"><input type="text" value="" name="Europe" id="Europe" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">North America</label>
                                    <div class="controls"><input type="text" value="" name="North_America" id="North_America" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">South America</label>
                                    <div class="controls"><input type="text" value="" name="South_America" id="South_America" class="span6 m-wrap" /></div>
                           </div>                                    </fieldset>
                                     <fieldset><legend>Languages</legend>
                                    <div class="control-group">
                                       <label class="control-label">Dutch</label>
                                    <div class="controls"><input type="text" value="" name="Dutch" id="Dutch" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">English</label>
                                    <div class="controls"><input type="text" value="" name="English" id="English" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">French</label>
                                    <div class="controls"><input type="text" value="" name="French" id="French" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Italia</label>
                                    <div class="controls"><input type="text" value="" name="Italia" id="Italia" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Latino</label>
                                    <div class="controls"><input type="text" value="" name="Latino" id="Latino" class="span6 m-wrap" /></div>
                           </div><div class="control-group">
                                       <label class="control-label">Spanish</label>
                                    <div class="controls"><input type="text" value="" name="Spanish" id="Spanish" class="span6 m-wrap" /></div>
                           </div>                                    </fieldset>

这是一个 ajax 函数,它从数据库中取回id_tags以匹配表单中的 id。

function saveContinue(curr){
    //alert(curr);
//  var x = [ 'p0', 'p1', 'p2' ]; 
//call_me(x);
var findLabel  
    try{
        findLabel = new XMLHttpRequest();}
        catch(e){
            try{
                findLabel = new ActiveXObject("Msxml2.XMLHTTP");}
                catch(e){
                    try{
                        findLabel = new ActiveXObject("Microsoft.XMLHTTP");}
                        catch(e){
                            alert("Browser Error");
                            return false;
                            }
                        }
                    }
                    findLabel.onreadystatechange = function(){
                    if(findLabel.readyState == 4){
                        var test = findLabel.responseText;
                        //alert(test);
                        document.getElementById('wait').style.display="none";
                        call_update(test)
                         return true;
                         }
                    else{
                        document.getElementById('wait').style.display="";
                    }
                    }
                    var queryString="?tab_id=" + curr;
                    findLabel.open("GET","../ajaxHandles/fetchLabel.php" + queryString,true);
                    findLabel.send(null);       
}

获取标签.php如下所示

<?php
include_once( '../classes/stdPageClass.php' );
$tab_id=$stdObj->escstr($_GET['tab_id']);
exit($stdObj->fetchLabels($tab_id));
?>

这是公共方法fetchLabels();

public function fetchLabels($tab_id){
          $section_id=$this->getAllByOrder('mc_user_profile_sections','tab_id',$tab_id,'','ASC','id'); //fetching list of involved sections
           $label='';
          sleep(4);
          foreach($section_id as $id)
          $label[]=$this->getAllByOrder('mc_user_profile_fields','section',$id,'label','ASC','label');
          $found='';
          foreach($label as $val){
              if(is_array($val))
                {
                    foreach($val as $lab)
                            $found[]=$lab;
                }
          }
        // //print_r ($found);
         $found=implode(',',$found);
         //exit(json_encode($found,true));
         return $found;
      }

Finally, here is the second ajax function excerpt that is meant to save the form values in the database. For now, I just want it to alert each value
-----------------------------------------
 function call_update(params){
        var pValues = []; //line 1
        var newParams=params.split(',');
        alert(newParams);
        for (i = 0; i < newParams.length; i++) {
            pValues[i] = document.getElementById(newParams[i]).value;
            //alert(newParams[i] + " is " + pValues[i]);
        }
        alert(pValues);
    }

请查看这如何帮助您帮助我@Siddiqui、@RGraham和其他人

只有你需要改变的是Array();行 1

试试这个代码

function call_update(params){
    var pValues = new Array(); //line 1
    var newParams=params.split(',');
    for(i=0;i<newParams.length;i++){
        pValues[i] = document.getElementById(newParams[i]).value;
        alert(newParams[i] +" is "+pValues[i]);
    }
}

点击以下链接查看执行

执行