javascript function not called on buttonclick [duplicate]

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
– Jeff, Commented Dec 9, 2015 at 10:15

Mairaj Ahmad · Accepted Answer · 2015-12-09 10:15:41Z

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 9, 2015 at 10:15

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrej Jaššo Over a year ago

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!

Professor Abronsius · Accepted Answer · 2015-12-09 10:22:20Z

<!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>

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-09 10:24:18Z

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>

Collectives™ on Stack Overflow

javascript function not called on buttonclick [duplicate]

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related