LinuxQuestions.org - question: 'onclick' within 'onmouseover' within 'form' within 'table'

- Programming (https://www.linuxquestions.org/questions/programming-9/)

- - question: 'onclick' within 'onmouseover' within 'form' within 'table' - how is it possible? (https://www.linuxquestions.org/questions/programming-9/question-%27onclick%27-within-%27onmouseover%27-within-%27form%27-within-%27table%27-how-is-it-possible-4175604487/)

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.

Quote:

Originally Posted by rblampain (Post 5701342)

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 (Post 5701342)

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!

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?

Quote:

Originally Posted by ondoho (Post 5701802)

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).

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

"OnClick" within(?!?!) "MouseOver?" Can't happen! Events are fired only one at a time.