Make button onclick call a function instead of form action

Question

I have written a JavaScript function to be called by my button.onclick() event, but the function is not called. Instead, my form action is performed.

HTML:

<form id = "Documents" action="Uploaded.php">
<input type="submit" id="Remove1" name="Remove[1]" value="Remove first" onclick="return Remove('Remove1');">
<input type="submit" id="Remove2" name="Remove[2]" value="Remove second" onclick=" return Remove('Remove2');">
</form>

Updated JavaScript:

function Remove(currentDoc)
{
if (window.XMLHttpRequest)
      {
  xmlhttp=new XMLHttpRequest();
  }
else
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("Removemsg").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","functions/remove.php?Doc="+currentDoc,true);
xmlhttp.send();

    return false;
}

It calls uploaded.php rather than my remove.php. But I already defined my onclick function to call remove.php. Kindly advise.

Your JS is not valid: 3 `{` and 5 `}`. I think there is a problem... — Florent, Jul 12 '12 at 12:37

score 3 · Accepted Answer · 2012-07-12T13:08:38.803

3

add a return false; statement to function remove() for preventing form submission.

And also your onclick="Remove()" should be onclick="return Remove();"

Your JS code is also errorful

function Remove(currentDoc)
{
if (window.XMLHttpRequest)
  xmlhttp=new XMLHttpRequest();
else
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("Removemsg").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","functions/remove.php?Doc="+currentDoc,true);
xmlhttp.send();

    return false;
}

edited Jul 12 '12 at 13:08

answered Jul 12 '12 at 12:34

If you mean adding a `return false` at the end of Remove() function body, it is not correct. Plus this, the event handler should change in this way: `onclick="return Remove('Remove1')"` – Alireza Mirian Jul 12 '12 at 12:56
added but still it auto download uploaded.php rather than calling out remove. – JLearner Jul 12 '12 at 13:03
my braces is abit messy, so sorry. it works but the Removemsg doesnt response out. It should be – JLearner Jul 12 '12 at 13:20

score 1 · Answer 2 · answered Jul 12 '12 at 12:35

Since this is a submit button it will by default submit the form to the url in the action attribute.

In order to prevent it you need to return false at the end of your function:

function Remove(currentDoc)
{
if (window.XMLHttpRequest)
  xmlhttp=new XMLHttpRequest();
  }
else
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("Removemsg").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","functions/remove.php?Doc="+currentDoc,true);
xmlhttp.send();

return false;
}

it doesn't work because it is like this: `onclick="false"` but the correct is: `onclick="return false"` — Alireza Mirian, Jul 12 '12 at 13:05

score 1 · Answer 3 · answered Jul 12 '12 at 12:37

1

Use <input type="button" /> instead of <input type="submit" /> to prevent form submittion

answered Jul 12 '12 at 12:37

yogi

19,175
13
62
92

Are you having a valid `HTML` I doubt on this `name="Remove[1]"`, usage of [] in name is not valid I guess. – yogi Jul 12 '12 at 12:46
even if i remove[1],it still doesn't call out. Strange :( – JLearner Jul 12 '12 at 12:50

score 1 · Answer 4 · answered Jul 12 '12 at 12:39

1

Instead of using <input type="submit" ... /> to generate a button, you could also use the <button> tag (MDN docu)

<button type="button" id="Remove1" name="Remove[1]" onclick="Remove('Remove1')">Remove first</button>

This will generate a button. Through setting type="button" you prevent the default (type="submit"), which would trigger the form to submit.

answered Jul 12 '12 at 12:39

Sirko

72,589
19
149
183

I already define something for my – JLearner Jul 12 '12 at 12:45
1

[` – Sirko Jul 12 '12 at 12:48

score 1 · Answer 5 · answered Jul 12 '12 at 12:45

1

when you click a submit button, it's quite natural that it submits the form. if you want to prevent this, you should return false at your event handler. note that returning false at the end of your remove function is not sufficient, you should write something like this:

<input type="submit" id="Remove1" name="Remove[1]" value="Remove first" onclick="return Remove('Remove1')">

and your remove function should return false. also notice that there is a semantic error in your ajax coding. you should set onReadyStateChange after calling open() function of xmlhttp object. visit here for more info

answered Jul 12 '12 at 12:45

Alireza Mirian

5,862
3
29
48

Tried but it doesnt call out my Remove function even though i have change t alert('this'); – JLearner Jul 12 '12 at 12:47
does it prevent form from submission? – Alireza Mirian Jul 12 '12 at 13:00
It should call your function as well. Maybe you have a javascript fatal error somewhere which causes the function to be *undefined*. try to debug and find out whether the function is defined properly and works or not. Replace the whole of function's body, with an `alert(1);` and check again. – Alireza Mirian Jul 12 '12 at 13:03
tried :( and also tried to debug crtl+shift+i for errors. But no errors given. – JLearner Jul 12 '12 at 13:06

score -3 · Answer 6 · edited Jul 13 '12 at 00:12

-3

If you are using JavaScript, then there is not need to use a <form>.

edited Jul 13 '12 at 00:12

Kijewski

25,517
12
101
143

answered Jul 12 '12 at 12:39

Mohd Imran

11
2

Your answer is not understandable! – fsenart Jul 12 '12 at 14:58

Make button onclick call a function instead of form action

6 Answers6