CODEWITHSUNDEEP
javascriptphp
Jackson Hogan
Jackson Hogan

Reputation: 83

echo php value into javascript onchange()

I have this html select form, I am using the onchange method to send and xmlhttp request.

<select class="form-control form-control-sm" id="sizeselector<?php echo $row["id"]?>" name="sizes" onchange="showColors(<?php echo $row["id"];?>, item, size)">
<?php while($row1 = $result1->fetch_assoc()){?>
<option value="<?php echo $row1["size"]?>"><?php echo $row1["size"]?></option>
<?php}?></select>
<div id="colorselector<?php echo $row["id"]?>">
    <p>Text</p>
</div>

The above code works, but when I change it to get the actual values from the rows...

onchange="showColors(<?php echo $row["id"];?>, <?php echo $row["name"]?>, this.value)"

It doesn't work at all, I have tried everything I can think of. I get no errors.

function showColors(id, item, size) {
if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("colorselector"+id).innerHTML = this.responseText;
    }
};
try{
    xmlhttp.open("GET","getColor.php?s=size&c=size",true);
    xmlhttp.send();
}catch(err){
    document.getElementById("colorselector").innerHTML = err.message;
}

}

Updated: This is the output I get from the source code.

<select class="form-control form-control-sm" id="sizeselector40" name="sizes"onchange='showColors(40,'Women's Unicorn', this.value)'>

with using...

onchange='showColors(<?php echo $row["id"];?>, <?php echo $row["name"]?>, this.value)'

Update 2: Even when I manually add the values to the onchange, nothing happens..

onchange="showColors(27, t, a)"

function showColors(id, item, size) {
if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("colorselector"+id).innerHTML = this.responseText;
    }
};
xmlhttp.open("GET","getColor.php?s="+item+"&c="+size,true);
xmlhttp.send();

}

I can run the getColor.php in another browser window, and get the result.

Upvotes: 0

Views: 1590

Answers (3)

ScaisEdge
ScaisEdge

Reputation: 133380

You should use different quotes for javascript code and php index otherwise using the same you formed a wrong string 

 onchange='showColors(<?php echo $row["id"];?> , <?php echo $row["name"]?>, this.value)'

or try 

 echo "onchange='showColors(".$row["id"] .",'". $row["name"] . "', this.value)'";

and check with ctrl+U if the porper code is formed in you page source code

or if the quotes are to complex use some var

    echo ' var my_id = ' . $row["id"] . ';';
    echo ' var my_name = "' . $row["name"] . '";';

    echo "onchange='showColors( my_id ,my_name, this.value)'";

and do the present of single quote in name you could try using 

onchange= "showColors(<?php echo $row['id'];?>, 
                    <?php echo '"'.  $row['name'] . '"' ?>, this.value)"

Upvotes: 1

Julian David
Julian David

Reputation: 311

I guess you missed the semicolon after <?php echo $row["name"]?>.

Upvotes: 0

Shringiraj Dewangan
Shringiraj Dewangan

Reputation: 784

<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>



<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    alert(x);
}
</script>

Upvotes: 0

Related Questions