0

PHPベースのフォームがあります。mysqlデータベースから値をフェッチするドロップダウンリストがあります。

<select name=cat onchange="AjaxFunction(this.value);" style="width=600"> <br>
<option value='' Select One</option> 
<br>
<? 
  require "config.php";// connection to database  
  $q=mysql_query("select cat_id from categories"); 
  while($n=mysql_fetch_array($q)){ 
    echo "<option value=$n[cat_id]>$n[category]</option>"; 
  } 
?> 
</select> 

ドロップダウンリストは100%機能します。次に、別のテキスト入力フィールドがあります。

<input type=text name=copycat>

copycat入力ボックスの値を、ドロップダウンリストで選択した値と等しくし、リアルタイムで更新する必要があります。

これはできますか?簡単に想像できます。私は次のようなことを考えています:

<input type=text name=copycat onBlur="document.getElementById('cat').value=this.value;">

どんな助けでもいただければ幸いです。

よろしく、ライアン

アップデート

javscriptsendValueがcopycatの値で動作するようにするコード。

catalin87、sendvalueが機能するように支援してください。現在、選択ボタンをクリックしてもブラウザからの応答はありません。

もう一度ありがとう、ライアン

<? 

  $con = mysql_connect('localhost', 'username', 'password'); 
 if (!$con) 
   { 
   die('Could not connect to server: ' . mysql_error()); 
   } 
   $db=mysql_select_db("database", $con); 

    if (!$db) 
   { 
   die('Could not connect to DB: ' . mysql_error()); 
   } 


$sql="select packcode,category,description,grouping,packconfig,sellingunits,eottpoints from skudata order by category, packcode";
$result=mysql_query($sql);

 ?> 

<script type="text/javascript"> 

  function AjaxFunction(cat_id) { 
    var httpxml; 
    try { 
      // Firefox, Opera 8.0+, Safari 
      httpxml = new XMLHttpRequest(); 
    } catch (e) { 
      // Internet Explorer 
      try { 
        httpxml = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
        try { 
          httpxml = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e) { 
          alert("Your browser does not support AJAX!"); 
          return false; 
        } 
      } 
    } 
    function stateck() { 
      if (httpxml.readyState == 4) { 
        var myarray = eval(httpxml.responseText); 
        // Before adding new we must remove previously loaded elements 
        for (j = document.testform.subcat.options.length - 1; j >= 0; j--) { 
          document.testform.subcat.remove(j); 
        } 
        for (i = 0; i < myarray.length; i++) { 
          var optn = document.createElement("OPTION"); 
          optn.text = myarray[i]; 
          optn.value = myarray[i]; 
          document.testform.subcat.options.add(optn); 
        }  
      } 
    } 
    var url="dd.php"; 
    url = url+"?cat_id="+cat_id; 
    url = url+"&sid="+Math.random(); 
    httpxml.onreadystatechange = stateck; 
    httpxml.open("GET",url,true); 
    httpxml.send(null); 
  } 

</script> 




 <script type="text/javascript"> 
function updateinput(){ 
var e = document.getElementById("subcat"); 
var catSelected = e.options[e.selectedIndex].value; 

document.getElementById("copycat").value=catSelected; 
} 
</script> 


<script type="text/javascript"> 
function sendValue(value)
 { 
 value = e.options[e.selectedIndex].value; 
 var parentId = <?php echo json_encode($_GET['id']); ?>; 
 window.opener.updateValue(parentId, value); 
 window.close(); 
 } 
 </script> 


<form name="testform">
Category: &nbsp; <select name=cat id=cat onchange="AjaxFunction(this.value);" style="width=600"> <br>
<option value='' style="width=600">Select One</option> 
<br>
<? 

  require "config.php";// connection to database  
  $q=mysql_query("select * from categories"); 
  while($n=mysql_fetch_array($q)){ 
    echo "<option value=$n[cat_id]>$n[category]</option>"; 
  } 

?> 
</select> 
 <br><br>
 Pack Code:
<select name=subcat onchange="updateinput();" > 
 <br><br>
</select>
<br><br>
<input type=text name=copycat id=copycat > 
<br><br>
<td><input type=button value="Select" onClick="sendValue(document.getElementById(copycat))" /></td>
</form> 
4

2 に答える 2

2

まず、選択ボックスと入力に ID を設定し、onChange イベントを追加します。

<select name=cat id=cat onchange="updateinput();" style="width=600">
<input type=text name=copycat id=copycat >

次に、この関数をどこかに置きます。

<script type="text/javascript">
function updateinput(){
var e = document.getElementById("cat");
var catSelected = e.options[e.selectedIndex].text;

document.getElementById("copycat").value=catSelected;
}    
</script>   

選択した項目の値が必要な場合は、この関数を使用して、選択した項目のラベルを入力します。

<script type="text/javascript">
function updateinput(){
var e = document.getElementById("cat");
var catSelected = e.options[e.selectedIndex].value;

document.getElementById("copycat").value=catSelected;
}
</script>   

完全なコードは次のとおりです。

     <? 

  $con = mysql_connect('localhost', 'username', 'password'); 
 if (!$con) 
   { 
   die('Could not connect to server: ' . mysql_error()); 
   } 
   $db=mysql_select_db("dbname", $con); 

    if (!$db) 
   { 
   die('Could not connect to DB: ' . mysql_error()); 
   } 


$sql="select packcode,category,description,grouping,packconfig,sellingunits,eottpoints from skudata order by category, packcode";
$result=mysql_query($sql);

 ?> 

<script type="text/javascript"> 

  function AjaxFunction(cat_id) { 
    var httpxml; 
    try { 
      // Firefox, Opera 8.0+, Safari 
      httpxml = new XMLHttpRequest(); 
    } catch (e) { 
      // Internet Explorer 
      try { 
        httpxml = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
        try { 
          httpxml = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e) { 
          alert("Your browser does not support AJAX!"); 
          return false; 
        } 
      } 
    } 
    function stateck() { 
      if (httpxml.readyState == 4) { 
        var myarray = eval(httpxml.responseText); 
        // Before adding new we must remove previously loaded elements 
        for (j = document.testform.subcat.options.length - 1; j >= 0; j--) { 
          document.testform.subcat.remove(j); 
        } 
        for (i = 0; i < myarray.length; i++) { 
          var optn = document.createElement("OPTION"); 
          optn.text = myarray[i]; 
          optn.value = myarray[i]; 
          document.testform.subcat.options.add(optn); 
        }  
      } 
    } 
    var url="dd.php"; 
    url = url+"?cat_id="+cat_id; 
    url = url+"&sid="+Math.random(); 
    httpxml.onreadystatechange = stateck; 
    httpxml.open("GET",url,true); 
    httpxml.send(null); 
  } 

</script> 


<script type="text/javascript"> 
function sendValue(value) 
{ 
    var parentId = <?php echo json_encode($_GET['id']); ?>; 
   window.opener.updateValue(parentId, value);
    window.close(); 
} 
</script> 

 <script type="text/javascript"> 
function updateinput(){ 
var e = document.getElementById("cat"); 
var catSelected = e.options[e.selectedIndex].value; 

document.getElementById("copycat").value=catSelected; 
} 
</script> 

<form name="testform">
Category: &nbsp; <select name=cat id=cat onchange="updateinput();" style="width=600"> <br>
<option value='' style="width=600">Select One</option> 
<br>
<? 

  require "config.php";// connection to database  
  $q=mysql_query("select * from categories"); 
  while($n=mysql_fetch_array($q)){ 
    echo "<option value=$n[cat_id]>$n[category]</option>"; 
  } 

?> 
</select> 
 <br><br>
 Pack Code:
<select name=subcat > 
 <br><br>
</select>
<br><br>
<input type=text name=copycat id=copycat >
<br><br>
<td><input type=button value="Select" onClick="sendValue('<?php echo $rows['packcode']; ?>')" /></td>
</form> 

私が変更され:

置く: onchange="updateinput();"

<select name=cat id=cat onchange="updateinput();" style="width=600">

<input type=text name=copycat id=copycat >

削除する:

 onBlur="document.getElementById('cat').value=this.value;"
于 2012-05-28T20:37:29.527 に答える
1

に追加id="cat"する必要があります:

<select name="cat" id="cat" onchange="AjaxFunction(this.value);" style="width=600"> 

と:

echo "<option value='".$n['cat_id']."'>".$n['category']."</option>"; 

デモ: http://jsfiddle.net/V94AJ/

于 2012-05-28T20:26:36.090 に答える