简体   繁体   English

如何在getElementById中使用数组

[英]How to use array in getElementById

I used an ajax function to fetch labels and ids from the database, which contains exactly the same set of ids used in my form. 我使用ajax函数从数据库中获取标签和ID,其中包含与表单中使用的ID完全相同的一组ID。 The query returned a comma separated value which I sent to a second function as below. 该查询返回了一个逗号分隔的值,该值已发送给第二个函数,如下所示。

This function successfully split the comma separated values, and I used it to build an array of id tags. 此函数成功拆分了逗号分隔的值,并且我用它来构建了一个id标签数组。

Now all I want is to feed these id tags into and arrayed variable and use it to fetch the values of the forms so submitted. 现在,我想要的就是将这些id标记输入到arrayed变量中,并使用它来获取如此提交的表单的值。

Please can someone help. 请有人帮忙。 Below is the second function to fetch the values from the form and alert them as it does: 以下是第二个函数,该函数从表单中获取值并像这样警告它们:

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

  }
}

This is an excerpt of the form generated 这是生成表格的摘录

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

This is the ajax function that fetches back the id_tags from the database to match the ids in the form 这是一个ajax函数,它从数据库中获取id_tag,以匹配表单中的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);       

}

The fetchLabel.php is as follows fetchLabel.php如下

<?php
include_once( '../classes/stdPageClass.php' );

$tab_id=$stdObj->escstr($_GET['tab_id']);

exit($stdObj->fetchLabels($tab_id));

?>

Here is the public method fetchLabels(); 这是公共方法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);
    }

Please see how this helps you to help me @Siddiqui, @RGraham and others 请查看这如何帮助您帮助我@ Siddiqui,@ RGraham和其他人

Only you need to change is Array(); 唯一需要更改的是Array(); line no 1 1号线

try this code 试试这个代码

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

Click following link to see the execution 点击以下链接查看执行

Execute 执行

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM