Problem with innerHTML and Javascript and Ajax in IE

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

Subscribe Post Reply

1553

Atli

5,058

Expert 4TB

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

<button onclick="javascript: display();">Click me</button>

Sep 17 '08 #2

harikumarmpl

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

<button onclick="javascript: display();">Click me</button>

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

5,058

Expert 4TB

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

harikumarmpl

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

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

16,027

Expert Mod 8TB

For a start, you're calling displaySearchResults() instead of displayResults().

PS. please use code tags when posting code.

Sep 18 '08 #6

by: tcole6 | last post by:

My problem appears to be Firefox specific. I have a hyperlink that loads a new window. This window contains hyperlinks that call javascript functions in the parent window and then closes the...

Javascript

innerHTML Javascript Issues. can anyone help?

by: Pratik Patel | last post by:

Hello, I used innerHTML to assign HTML content. but in my HTML page content have also some javascript function and it will run when page load. bu when HTML code assgin thru innerHTML then this...

Javascript

problem in using ajax function

by: shivendravikramsingh | last post by:

hi friends, i m using a ajax function for retrieving some values from a database table,and display the values in required field,my prob is that the ajax function i m using is working f9 once,but if...

Javascript

Nested AJAX Calls Problem

by: dhsieh | last post by:

I am trying out nested AJAX calls for the first time, but I seem to have hit a snag. The code snippet is the outer AJAX call and a function, it gathers information about a company. As we get towards...

Javascript

Problem with latin characters when sending a form content with AJAX

by: xNephilimx | last post by:

lHi guys! I'm having a little problem that's getting on my nerves, I couldn't find a solution, I also tryed googling it and I found nothing... (my field of expertise is in AS 2 and 3, but I still...

Javascript

ajax loading problem

by: sasiphyd | last post by:

I have used an ajax file furnaces.html with code as below.The file furnacedata.php is used to generate XML dynamically and this appears to working well. timerID is used to reload the XML data at...

Javascript

Javascript into Ajax context... Unusual problem, no eval() issues

by: wenijah | last post by:

Hi everyone! First thank you for reading this post and yes, you probably already see that kind of topic title somewhere but the problem I've got today might be different than the 100 topics I've...

Javascript

AJAX IE7 Problem

by: RaefKandeel | last post by:

Hi all, this is my first post. I have a little ajax assignment that works fine on mozilla firefox 2.0, but doesn't work at all on Internet Explorer 7. Apparently it has to do with the line where...

Javascript

Problem with a carousel

by: raknin | last post by:

Hi I have a carousel script. I want to load the carousel with a new set of pictures every time I press a button. The problem that I have that the script append the new pictures to the olds one...

Javascript

prototype tooltip problem

by: omerbutt | last post by:

hi there i have downloaded a prototype tooltip from http://www.nickstakenburg.com/projects/prototip/ the logic it uses is to call the script after creating the <div> for example i am using the...

Javascript

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem with innerHTML and Javascript and Ajax in IE

Similar topics