Html style changes don't stick when applied after form button onclick

Question

I am following a beginner class in html. Through javascript I am trying to modify a form button aspect when the form is submitted, but that modification reverts right away. It looks like the DOM or the form gets reset, but I don't know how to work around that.

function validateQuestion1(radio){
 document.getElementById("valider1").style.background='green';
 myAnswer = false;
 for (var i=0;i<radio.length;i++) {
  if ((radio[i].checked) && (radio[i].value=="1")) {
   myAnswer=true;    
  } 
 }
}

    <body>
     <form name="question1">
   <legend>La première balise présente dans un fichier html doit être:</legend>
   <input type="radio" id="choix1" name="Q1" value="0">
   <label for="head" id="head1">head</label>
   <input type="radio" id="choix2" name="Q1" value="0">
   <label for="body" id="head2">body</label>
   <input type="radio" id="choix3" name="Q1" value="1">
   <label for="!DOCTYPE" id="head3">!DOCTYPE</label>
   <input type="radio" id="choix4" name="Q1" value="0">
   <label for="html" id="head4">html</label>
   <button onclick="validateQuestion1(document.forms.question1.Q1)" id="valider1">Valider</button>
     </form>
   </body>

because you are submitting the form.... – epascarello Aug 07 '19 at 16:56 — epascarello, Aug 07 '19 at 16:56

pegasuspect · Accepted Answer · 2019-08-07T17:03:13.727

You can prevent form submit with

<form onsubmit="return false;">

This will prevent page from refreshing. See below:

function validateQuestion1(radio){
    document.getElementById("valider1").style.background='green';
    myAnswer = false;
    for (var i=0;i<radio.length;i++) {
        if ((radio[i].checked) && (radio[i].value=="1")) {
            myAnswer=true;    
        } 
    }
}

<body>
    <form name="question1" onsubmit="return false;">
        <legend>La première balise présente dans un fichier html doit être:</legend>
        <input type="radio" id="choix1" name="Q1" value="0">
        <label for="head" id="head1">head</label>
        <input type="radio" id="choix2" name="Q1" value="0">
        <label for="body" id="head2">body</label>
        <input type="radio" id="choix3" name="Q1" value="1">
        <label for="!DOCTYPE" id="head3">!DOCTYPE</label>
        <input type="radio" id="choix4" name="Q1" value="0">
        <label for="html" id="head4">html</label>
        <button onclick="validateQuestion1(document.forms.question1.Q1)" id="valider1">Valider</button>
    </form>
</body>

Danziger · Answer 2 · 2019-08-07T17:24:41.220

When you press the button, its background is updated but the form is also sent, which causes the page to refresh, that's the reason why you don't see the change.

If you prevent the form submission with e.preventDefault(), the change will be preserved:

const form = document.getElementById('form');
const submit = document.getElementById('submit');

form.onsubmit = (e) => {
    e.preventDefault();
    
    submit.style.color = 'white'; 
    submit.style.background = form.Q1.value === '1' ? 'green' : 'red';
}

body {
  font-family: monospace;
  font-size: 14px;
}

p + p {
  margin-top: 32px;
}

label {
  display: inline-flex;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 256px;
  align-items: center;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .25);  
  transition: box-shadow ease-in 100ms;
}

label:hover {
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, .125);  
}

input[type='radio'] {
  margin: 0 8px 0 0;
  cursor: pointer;
}

#submit {
  border: 0;
  background: transparent;
  color: #333;
  font-size: 16px;
  font-family: monospace;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 256px;
  padding: 8px 20px;
  outline: none;
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, .125);  
  transition: box-shadow ease-in 100ms;
}

#submit:hover {
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, .25);  
}

<form id="form">
  <p>La première balise présente dans un fichier html doit être:</p>
  
  <p>
    <label for="choix1">
      <input type="radio" id="choix1" name="Q1" value="0"> head
    </label>

    <label for="choix2">
      <input type="radio" id="choix2" name="Q1" value="0">body
    </label>

    <label for="choix3">
      <input type="radio" id="choix3" name="Q1" value="1">!DOCTYPE
    </label>

    <label for="choix4">
      <input type="radio" id="choix4" name="Q1" value="0">html
    </label>
  </p>
  
  <p>
    <button id="submit" type="submit">Valider</button>
  </p>
</form>

If you need to send the data anyway, you can use AJAX to send the form without refreshing the page: Submitting HTML form using Jquery AJAX

Thanks for taking the time to answer. I used the
in my code to solve this problem. I also used your css code to complete the rest of my code. Thanks! — Guily, Aug 07 '19 at 18:43

Html style changes don't stick when applied after form button onclick

2 Answers2