By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,400 Members | 1,335 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,400 IT Pros & Developers. It's quick & easy.

Problem with innerHTML and Javascript and Ajax in IE

P: 4
Hi to all

Here is the code i am trying for

[HTML]<html>
<head>
<title>XMLHttpRequest</title>

<script type="text/javascript">

function display(){


alert(document.getElementById("Content").innerHTML );

document.getElementById("Content").innerHTML = "Hello";
alert(document.getElementById("Content").innerHTML );}

</script>
</head>
<body>
<form name="something" onsubmit="javascript:display();">
<input type="submit" value="Click ME For Surprise" >
</form>

<div id="Content"></div>
</body>
</html>[/HTML]


in that one when i click on the submit button it is calling the function Start()
but after wards it is not displaying the content "hello" in the <div> tag
and for Some period until last alert is over the Message is displayed in the body of the page ,
after wards it is not visible can u please help me out on this...


And one more question if i have more than one submit button in a page the output will be displayed in div tags or not?


Any body Help me on these ..... plz....

With Regards
Hari Kumar
Sep 17 '08 #1
Share this Question
Share on Google+
5 Replies


Atli
Expert 5K+
P: 5,058
Hi.

The problem is that you are using a <form> to do this.
When you click the submit button, the onsubmit event is triggered, calling your function as it should, and the code is executed, changing the content of your <div>.

But once that is done, the the form is submitted, which will refresh the page.
Remember that forms are meant to pass data to other pages, not just to trigger JavaScript functions.

Try replacing the form with a simple button that triggers you function in the onclick event:
Expand|Select|Wrap|Line Numbers
  1. <button onclick="javascript: display();">Click me</button>
  2.  
Sep 17 '08 #2

P: 4
Hi.

The problem is that you are using a <form> to do this.
When you click the submit button, the onsubmit event is triggered, calling your function as it should, and the code is executed, changing the content of your <div>.

But once that is done, the the form is submitted, which will refresh the page.
Remember that forms are meant to pass data to other pages, not just to trigger JavaScript functions.

Try replacing the form with a simple button that triggers you function in the onclick event:
Expand|Select|Wrap|Line Numbers
  1. <button onclick="javascript: display();">Click me</button>
  2.  

Hi

Thanks for your reply

But my requirement is
I have a text field to search for an item in the database and if the user enters the
text and then he clicks the submit or go button

the results for the particular search must be displayed on the same page

i have all the business logic to display the results in another jsp page
for my requirement i must not refresh the complete page whenever the user submits his search

can u suggest me any idea

Thanks in Advance
Hari Kumar
Sep 17 '08 #3

Atli
Expert 5K+
P: 5,058
Ahh ok. So you want your JavaScript to fetch the content from the JSP page and display that in your DIV?

AJAX isn't that hard to learn. It's fairly simple, especially GET request.
POST Request are a bit more complex, but not very.

I recommend you check out the Ajax Example in our Howto section to see how to do that.
Sep 17 '08 #4

P: 4
Hi
I am applying the knowledge
Still even after the change also the same thing happening to me

here is the actual code

<%@ page contentType="text/html;charset=windows-1252"%>


[HTML]<html>
<head>
<script type="text/javascript" >
function getItemNumber(){
var ItemNumber = document.forms[0].ItemNumber.value;
alert(ItemNumber);
return ItemNumber;
}

function displayResults(url){
url+= getItemNumber();
sendRequest(url,"displayResultsDiv");
}

function getRequestObject() {
if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else if (window.XMLHttpRequest) {
return(new XMLHttpRequest());
} else {
return(null);
}
}

function sendRequest(address) {
var request = getRequestObject();

request.onreadystatechange = function() { handleResponse(request); };
request.open("GET", address, true);

request.send(null);
}
function handleResponse(request) {

alert(request.status+" ,"+request.readyState);
if ((request.readyState == 4) && (request.status == 200) ) {
alert("Inside readystate");
alert(request.responseText);

document.getElementById("displayResultsDiv").inner HTML ="<h1> Response is given</h1>";


}
}



</script>


<title>Price Book</title>

</head>
<body >


<table align="center" width="90%">
<tr><td>

<form name="pbSearch" id="pbSearch" onsubmit="displaySearchResults("HelloWorld.jsp");" >
<fieldset>
<legend>Search Criteria</legend>

<table cellspacing="2" cellpadding="1" border="0" width="40%" align="center">

<tr>
<td>Item Number</td>
<td><input type="text" name="ItemNumber" size="15"></td>
<td></td>
</tr>

<tr>
<td>Description</td>
<td><input type="text" name="ItemDescription" size="15"></td>
<td></td>
<td><input type="Reset" value="clear" style="width:50px;"></td>
<td><input type="submit" name="go" value="go" style="width:50px;" ></td>
</tr>


</table>
</form>
</fieldset>

<fieldset id="searchResultFieldSet">
<legend >Search Result</legend>

<table cellspacing="0" cellpadding="0" border="1" width="100%">
<tr>
<td width="25%"><center>Item Number</center></td>
<td width="65%"><center>Description</center></td>
<td width="10%"><center>Details</center></td>
</tr>

<div id="displayResultsDiv">
<!-- Here i Need Output -->
</div>


</table>

</fieldset>


</body>

</html>

[/HTML]
if you find any mistakes in this one plz... help me out because i need it

Thanks
Hari
Sep 17 '08 #5

acoder
Expert Mod 15k+
P: 16,027
For a start, you're calling displaySearchResults() instead of displayResults().

PS. please use code tags when posting code.
Sep 18 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.