JavaScript爲兩個不同的元素ID作爲相同的功能

我正在使用此代碼（http://technologymantrablog.com/dynamic-combobox-ajax-php-mysql/）從我的數據庫獲取國家/州/城市到php/html選擇。它的註冊表格完美無缺。一切安好！問題是，用戶在系統註冊後，他可以嘗試編輯您的註冊/配置文件。然後，再次出現針對國家/州/城市的選擇。這就是問題所在。如果我從JavaScript使用相同的ID，它將無法工作。如果我嘗試更改ID並更改javascript，則不起作用。調用兩個函數和兩個不同的文件不會起作用。JavaScript爲兩個不同的元素ID作爲相同的功能

getSelects.php

function getStatus() { 

    if (window.XMLHttpRequest) { 
    xmlhttp3 = new XMLHttpRequest(); 
    } else { 
    xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp3.onreadystatechange=function() { 
    if (xmlhttp3.readyState==4 && xmlhttp3.status==200) { 
     document.getElementById("inputStatus").innerHTML=xmlhttp3.responseText; 
    } 
    } 
    xmlhttp3.open("GET","includes/getStatus.php",true); 
    xmlhttp3.send(); 
} 


function getMotivo(statusID) { 
    if (window.XMLHttpRequest) { 
    xmlhttp3 = new XMLHttpRequest(); 
    } else { 
    xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp3.onreadystatechange=function() { 
    if (xmlhttp3.readyState==4 && xmlhttp3.status==200) { 
     document.getElementById("inputMotivo").innerHTML=xmlhttp3.responseText; 
    } 
    } 
    xmlhttp3.open("GET","includes/getMotivo.php?statusID="+statusID,true); 
    xmlhttp3.send(); 
} 


function getComplemento(motivoID) { 
    if (window.XMLHttpRequest) { 
    xmlhttp3 = new XMLHttpRequest(); 
    } else { 
    xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp3.onreadystatechange=function() { 
    if (xmlhttp3.readyState==4 && xmlhttp3.status==200) { 
     document.getElementById("inputComplemento").innerHTML=xmlhttp3.responseText; 
    } 
    } 
    xmlhttp3.open("GET","includes/getComplemento.php?motivoID="+motivoID,true); 
    xmlhttp3.send(); 
}

INCLUDES

狀態：

echo '<select onchange="getMotivo(this.value);" class="form-control" name="status" id="status">'; 

echo 
'<option value="">-- Selecione --</option> 
<option value="0">Bloqueado</option> 
<option value="1">Ativo</option>'; 

echo'</select>';

Motivo：

include("../lib/conexao.php"); 

$statusID = $_GET['statusID']; 

echo '<select onchange="getComplemento(this.value);" class="form-control" name="motivo" id="motivo">'; 
echo '<option value="" selected>-- Selecione um Motivo --</option>'; 
$q = "SELECT * FROM motivo WHERE status = '$statusID' AND tipo = 'C' ORDER BY motivo"; 
if($res = $con->query($q)) 
{ 
while($obj = $res->fetch_object()) 
{ 
echo'<option value="'. $obj->motivoID .'">'. $obj->motivo .'</option>'; 
} 
} 
echo'</select>';

Complemento：

include("../lib/conexao.php"); 

$motivoID = $_GET['motivoID']; 


if($motivoID == 2 || $motivoID == 4 || $motivoID == 5 || $motivoID == 6 || $motivoID == 8 || $motivoID == 9) { 
echo '<label for="complemento">Complemento</label>'; 
echo '<input type="text" name="complemento" class="form-control" id="complemento" placeholder="Insira o Complemento">'; 
}

的header.php：

<script> 
function init() { 
getStatus(); 
} 
</script> 

</head> 

<body onload="init();">

我想，如果我在這裏發佈的所有代碼文件會很長職務。但是，通過我在第一段中的文字，我想我可以解釋我想要做的事情。

來源

2015-11-11 Rodrigo BRF

你應該建立某種形式的通用Ajax請求功能的您提供參數成在運行時或從一個目標構建的功能 - 否則你寫很多不同的任務相同的代碼。 – RamRaider

你可以分享你附加這些功能的表單嗎？ – RamRaider

當然可以。這裏是：http://jsfiddle.net/s7Le9725/感謝您的回答！ –

我不知道這是否會幫助解決您的問題（希望它），但我提到了使用一個或多或少通用的ajax函數，並將其用於大部分工作，所以這就是我的意思。

function _ajax(url, options){ 
    var factories=[ 
     function() { return new XMLHttpRequest(); }, 
     function() { return new ActiveXObject('Msxml2.XMLHTTP'); }, 
     function() { return new ActiveXObject('MSXML2.XMLHTTP.3.0'); }, 
     function() { return new ActiveXObject('MSXML2.XMLHTTP.4.0'); }, 
     function() { return new ActiveXObject('MSXML2.XMLHTTP.5.0'); }, 
     function() { return new ActiveXObject('MSXML2.XMLHTTP.6.0'); }, 
     function() { return new ActiveXObject('Microsoft.XMLHTTP'); } 
    ]; 
    /* Try each factory until we have a winner */ 
    for(var i=0; i < factories.length; i++) { 
     try { var req = factories[ i ](); if(req!=null) { break; } } 
     catch(err) { continue; } 
    }; 

    var method=options.hasOwnProperty('method') ? options.method.toUpperCase() : 'POST'; 
    var callback=options.hasOwnProperty('callback') ? options.callback :false; 

    if(!callback){ 
     alert('No callback function assigned - a callback is required to handle the response data'); 
     return false; 
    } 

    var headers={ 
     'Accept': "text/html, application/xml, application/json, text/javascript, "+"*"+"/"+"*"+"; charset=utf-8", 
     'Content-type': 'application/x-www-form-urlencoded', 
     'X-Requested-With': 'XMLHttpRequest' 
    }; 

    /* The main parameters of the request */ 
    var params=[]; 
    if(options.hasOwnProperty('params') && typeof(options.params)=='object'){ 
     for(var n in options.params) params.push(n + '=' + options.params[n]); 
    } 

    /* Additional arguments that can be passed to the callback function */ 
    var args=options.hasOwnProperty('args') ? options.args : options; 

    /* Assign callback to handle response */ 
    req.onreadystatechange=function(){ 
     if(req.readyState==4) { 
      if(req.status==200) options.callback.call(this, req.response, args); 
      else console.warn('Error: '+req.status+' status code returned'); 
     } 
    } 

    /* Execute the request according to desired method: other methods could be added here */ 
    switch(method){ 
     case 'POST': 
      req.open(method, url, true); 
      for(header in headers) req.setRequestHeader(header, headers[ header ]); 
      req.send(params.join('&')); 
     break; 
     case 'GET': 
      req.open(method, url+'?'+params.join('&'), true); 
      for(header in headers) req.setRequestHeader(header, headers[ header ]); 
      req.send(null); 
     break; 
    } 
} 







/* 
    example usage: 
    -------------- 
*/ 
function getStatus() { 
    _ajax.call(this, '/includes/getStatus.php',{ callback:cb_ajax, method:'get', args:{ id:'inputStatus' } }); 
} 
function getMotivo(statusID) { 
    _ajax.call(this, '/includes/getMotivo.php',{ callback:cb_ajax, method:'get', params:{ 'statusID':statusID }, args:{ id:'inputMotivo' } }); 
} 
function getComplemento(motivoID) { 
    _ajax.call(this, '/includes/getMotivo.php',{ callback:cb_ajax, method:'get', params:{ 'motivoID':motivoID }, args:{ id:'inputComplemento' } }); 
} 

/* The callback function */ 
function cb_ajax(r, o){ 
    console.info('ajax response: %s, args: %s', r, o); 
    if(o.hasOwnProperty('id') && document.getElementById(o.id)) document.getElementById(o.id).innerHTML=r; 
} 




html form 
--------- 

    <form name='so_test_motivo' method='post' action='/test/target.php' enctype="multipart/form-data"> 
     <select name='country' onchange='getStatus()'> 
      <option value=0 selected> Choose an option 
      <option value=1> Test 
     </select> 

     <select id='inputStatus' name='inputStatus' onchange='getMotivo(this.value)'> 
     </select> 

     <select id='inputMotivo' name='inputMotivo' onchange='getComplemento(this.value)'> 
     </select> 

     <select id='inputComplemento' name='inputComplemento'> 
     </select>   
    </form>

，並在測試的目的，PHP腳本/test/target.php被簡單地發送僞數據回這樣的：

$id=$_GET['id'];     
for($i=0; $i < 50; $i++) echo '<option value='.(($i+1) + $id).'>Option - '.(($i+1) + $id).PHP_EOL;

來源

2015-11-11 17:35:16 RamRaider

那一個，我只需要替換我原來的getSelects.php？那真的不是.php，我輸錯了，它是一個.js，哈哈 –

JavaScript爲兩個不同的元素ID作爲相同的功能

回答

相關問題