2017-03-14 5 views
1

Wenn ich wählte Optionswert 3 wählen, dann 3 Textfeld anzeigen.getElementById kann nicht Wert von HTML-ID erhalten

1.dieses Bild ist das Ergebnis dessen, was ich will.

  1. aber jetzt falsches Ergebnis wie folgt. enter image description here

(Verwendung style_display_on(), sichtbar/versteckt, keine) Aber es Arbeit dosen't. Fehle ich etwas?

(PHP-Array konvertiert in JavaScript-Array,
und dann von PHP zählen Array von getElementById Wert von Javascript verwendet wird ....)

<?php 

    $arr[0] = "10.1.35.31"; 
    $arr[1] = "10.1.35.122"; 
    $arr[2] = "10.1.35.133"; 

?> 

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="../css/main.css"> 
<script type="text/javascript"> 

function getR() { 
    document.getElementById("ipcnt").value = "<?php echo count($arr); ?>"; 
<?php 
    for($i = 0; $i < count($arr); $i++) { 
     echo "document.getElementById(\"" . "mmeremoteip" . $i . "\").value = \"" . $arr[$i]. "\";\n"; 
    } 
?> 
} 

function mmeswitch(){ 

<?php 
    for($i = 0; $i < 8; $i++){ 
     echo "document.getElementById(\"mmeremoteip". $i . "\").style.visibility = \"hidden\";\n"; 
     echo "document.getElementById(\"mmeremoteip". $i . "\").style.display = \"none\";\n"; 
    } 
    for($i = 0; $i < 8; $i++){ 
     echo "if(document.getElementById(\"ipcnt\").value == " . ($i+1) . ") { \n";    
     for($j = 0; $j < $i+1; $j++) { 
      echo "document.getElementById(\"mmeremoteip". $j . "\").style.visibility = \"visible\";\n"; 
      echo "document.getElementById(\"mmeremoteip". $j . "\").style.display = style_display_on();\n"; 
     } 
     echo "}\n"; 
    } 
?> 

</script> 
</head> 
<body onLoad="getR();"> 
<form name="save" method="post"> 
<h1>TEST</h1> 
<table> 

<tr id="ipcnt"><td colspan="2">No. of IP</td> 
<td><select name="ipcnt" size="1" onChange="mmeswitch();"> 
<?php 
for($i = 1; $i <= 8; $i++) { 
     echo "<option value='". $i ."'>". $i ."</option>\n"; 
} 
?> 
</select></td> 
</tr> 
<?php 
for($i = 0; $i < 8; $i++) { 
    echo "<tr id=\"mmeremoteip".$i."\"><td class=\"param\" colspan=\"2\">MME Remote IP" . ($i+1) . "</td>\n"; 
    echo "<td><input type=\"text\" name=\"mmeremoteip" . $i . "\" class=\"inputParam\" size=\"20\" maxlength=\"15\" value=\"".$arr[$i] ."\"></td></tr>\n"; 
} 
?> 
</table> 
</body> 
</html> 
+3

Können Sie die gerenderte Version bereitstellen - dh ohne die ganze php Verschleierung? Sieht so aus, als ob du mehr Platz haben würdest, aber ich kann es nicht sagen. –

+0

Sie haben PHP-Code in js Funktion injiziert –

+0

Entschuldigung !! Ich gebe PHP-Array-Code ein .. !! – kara

Antwort

0

In dieser Geige ich ein funktionierendes Beispiel gepostet Ihrer Code in Vanille js. Der js Code hierfür lautet:

document.body.onload = init; 
let arr = [1,2,3,4,5]; // Array is from php like 
/* 
let arr = JSON.parse('<?php echo json_encode($arr); ?>'); // In case you don't know what is does read more about json 
*/ 
// function called when page is loaded 
function init() { 
// this creates textfields for each 'ip' 
for(let i=0;i<arr.length;i++){ 
    let el = document.createElement('input'); // create textfield 
    el.setAttribute('type','text'); // set it to text field 
    el.className = 'textField'; // set class for later use 
    el.id = 'textField'+i; // set id 
    el.value = arr[i]; // set value(IP) 
    document.getElementById('container').appendChild(el); // add to the page 
} 
document.getElementById('textFieldSelect').addEventListener('change',onSelectChange); // add action to select 
onSelectChange(); // "trigger" select when page is loaded 
} 

function onSelectChange(){ 
    var val = document.getElementById('textFieldSelect').value; // how many textfields shall there be 
    // hide all textfields 
    document.querySelectorAll('.textField').forEach(function(elem,idx){ 
    elem.style = 'display: none'; 
    }); 
    //show exactly 'val' textfields 
    for(let i = 0;i<val;i++){ 
    document.getElementById('textField'+i).style='display:block;'; 
    } 
} 

https://jsfiddle.net/tnrrhx0d/1/

Verwandte Themen