Jump to content

Stuck on some JS... driving me crazy

- - - - -

  • Please log in to reply
1 reply to this topic

#1
phpforfun

phpforfun

    Speaks fluent binary

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,236 posts
My script is pretty basic, take a php array, print out the necessary HTML fields and JS, then when you click on a span, turn it into a text box or select box, one the user selects whats needed, it will change back..

Heres The code.
<?php
$form = array(     "test1" => array("type" => "input",         // array("FIELD NAME" => array("type" => "INPUT TYPE",     // This one will just be a select
                "value"    => "TEST 1"),        // "value" => "CURRENT VALUE"),             // Since this is an input, the value will be the default value
                
        "test2" => array("type" => "input", 
                "value" => "TEST 2"),
                
        "test3" => array("type" => "select",                     // array("FIELD NAME" => array("type" => "INPUT TYPE", 
                "value" => array("A TXT"    => array("A VAL", 0),    // "values" => array("NAME"    => array("VALUE", 0),    // The 0 is not selected
                        "B TXT"     => array("B VAL", 0),    // "values" => array("NAME"    => array("VALUE", 0),    // The 1 is selected
                        "C TXT"     => array("C VAL", 0),
                        "D TXT"     => array("D VAL", 0),
                        "E TXT"     => array("E VAL", 1),
                        "F TXT"     => array("F VAL", 0),
                        )
                )
        );
        

?>
<html>
<head>
<title>Span to Text Box and Back - Select and Input field.</title>
<style type="text/css">
.replace {
    display:none;
}

</style></head>
<script type="text/javascript">
function exchange(el){
    var ie=document.all&&!document.getElementById? document.all : 0;
    var toObjId=/b$/.test(el.id)? el.id.replace(/b$/,'') : el.id+'b'; /* the Element ID of the select field */
    
    toObjIdObj = eval(toObjId);
    var selectedID = toObjIdObj.selectedIndex;
    
    var toObj=ie? ie[toObjId] : document.getElementById(toObjId);
    if(/b$/.test(el.id)) {
        switch(el.type) {
            case 'select-one':
                var selectVal=toObjIdObj.options[selectedID].text;
                toObj.innerHTML=selectVal;
                break;
            case 'text':
                toObj.innerHTML=el.value;
                break;
        }
        /*toObj.innerHTML=el.value;
        var selectedIndex = el.selectedIndex;
        var sIndex = el.selectedIndex;*/
        /*toObj.innerHTML=toObjIdObj.options[selectedID].text; /* Works if its a select box */
    }else{
        /*toObj.style.width=el.offsetWidth+7+'px';*/
        toObj.value=el.innerHTML;
    }
    el.style.display='none';
    toObj.style.display='inline';
}
</script>

<body>
<form action="" name="searchForm" method="POST">
<?php
foreach ($form as $var => $val) {
    echo '<b>'.$var.'</b> - <span id="'.$var.'" onclick="exchange(this);">';
    switch ($val['type']) {
        case 'input':
            echo $val['value'];
            break;
        
        case 'select':
            foreach ($val['value'] as $inputVar => $inputVal) {
                if($inputVal[1] == 1) {
                    echo $inputVar;
                    //break;
                }
            }
            break;
    }
    
    echo '</span>';
    
    switch ($val['type']) {
        case 'input':
            echo '<input onBlur="exchange(this);"  id="'.$var.'b" class="replace" type="text" value="'.$val['value'].'" name="'.$var.'" style="width:200px"><br>'.PHP_EOL;
            break;
        
        case 'select':
            echo '<select onBlur="exchange(this);" id="'.$var.'b" class="replace" type="select" name="'.$var.'" style="width:200px">'.PHP_EOL;
            foreach ($val['value'] as $optionVar => $optionVal) {
                echo '<option value="'.$optionVal[0].'" ';
                if($optionVal[1] == 1) {
                    echo "selected";
                    //break;
                }
                echo '>'.$optionVar.'</option>'.PHP_EOL;
            }
            echo '</select>'.PHP_EOL;
            break;
    }
    
    
}
?>
<br><input type="submit">
</form>

<?php
if( count($_POST) > 0 ) {
    echo "<b>RESULTS</b>".PHP_EOL;
    echo "<pre>".PHP_EOL;
    print_r($_POST);
    echo "</pre>".PHP_EOL;
}
?>
</body>
</html>

My problem is right here..

Quote

toObjIdObj = eval(toObjId);
var selectedID = toObjIdObj.selectedIndex;

var toObj=ie? ie[toObjId] : document.getElementById(toObjId);
if(/b$/.test(el.id)) {
switch(el.type) {
case 'select-one':
var selectVal=toObjIdObj.options[selectedID].text;
toObj.innerHTML=selectVal;
break;
case 'text':
toObj.innerHTML=el.value;
break;
}
/*toObj.innerHTML=el.value;
var selectedIndex = el.selectedIndex;
var sIndex = el.selectedIndex;*/
/*toObj.innerHTML=toObjIdObj.options[selectedID].text; /* Works if its a select box */
}
Firebug is saying selectedID is undefined, even though I define it right above, If I put document.write(toObjIdObj.options[selectedID].text); right above the if statment, it will print it out fine, if I put it inside the if statement.. it fails..

Help a brotha out!
Checkout my new forum! http://adminreference.com/

#2
phpforfun

phpforfun

    Speaks fluent binary

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,236 posts
Also just noticed that this works..

toObjIdObj = eval(toObjId);
    var selectedID = toObjIdObj.selectedIndex;
    document.write(toObjIdObj.options[selectedID].text);
    var toObj=ie? ie[toObjId] : document.getElementById(toObjId);

But this fails
toObjIdObj = eval(toObjId);
    var selectedID = toObjIdObj.selectedIndex;
    
    var toObj=ie? ie[toObjId] : document.getElementById(toObjId);
    document.write(toObjIdObj.options[selectedID].text);

So its that var toObj..... thingy




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users