echo php value into javascript onchange()

Question

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.

Updated post with new code.

Jackson Hogan
– Jackson Hogan

2018-04-06 20:18:37 +00:00
Commented Apr 6, 2018 at 20:18 — Jackson Hogan
– Jackson Hogan, Commented Apr 6, 2018 at 20:18

ScaisEdge · Accepted Answer · 2018-04-06 19:47:23Z

1

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)"

edited Apr 6, 2018 at 19:47

answered Apr 6, 2018 at 19:18

ScaisEdge

133k10 gold badges98 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jackson Hogan Over a year ago

I had tried that, it didn't work, Nothing had changed.

ScaisEdge Over a year ago

asnwer updated .. check if the code is properly created using CTRL + U

Patrick Q Over a year ago

The problem is most likely that the name value has to be quoted in the list of arguments

ScaisEdge Over a year ago

as suggest by @PatrickQ i have added quote for the name values . (echo solution) hope is useful

ScaisEdge Over a year ago

anyway i have added a 3 suggestion .. hope ius useful

|

Shringiraj Dewangan · Accepted Answer · 2018-04-06 19:28:26Z

0

<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>

answered Apr 6, 2018 at 19:28

Shringiraj Dewangan

78410 silver badges27 bronze badges

Comments

Julian David · Accepted Answer · 2018-04-06 19:36:54Z

0

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

answered Apr 6, 2018 at 19:36

Julian David

3111 silver badge12 bronze badges

Collectives™ on Stack Overflow

echo php value into javascript onchange()

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related