?
Solved

Dynamically change text of a DIV  element on form submit

Posted on 2007-07-26
7
Medium Priority
?
3,960 Views
Last Modified: 2013-11-19
I have a DIV element with some text in it in a html form. Once I submit the form I want to change the text in it to something else (probably using DHTML). How can I do it?  

Here is my div element and I want to change "search for results" to  "displaying results" once the page gets submitted.
<html:form>
...
...
  <div id="elem" style="position:relative;top:30%;left:28%;display:<%=toggle%>">
    Searching for results........      
  </div>
...
</html:form>
0
Comment
Question by:subirc
  • 4
  • 2
7 Comments
 
LVL 58

Expert Comment

by:amit_g
ID: 19576202
Add an onclick handler in submit button...

<input type="submit" onclick="document.getElementById('elem').innerHTML='Whatever Text';return false;">
0
 
LVL 6

Expert Comment

by:gjutras
ID: 19576204
in head tag
<script language='javasciprt">
function dosomething()
{
document.Joe.Larry.innerHTML="something else";
}
</script>
<form id="Joe" name="Joe" action="dosomething" />
<div id="Larry" name="Larry">
Something
</div>
<input type=submit onclick="ChangeFirst()" >
</form>
0
 
LVL 6

Accepted Solution

by:
gjutras earned 200 total points
ID: 19576209
sorry try again

<script language='javasciprt">
function ChangeFirst()
{
document.Joe.Larry.innerHTML="something else";
return true;
}
</script>
<form id="Joe" name="Joe" action="dosomething" />
<div id="Larry" name="Larry">
Something
</div>
<input type=submit onclick="ChangeFirst()" >
</form>
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 6

Expert Comment

by:gjutras
ID: 19576224
amit_g's return false will keep the forms action from happening.  Use return false to keep the action from ahppening or return true to make the forms action happen.
0
 
LVL 58

Expert Comment

by:amit_g
ID: 19576227
Yes it should be return true.

<input type="submit" onclick="document.getElementById('elem').innerHTML='Whatever Text';return true;">
0
 
LVL 6

Expert Comment

by:gjutras
ID: 19576402
here's a whole file that works.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<SCRIPT LANGUAGE=javascript>
<!--
function ChangeFirst()
{
var elem = document.getElementById('Larry');
elem.innerHTML="something else";
return true;
}
//-->
</SCRIPT>


</head>
<body>
<form id="Joe" name="Joe" action="dosomething" />
<div id="Larry" name="Larry">
Something
</div>
<input type="submit" onclick="ChangeFirst()" >
</form></body>
</html>
0
 

Author Comment

by:subirc
ID: 19578010
Thanks!  I actually had more just a text in the div element.  I simplified it, when I stated the problem. But the solution you gave still worked. But the wrapped the text im my div in a label element and gave it an id.
<div>
...
<label id="xx1">searching for results....</label>
</div>

Now when I am submitting in javascript I am chaning the text displayed
var text = document.getElementById('xx1');
text.innerHTML = 'new text';

It is essentially the same as you proposed...........thx
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

592 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question