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

Navigation
1
Hi, what I want to do specifically are radio buttons that when one activates the background color of the div skips the default color (white) and changes its background color according to the buttom radius, and save that change in the database. data without reference to such color, without having to send any type of form with a send button. It was a bit confusing, so here's an example:

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

When I activate opc1 the div that contains the set of radio buttons gets its background totally green, and this is saved in the DB so that whenever I return it it will be green and with its appropriate radio option selected (opc1 ) and do not miss 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, saving it in BD tbm in the same way, and overwriting in BD the row that was stored in green color, and Finally, if the user clicks on opc3, the div will turn red, and the change will be saved in the DB so that it overwrites the previous one.

I'm newbie and learning in JavaScript, so I still have some difficulty in this although it seems simple, I've already looked for it a lot and I do not find anything very enlightening, I hope someone here can help me, follow below the two scripts that I did it (they are two because I tried two ways, but both failed, but I'll leave 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>

Second way script: 

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 for me to try to understand what changes have been made to what, and also to do the code in JavaScript and NOT in Jquery.

    
asked by anonymous 01.02.2018 / 02:54

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 above dataset is data-cor="6F8456" . By default, I've hidden the # of the hex color code, which you can then include in PHP.

Let's go to the code:

In addition to the dataset explained above, I suggest in onclick send a this to the function. The this represents the clicked element itself, and this will make it much easier there in the function.

The 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 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 the color code (without the pagina.php ) to # . In the PHP page, you should capture this code with $_GET['cor']; and write to the database.

Example working just the color change, since the snippet here will not send anything through 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>
    
01.02.2018 / 03:42
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>
    
01.02.2018 / 04:28
How to make the image to be responsive in the mobile inside the Carsel bootstrap 4, so it fits How to get your own location (LatLng) in Android Studio [duplicate]