LinuxQuestions.org
Latest LQ Deal: Latest LQ Deals
Home Forums Tutorials Articles Register
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 04-24-2017, 01:32 AM   #1
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 11
Posts: 1,288

Rep: Reputation: 52
question: 'onclick' within 'onmouseover' within 'form' within 'table' - how is it possible?


I have the HTML4 code below that renders, displays and links as wanted (Epiphany and Iceweasel) with one exception but I need more which I can't work out due to my insufficient experience. The exception is that the </form> tag creates a space between consecutive FORMS, how can I avoid that?
Code:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
<form method="post" action="cgi-bin/Changeit"><div><span class="maintext">1	<a href="#Text to be evaluated.">Text to be evaluated.	</a><a href="#t0001" name="t0001" onclick="toggle_visibility('n0001');"><font size = "1" color = "#FF33FF">change it?</font></a></span><div id="n0001" style = display:none;><font size = "1" color = "#FF33FF">Last Evaluation:	</font>Whatever it was.<br><textarea class="texareas" placeholder="Click 'change it?' to exit this text area. Greetings and thankyou." name="3456" rows="1" cols="120"></textarea><br><font size = "1" color = "#FF33FF">Enter the new evaluation in the box above: </font><input type="submit" value="Submit"></div></div><input type="hidden" name="directory" value="whateverdir"><input type="hidden" name="file" value="whateverfile"><input type="hidden" name="line" value="99"><input type="hidden" name="oldstring" value="Text to be evaluated."></form>
W3C could find errors in the HTML code above which gave problems with css file and I cannot check - waiting for an Internet connection from the telco.
It displays this result (ignoring fonts and colors effect):
Quote:
1 Text to be evaluated. Change it?
Which converts on onclick on 'Change it?' to:
Quote:
1 Text to be evaluated. Change it?
Last evaluation. Whatever it was.
textarea box including placeholder
Enter the new evaluation in the box above:
I also need the string "Change it?" (which is only an option) to only display by a "onmouseover" event over the string "Text to be evaluated." (Clicking on it will link to the other part of the page) and I need the number "1" before this string to line up as in a <table><tr><td> with value up to 99 in other <form></form> for each string to be evaluated.
Put in another way, what I need to add (html css javascript) is the effect of invalid code like this if it was working:
Code:
<table>
<form 1>formcode<tr><td>1</td></tr>formcode</form 1>
<form 2>formcode<tr><td>2</td></tr>formcode</form 2>
<form 99>formcode<tr><td>99</td></tr>formcode</form 99>
</table>
Thank you for your help.
 
Old 04-25-2017, 12:06 AM   #2
astrogeek
Moderator
 
Registered: Oct 2008
Distribution: Slackware [64]-X.{0|1|2|37|-current} ::12<=X<=15, FreeBSD_12{.0|.1}
Posts: 6,263
Blog Entries: 24

Rep: Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194
Quote:
Originally Posted by rblampain View Post
I have the HTML4 code below that renders, displays and links as wanted (Epiphany and Iceweasel) with one exception but I need more which I can't work out due to my insufficient experience. The exception is that the </form> tag creates a space between consecutive FORMS, how can I avoid that?
Code:
function toggle_visibility(id) {        
        var e = document.getElementById(id);
        if(e.style.display == 'none')
                e.style.display = 'block';
        else
                e.style.display = 'none';
        }
<form method="post" action="cgi-bin/Changeit">
 <div>
  <span class="maintext">1
   <a href="#Text to be evaluated.">Text to be evaluated.       </a>
   <a href="#t0001" name="t0001" onclick="toggle_visibility('n0001');">
    <font size="1" color="#FF33FF">change it?</font>
   </a>
  </span>
  <div id="n0001" style= display:none;>
   <font size="1" color="#FF33FF">Last Evaluation:      </font>
Whatever it was.
   <br>
    <textarea class="texareas"         
        placeholder="Click 'change it?' to exit this text area. Greetings and thankyou."
        name="3456" rows="1" cols="120"></textarea>
    <br>
     <font size="1" color="#FF33FF">Enter the new evaluation in the box above: </font>
     <input type="submit" value="Submit"></div>
    </div>
    <input type="hidden" name="directory" value="whateverdir">
     <input type="hidden" name="file" value="whateverfile">
      <input type="hidden" name="line" value="99">
       <input type="hidden" name="oldstring" value="Text to be evaluated."></form>
W3C could find errors in the HTML code above which gave problems with css file and I cannot check - waiting for an Internet connection from the telco.
Referring to the hilighted lines above in the better formatted code:

Changing the display attribute on the forms to 'block' results in space between them. Change that to 'inline' and/or define some CSS rules for form elements which set the desired spacing.

An HTML/CSS validator will likely complain about the unclosed input elements. Change <input ...> to <input ... /> to silence those.

Also the break elements, <br> should be <br />.

And get rid of the always evil <font ...> elements! Replace those with <p> or something else, and use CSS rules to set the color and other font attributes. The validator will likely complain loudly about those!

Quote:
Originally Posted by rblampain View Post
I also need the string "Change it?" (which is only an option) to only display by a "onmouseover" event over the string "Text to be evaluated." (Clicking on it will link to the other part of the page) and I need the number "1" before this string to line up as in a <table><tr><td> with value up to 99 in other <form></form> for each string to be evaluated.
Put in another way, what I need to add (html css javascript) is the effect of invalid code like this if it was working:
Code:
<table>
<form 1>formcode<tr><td>1</td></tr>formcode</form 1>
<form 2>formcode<tr><td>2</td></tr>formcode</form 2>
<form 99>formcode<tr><td>99</td></tr>formcode</form 99>
</table>
Use CSS rules to control the mouse-over visibility of the "Change it" text.

And you rightly described the example <table> code as invlaid... you cannot nest <tr>, <td> elements inside the form elements and text. That is badly broken.

If you use a table for formatting, then <tr> should be a child of <table> and <td> should be a child of <tr>, and everything else must be inside the <td>'s. So your table structure would be something like this...

Code:
<table>
<tr><td>1</td><td><form>formcode 1</form></td></tr>
<tr><td>2</td><td><form>formcode 2</form></td></tr>
...
</table>
And as mentioned above, set display:inline attribute for the <form> elements and define a few simple CSS rules to control padding, margins and alignment of the table cells and nested form elements.

With 100 forms nested in the table along with visible identifiers and javascript rules to control their visibility, you would be well served to generate that HTML with a scripting language such as PHP rather than hard-coding it into a page.

I would suggest searching sources such as W3Schools and the many online tutorials for web design and scripting methods. It really is not difficult once you catch on to it, but it is complex enough that you will need to understand the basics yourself in order to really benefit from the help of others.

Hope this helps!

Last edited by astrogeek; 04-25-2017 at 12:41 AM. Reason: Added table structure example
 
1 members found this post helpful.
Old 04-25-2017, 01:06 AM   #3
ondoho
LQ Addict
 
Registered: Dec 2013
Posts: 19,872
Blog Entries: 12

Rep: Reputation: 6053Reputation: 6053Reputation: 6053Reputation: 6053Reputation: 6053Reputation: 6053Reputation: 6053Reputation: 6053Reputation: 6053Reputation: 6053Reputation: 6053
i just have an aside question:
op defines this as html4 - but i'm pretty sure i'm seeing javascript at the top there, no? - so by definition it is not (pure) html, not html4 or anything else? or does the "html4 specification" include usage of javascript?
 
1 members found this post helpful.
Old 04-25-2017, 01:27 AM   #4
astrogeek
Moderator
 
Registered: Oct 2008
Distribution: Slackware [64]-X.{0|1|2|37|-current} ::12<=X<=15, FreeBSD_12{.0|.1}
Posts: 6,263
Blog Entries: 24

Rep: Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194Reputation: 4194
Quote:
Originally Posted by ondoho View Post
i just have an aside question:
op defines this as html4 - but i'm pretty sure i'm seeing javascript at the top there, no? - so by definition it is not (pure) html, not html4 or anything else? or does the "html4 specification" include usage of javascript?
I don't think HTML version is really relevant based on the example markup and script posted, especially as the markup is arguably not strictly valid HTML anyway. I suspect the OP included the version because that is in whatever guide they are using, or was a validator option, and they thought it might be important.

But that is a very good question - did HTML4 actually say anything about javascript? So I looked, and from the W3C HTML4 specification...

Quote:
Abstract

This specification defines the HyperText Markup Language (HTML), the publishing language of the World Wide Web. This
specification defines HTML 4.01, which is a subversion of HTML 4. In addition to the text, multimedia, and hyperlink
features of the previous versions of HTML (HTML 3.2 [HTML32] and HTML 2.0 [RFC1866]), HTML 4 supports more multimedia
options, scripting languages, style sheets, better printing facilities, and documents that are more accessible to users
with disabilities.
So it does mention scripting languages and style sheets, and mentions javascript in the body of the spec, although it does not single out javascript in the way HTML5 does.

But as I said, I do not think strict HTML version has much relevance to this question (although the OP may care to comment if that is not correct).

Last edited by astrogeek; 04-25-2017 at 01:33 AM. Reason: HTML4 does mention javascript in the docs
 
3 members found this post helpful.
Old 04-25-2017, 08:49 PM   #5
sundialsvcs
LQ Guru
 
Registered: Feb 2004
Location: SE Tennessee, USA
Distribution: Gentoo, LFS
Posts: 10,659
Blog Entries: 4

Rep: Reputation: 3940Reputation: 3940Reputation: 3940Reputation: 3940Reputation: 3940Reputation: 3940Reputation: 3940Reputation: 3940Reputation: 3940Reputation: 3940Reputation: 3940
Frankly, I stopped-cold with the title of this post:

"OnClick" within(?!?!) "MouseOver?" Can't happen! Events are fired only one at a time.
 
1 members found this post helpful.
  


Reply



Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] MySQL run SELECT on a table if column A form table 1 equals column A from table 2 robertjinx Linux - Software 1 01-15-2016 10:48 AM
How can I disable onClick of onMouseOver/Out rblampain Programming 6 06-30-2015 03:36 AM
HTML, form input onclick does not work mdooligan Programming 3 03-20-2015 11:05 AM
onMouseOver question rblampain Programming 3 01-06-2011 07:11 AM
onMouseOver/onMouseOut question rblampain Programming 2 02-28-2008 07:09 AM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 05:58 AM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration