I have index.php:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.on').click(function() {
var val = $(this).val();
$.ajax({
url: "try.php",
type: "POST",
data: {'myVar': val}
});
});
$('.off').click(function() {
var val = $(this).val();
$.ajax({
url: "try.php",
type: "POST",
data: {'myVar': val}
});
});
});
</script>
<body>
<img class="bulb" src="bulb.png" alt="...">
<button class="on" value="http://pageon.org">On</button>
<button class="off" value="http://pageoff.org">Off</button>
</body>
I send value of buttons to try.php. Depending on the clicked button, I get one variable in the try.php file, for the ON button - 1 , for the OFF button - 0 (variable $curl_response).
Is it possible to change the img in the index.php file dynamically, depending on the received variable from the try.php page? For example, if the received variable is 1, src = "bulb.png", and if 0, then src = "bulb2.png"?
try.php :
<?php
$name = $_POST['myVar'];
$service_url = $name;
$curl = curl_init($service_url);
// Ustaw opcje połączenia
curl_setopt($curl, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4 );
//curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$curl_response = curl_exec($curl);
curl_close($curl);
?>
EDIT:
<script type="text/javascript">
$(document).ready(function () {
$('.btn').click(function() {
var val = $(this).val();
$.ajax({
url: "try.php",
type: "POST",
data: {'myVar': val}
success: function(result){
switch(result){
case "0":
$(".bulb").attr("src", "bulb.png");
break;
case "1":
$(".bulb").attr("src", "bulb2.png");
break;
}
}
});
});
});
</script>
