Why the onsubmit doesnt work and if I call the function in the console it runs?

1211 views javascript
8

I have this html:

<!doctype html>
<html class="no-js" lang="">

<head>
<meta charset="utf-8">

<script src="js/filename.js"></script>
</head>

<body>
    <form id = "dp5" action=""  method="POST" onsubmit="Write_Text()">
      <h3>5- Do you know any browsers?</h3>
      <input id = "No" type="radio" name="dp5N" value="false">
      <label for = "No">No </label>

      <input id = "yes" type="radio" name="dp5S" value="true">
      <label for = "yes">Yes</label>

      <label for = "text">6 - Which?</label>
      <input id = "text" type="text" name="dp5text" value="">
    </form>

    <div id="next">
      <input id="sub" type="submit" name="submit" value="Next">
    </div>
</body>
</html>

And this javascript "filename":

function Write_Text() {
let x = document.forms["dp5"]["No"].value;

if (x === "false") {
    document.getElementById("text").disabled=true;
    document.getElementById("text").value="";
} else {
    document.getElementById("text").disabled =false;
}

}

The text box should start disabled and only be able when the user choose "yes" option. The function isn't working at all.

answered question

3 Answers

10

Once you fix the problem Sreekanth MK pointed out, you'll have a new problem:

Nothing is preventing the default action of the form submission, which is to send the form data to the action URL (in your case it will be the page's own URL) and replace the current page with whatever that URL returns.

You need to prevent the default action. The minimal way is:

<form id = "dp5" action=""  method="POST" onsubmit="Write_Text(); return false">

or

<form id = "dp5" action=""  method="POST" onsubmit="event.preventDefault(); Write_Text();">

...but I recommend using modern event handling instead by removing the onsubmit attribute and changing the JavaScript like this:

function Write_Text(event) {
    event.preventDefault();
    let x = document.forms["dp5"]["No"].value;

    if (x === "false") {
        document.getElementById("text").disabled=true;
        document.getElementById("text").value="";
    } else {
        document.getElementById("text").disabled =false;
    }
}
document.getElementById("dp5").addEventListener("submit", Write_Text);

Side note: You're free to do anything you like in your own code, but FWIW, the overwhelming convention in JavaScript is that function names start with a lower case letter and use camelCase, other than constructors which used initially-capped CamelCase instead. So writeText rather than Write_Text.

posted this
5

Your submit button is outside the form. Put it inside the form and it will work.

<form id = "dp5" action=""  method="POST" onsubmit="Write_Text()">
  <h3>5- Do you know any browsers?</h3>
  <input id = "No" type="radio" name="dp5N" value="false">
  <label for = "No">No </label>

  <input id = "yes" type="radio" name="dp5S" value="true">
  <label for = "yes">Yes</label>

  <label for = "text">6 - Which?</label>
  <input id = "text" type="text" name="dp5text" value="">

  <div id="next">
    <input id="sub" type="submit" name="submit" value="Next">
  </div>
</form>

posted this
5

you need to use event object here to prevent Default because page get refreshed onSubmit and then submit form in your function Write_Text()

function Write_Text(event) {
//This will prevent Default Behaviour
event.preventDefault();

let x = document.forms["dp5"]["No"].value;

if (x === "false") {
    document.getElementById("text").disabled=true;
    document.getElementById("text").value="";
} else {
    document.getElementById("text").disabled =false;
}

// then submit using JS
}

posted this

Have an answer?

JD

Please login first before posting an answer.