CODEWITHSUNDEEP
javascripthtmlfunctionif-statement
bourki
bourki

Reputation: 43

Javascript if/else on submit

im totally new to javascript and im currently working on my first functions. I have these 2 text input area where one can put his name and his level.

<form action="/action_page.php">
Nom: <input type="text" name="fullname"><br><br>
Niveau (1 &aacute; 6): <input type="text" name="niveau">
<input type="submit" value="Afficher partie 2">
</form>

After submitting, the user is supposed to be shown a message with his name and his level (if level is between 1-6, else its an error message).

This is how i wrote my script:

<script>
var x = oninput;
var y = oninput;
if (y>=1){
  document.write("Bonjour + 'x'");
  document.write("Niveau='y'");
}if (y<=6){
  document.write("Bonjour + 'x'");
  document.write("Niveau='y'");
}
else {
  document.write("<p style="color:red;">Erreur le niveau doit etre en  
  1 et 6</p>
}
</script>

I really wanted to know if I wrote that the right way, I also cant figure how to show the user his name with the variable X.

I also have a problem understanding how to link my script to the input box.

Upvotes: 0

Views: 4375

Answers (3)

Wassup
Wassup

Reputation: 42

Try this, I hope it'll works

On your form,

<form name="form1" action="/action_page.php">
  Nom: <input type="text" name="fullname"><br><br>
  Niveau (1 &aacute; 6): <input type="text" name="niveau">
  <input type="submit" value="Afficher partie 2" onclick="myFunction()">
</form>

On your script

function myFunction() {
    var x = document.form1.fullname.value;
    var y = document.form1.niveau.value;

    if (y >= 1 && y <= 6) {
        document.write("Bonjour " +x);
        document.write("Niveau=" +y);
    } else {
        document.write("<p style='color:red;'>Erreur le niveau doit etre en 
        1 et 6</p>");
    }
}

Upvotes: 0

Tibrogargan
Tibrogargan

Reputation: 4603

This is a version of your code that does not do a submit, but rather attaches an event handler to a button and appends to the DOM instead of rewriting it. Attaches event handlers using addEventListener as putting onclick handlers in HTML is considered bad form.

function do_stuff() {
  var x = document.getElementsByName("fullname")[0].value;
  var y = document.getElementsByName("niveau")[0].value;
  if (parseInt(y)>=1 && parseInt(y)<=6){
    document.body.appendChild(document.createTextNode("Bonjour "+x));
    document.body.appendChild(document.createElement("br"));
    document.body.appendChild(document.createTextNode("Niveau='"+y+"'"));
  }
  else {
    var p = document.createElement('P');
    p.style.color = "red";
    p.appendChild(document.createTextNode("Erreur le niveau doit etre en 1 et 6"));
    document.body.appendChild(p);
  }
}

document.addEventListener( "DOMContentLoaded", function() {
  for(let input of document.getElementsByTagName("input")) {
    if (input.type == "button") { input.addEventListener( "click", do_stuff ); }
  }
}, false );
<form>
Nom: <input type="text" name="fullname"><br><br>
Niveau (1 &aacute; 6): <input type="text" name="niveau">
<input type="button" value="Afficher partie 2">
</form>

Upvotes: 0

Noobit
Noobit

Reputation: 431

Your javascript have plenty of error. I cleaned it all up for you. Just read through the comments to understand what the JS is doing. Have fun :)

  function showmylevel(event) { 
    event.preventDefault(); // Prevent Form Actually Submitting
    var x = document.getElementsByName('fullname')[0].value; // Get Value
    var y = document.getElementsByName('niveau')[0].value; // Get Value
    console.log(y);
    if ( y>0 && y<7 ){
      document.write("Bonjour "+x); // Display Name
      document.write("<br>"); // Break Line
      document.write("Niveau = "+y); // Display Level
    } else {
      // Display Error
      document.write('<p style="color:red;">Erreur le niveau doit etre en 1 et 6</p>');
    }
    return false; // Stop Form From Going Anywhere
  }
<form action="action_page.php" onsubmit="showmylevel(event);">
Nom: <input type="text" name="fullname"><br><br>
Niveau (1 &aacute; 6): <input type="text" name="niveau"><br><br>
<input type="submit" value="Afficher partie 2">
</form>

Upvotes: 1

Related Questions