javascript function not called on buttonclick

Question

<!DOCTYPE html>
    <html>
    <head>
        <title>Login page</title>
    </head>
    <body style="background-color:red;">
        I was just thinking that I could do us a private lil webpage ^^
    I love you so much hun! <3

        <form name="Wish">
            Wish<input type="text" name="wish"/>
            <input type="submit" class="button" onclick="sendtoajax(this.form)" />
            <input type="reset" value="Cancel"/>
        </form>

<script language="javascript">

function sendtoajax(form){
var xmlhttp;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
alert('done')
 }
}

xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("form.wish.value");
}

</script>


    </body>
</html>

I want to execute the function on button click and if I just leave it plain so it executes immidiatelly it work but when I put it into a function and I call it on button click it doesnt at all...

my guess is, that the native html-form gets submitted _before_ the js-function gets fired. Try changing `input submit` to a simple `button`, that doesn't send the form. — Jeff, Dec 09 '15 at 10:15

score 1 · Answer 1 · answered Dec 09 '15 at 10:15

1

Change type="button" of input. If input has type="submit" it submits the form and hence your function will not be called.

<input type="button" class="button" onclick="sendtoajax(this.form)" />

answered Dec 09 '15 at 10:15

Mairaj Ahmad

14,434
2
26
40

Well Ill be damned :D It worked right away! Thanks guys, working with php, javascript and such first day so this thing was invisible to me... THANKS SO MUCH for such an early response! – Andrej Jaššo Dec 09 '15 at 10:18

score 0 · Answer 2 · answered Dec 09 '15 at 10:22

<!DOCTYPE html>
    <html>
    <head>
        <title>Login page</title>
        <script language="javascript">
            function sendtoajax(){
                var xmlhttp=window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
                xmlhttp.onreadystatechange=function(){
                    if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        alert('done')
                    }
                }
                xmlhttp.open("POST","ajax.php",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send( 'wish='+document.querySelectorAll('input[name="wish"]')[0].value );
            }
        </script>
    </head>
    <body style="background-color:red;">
        I was just thinking that I could do us a private lil webpage ^^ I love you so much hun! <3

        <form name='Wish'>
            <label>Wish<input type="text" name="wish" /></label>
            <input type="button" class="button" value='Wish now' onclick="sendtoajax()" />
            <input type="reset" value="Cancel"/>
        </form>
    </body>
</html>

score 0 · Answer 3 · answered Dec 09 '15 at 10:24

In your code, the <form> submits and redirects. AJAX forms are not meant to redirect. Either give return false; like this:

<input type="submit" class="button" onclick="sendtoajax(this.form); return false;" />

Or give an event.preventDefault() in your AJAX code:

function sendtoajax(form) {
  //----
  //----
  //----
  return false;
}

If you can do with jQuery, it is very easy. Lemme take the same code of yours, and convert it to jQuery in a simple way and explain you:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <title>Login page</title>
  </head>
  <body style="background-color: red;">
    I was just thinking that I could do us a private lil webpage ^^
    I love you so much hun! &lt;3

    <form name="Wish" id="Wish">
      Wish <input type="text" name="wish" />
      <input type="submit" class="button" />
      <input type="reset" value="Cancel"/>
    </form>

    <script language="javascript">
      $(function () {
        $("#Wish").submit(function () {
          $.post("ajax.php", $(this).serialize(), function () {
            alert("Submitted");
          });
        });
      });
    </script>

  </body>
</html>

javascript function not called on buttonclick

3 Answers3