Flummoxed by a button! - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Flummoxed by a button!

javascript why are behaviors !same for "<button onClick" vs <input onClick

supergrover

12:55 pm on May 20, 2010 (gmt 0)

10+ Year Member

I'm no expert at javascripting and leave the pretty stuff up to the people who do that thing...
however, I'm trying to build a small db updating file and was taking care of some of the front end coding for someone who is primarily a DreamWeaver person who isn't able to dive into code and take care of some things.

So, I've been trying to debug why a Button kept receiving error responses from a PHP page when other buttons weren't.

When I changed it from <button> to <input type="Button">... it worked fine. I don't understand what the significance is.

Here are the two lines of text EXACTLY as they appear in the code.
==============

<input type="Button" value="Submit" onClick="javascript:ButtonClick2();"/>
<button onClick="javascript:ButtonClick2();">Submit</button>

==============

They both call the exact same routine. There is no call back to determine which object was calling the ButtonClick2 routine (not that I would know how to do that in javascripting...). Other than the control type, I see nothing that is different and certainly nothing that would obviously cause the php call to fail.

Anyone?

-steve

Fotiman

2:23 pm on May 20, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Without seeing what ButtonClick2 is doing, it's hard to say why you would be getting an error. I just put together a very simple test case and it works as expected:

<html>
<head>
</head>
<body>
<input type="Button" value="Submit" onClick="javascript:ButtonClick2();"/> 
<button onClick="javascript:ButtonClick2();">Submit</button>
<script>
function ButtonClick2() {
  alert('This was a triumph.');
}
</script>
</body>
</html>

Note, it appears that you may be using XHTML (your input has a closing /). So you should use "onclick" instead of "onClick" (good practice even if you're not using XHTML). Also, get rid of the "javascript:" portion:

onclick="ButtonClick2();"

daveVk

2:29 pm on May 20, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

<button value="Submit" onclick="ButtonClick2();">Submit</button>

value attribute possibly needed.

javascript: never needed.

supergrover

2:58 pm on May 20, 2010 (gmt 0)

10+ Year Member

Fotiman:
<i>Without seeing what ButtonClick2 is doing, it's hard to say why you would be getting an error.</i>

It's a call to a quick validation routine and then a call to a server side PHP script. The alerts that I was putting in worked, just with the <button> I would get a failure in the PHP call instead of success.

Since the call to ButtonClick2 was successful, I didn't think it's content actually mattered. Again, I don't have complete expertise in the area so I can't profess with any certainty.

supergrover

3:06 pm on May 20, 2010 (gmt 0)

10+ Year Member

Changed to:

<input type="Button" value="Submit" onclick="ButtonClick2();"></input>
<button value="Submit" onclick="ButtonClick2();">Submit</button>

same result.

Other code:

var sql="";
var validationMessage = "";
var http_request = false;
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}

http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}

function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
result = http_request.responseText;
document.getElementById('dd').innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
}
function post(){
alert("in post()");
var poststr="";
poststr='filter=BriefTitle="5"';
makePOSTRequest('ExecuteSQL.php', poststr);
}

function ButtonClick(){
alert("Buttonclick");
//validation code will be here
post(document.form1);
}

Fotiman

4:05 pm on May 20, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

In that code, it looks like the function is ButtonClick, not ButtonClick2.

Here's what I would suggest. Use Fiddler to inspect the request and response that is being sent to the server for each case. Perhaps there is something unexpected that is being sent and it makes sense to start looking where the error is actually occurring and working back from there.

supergrover

1:17 am on May 21, 2010 (gmt 0)

10+ Year Member

Darn, I copied the wrong ButtonClick.
They are identical (I had the ButtonClick2 with all the extra code in it which I pared back and removed).
Even though, both buttons call the same routine with the same lack of parameters, which is why I'm puzzled.

I'm not sweating it too much, since just changing it to input instead of Button works fine and changes nothing for the user.

Appreciate the input, just thought maybe there was a quick answer to it. Again, appreciated!

Fotiman

3:40 am on May 21, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Well, if you do end up trying to figure it out, please be sure to post your findings here. I'd be interested to know what is causing the problem.