Radio buttom that when selected changes the background of a div and saves the result in the BD

Asked

Viewed 67 times

1

Hello, what I want to do specifically are radio Buttons that when one is activated the background color of the div skirt of the default color (white) and change its background color according to the radio buttom, and save this change in the database referring to such color, without having to submit any form type through a submit button. It got a little confused, so, below is an example:

I have the radio buttom options: opc1, opc2, opc3

When I activate the opc1 the div that contains the Buttons radio set gets its totally green background, and this is saved in the BD so that whenever I return it turns green and with its proper radio option selected (opc1) and do not lose the change when the page is updated. But if in this same div I decide to click on opc2, the div changes the color and turns orange, indicating something else, thus saving it in the BD tbm in the same way, and overwriting in the BD the Row that was stored the green color, and finally, if the user clicks on opc3, the div will turn red, and also the change will be saved in the BD so that overrides the previous.

I’m new and in the process of learning in Javascript, so I still have some difficulty in this although it seems simple, I’ve searched a lot for it and I didn’t find anything very enlightening, I hope someone here can help me, follows below the two scripts I did (There are two because I tried two ways, but both failed, but I will leave you both to know which way is more correct)

First way:

<body>
<div>
    <form method="post">
        <label><input type="radio" name="colors" name="green" onClick="changeColor('g')"> Verde <br></label>
        <label><input type="radio" name="colors" name="orange" onClick="changeColor('o')"> Laranja <br></label>
        <label><input type="radio" name="colors" name="red" onClick="changeColor('r')"> Vermelho <br></label>
    </form>
</div>

Script way 1:

function changeColor(color){
        var color = document.div.style.backgroundColor;
        switch(value){
            case 'g':
                color = "#6F8456";
            break;
            case 'o':
                color = "#FA7921";
            break;
            case 'r':
                color = "#670000";
            break;
        }
        document.div.backgroundColor = color;
    }

Second way:

<div>
    <form method="post">
        <label><input type="radio" name="colors" name="green" onClick="changeColour('g')"> Verde <br></label>
        <label><input type="radio" name="colors" name="orange" onClick="changeColour('o')"> Laranja <br></label>
        <label><input type="radio" name="colors" name="red" onClick="changeColour('r')"> Vermelho <br></label>
    </form>
</div>

Script Second way:

function changeColour(){
        if("g")
            document.div.style.backgroundColor="#6F8456";
        else
            document.div.style.backgroundColor="#ffffff";
        if("o")
            document.div.style.backgroundColor="#FA7921";
        else
            document.div.style.backgroundColor="#ffffff";
        if("r")
            document.div.style.backgroundColor="#670000";
        else
            document.div.style.backgroundColor="#ffffff";
    }

If possible send the code commenting to me try to understand which changes have referred to what, and also do the code in Javascript and NOT in Jquery.

php javascript html mysql

2 answers

0


Instead of making multiple comparisons in the function, you can use dataset to get the values of the colors:

<input type="radio" name="colors" name="green" data-cor="6F8456" onclick="changeColor(this)">

The dataset above is the data-cor="6F8456". By default, I hid the # of hexa color code, which you can then include in PHP.

Let’s go to the code:

Beyond the dataset explained above, I suggest in onclick send a this in function. The this represents the element itself clicked, and this will facilitate quite there in the function.

HTML would look like this:

<div>
    <form method="post">
        <label><input type="radio" name="colors" name="green" data-cor="6F8456" onclick="changeColor(this)"> Verde <br></label>
        <label><input type="radio" name="colors" name="orange" data-cor="FA7921" onclick="changeColor(this)"> Laranja <br></label>
        <label><input type="radio" name="colors" name="red" data-cor="670000" onclick="changeColor(this)"> Vermelho <br></label>
    </form>
</div>

And the JS:

function changeColor(e){
   var cor = e.dataset.cor; //  seleciona a cor pelo dataset
   document.querySelector("div").style.backgroundColor = "#"+cor;

   // envia Ajax
   var http = false;
   if(navigator.appName == "Microsoft Internet Explorer"){ // IE antigos
      http = new ActiveXObject("Microsoft.XMLHTTP");
   }else{
      http = new XMLHttpRequest();
   }

   url_ = "pagina.php?cor="+cor; // página onde será gravado no BD
   http.open("GET", url_, true);
   http.onreadystatechange=function() {
      if(http.readyState == 4) {
         alert(http.responseText); // resposta do Ajax. Se naõ quiser resposta, pode apagar esta linha
      }
   }
   http.send(null);
}

The above Ajax will send to pagina.php the colour code (without the #). On the PHP page, you should capture this code with $_GET['cor']; and record in the bank.

Example running only the color change, since the snippet here will not send anything by Ajax:

function changeColor(e){
   var cor = e.dataset.cor; //  seleciona a cor pelo dataset
   document.querySelector("div").style.backgroundColor = "#"+cor;

   // envia Ajax
   var http = false;
   if(navigator.appName == "Microsoft Internet Explorer"){ // IE antigos
      http = new ActiveXObject("Microsoft.XMLHTTP");
   }else{
      http = new XMLHttpRequest();
   }

   url_ = "pagina.php?cor="+cor; // página onde será gravado no BD
   http.open("GET", url_, true);
   http.onreadystatechange=function() {
      if(http.readyState == 4) {
         //alert(http.responseText); // resposta do Ajax. Se naõ quiser resposta, pode apagar esta linha
      }
   }
   http.send(null);
}
<div>
    <form method="post">
        <label><input type="radio" name="colors" name="green" data-cor="6F8456" onclick="changeColor(this)"> Verde <br></label>
        <label><input type="radio" name="colors" name="orange" data-cor="FA7921" onclick="changeColor(this)"> Laranja <br></label>
        <label><input type="radio" name="colors" name="red" data-cor="670000" onclick="changeColor(this)"> Vermelho <br></label>
    </form>
</div>

  • It didn’t work properly, when sent to the BD he doesn’t know how to differentiate the 3 colors from each other, regardless of the radio option I check it saves "color" in the BD, and when updating the page, the selected color goes back to the standard (white)

  • @Luizoleia You have to put the # before the color code in PHP

  • I put and it didn’t work, the difference is that now the field in BD is blank, put the code like this: $status = $_GET['#color'];

  • It’s not that.. the GET was right... you have to put the # in PHP where you want to put the color in the element, something like this: <div style="background: #<?=cor ?>">

  • The color code has a # before the numbers, right? As you are saving in the bank only the numbers, you need to concatenate in the code the number saved in the bank with the #, being like this: #6F8456

  • Oh yes, I had not understood this from php, but even so it still didn’t work and still sends only the word "color" for BD, in the last hour tried several ways and so far none of them worked

  • It looks like the code: <div id="radioCor" style="background: #<? php= $status ? >"> The $status variable is how I referenced the color value in my php upload code that I had already finished

  • I think the syntax is wrong. It would have to be like this: <div id="radioCor" style="background: #<?=$status ?>">... but look at the page source code and see what’s coming back from PHP...

Show 3 more comments

0

function verde() {
  document.body.style.backgroundColor = "#00ff00";
}

function laranja() {
  document.body.style.backgroundColor = "#FFA500"
}

function vermelho() {
  document.body.style.backgroundColor = "#ff0000"
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title>xxxx</title>
  <meta charset="utf-8" />

</head>

<body>
  <div>
    <form method="post">
      <input type="radio" name="cor" value="v" onClick="verde()" /> Verde
      <br />

      <input type="radio" name="cor" value="l" onClick="laranja()" /> Laranja
      <br />

      <input type="radio" name="cor" value="r" onClick="vermelho()" /> Vermelho
    </form>
  </div>
</body>

</html>

Browser other questions tagged php javascript html mysql

You are not signed in. Login or sign up in order to post.