/    Sign up×
Community /Pin to ProfileBookmark

Somebody Be So Kind

In the following code:

[code=html]
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Button Size and Submit Test</title>

<style type=”text/css”>
.btn {
background:yellow;
width:10em;
}
.btnB {
background:blue;
color:white;
width:10em;
display:block;
}
</style>

</head>
<body>
<h1 align=”center”>Button Size &amp; Submit Test</h1>

<form onsubmit=”return false”>
<!– Above is fix to prevent auto-submit if not IE browser –>

<!– form –>
<!– Above causes NS to RESET form back to original conditions –>

<!– substitute DIV for FORM here !!! DOES NOT WORK WITHOUT FORM TAG –>
<!– DIV –>

<table border=1>
<tr>

<td>
<input type=”text” name=”total1″ value=”0″ size=”5″><br />
<button name=”Add1″ onclick=”total1.value++”>Addition</button><br />
<button name=”Sub1″ onclick=”total1.value–“>Subtraction</button>
</td>

<td>
<input type=”text” name=”total2″ value=”0″ size=”5″><br />
<input type=”button” name=”Add2″ value=”Addition” onclick=”total2.value++”><br />
<input type=”button” name=”Sub2″ value=”Subtraction” onclick=”total2.value–“>
<!–
trying to make buttons the same width SIZE
adding size=”20″ to INPUT or BUTTON statements above has no effect!>
–>
</td>

<td>
<input type=”text” name=”total3″ value=”0″ size=”5″><br />
<button class=”btn” name=”Add3″ onclick=”total3.value++”>Addition</button><br />
<button class=”btn” name=”Sub3″ onclick=”total3.value–“>Subtraction</button>
</td>

<td>
<input type=”text” name=”total4″ value=”0″ size=”5″><br />
<button class=”btnB” name=”Add4″ onclick=”total4.value++”>Addition</button>
<button class=”btnB” name=”Sub4″ onclick=”total4.value–“>Subtraction</button>
</td>

</tr>
</table>
</form>
<!– /DIV –>

<!– Why does form not RESET with REFRESH in IE ??? Does OK in NS –>
</body>
</html>
[/code]

would [B]someone be so kind[/B] to answer my questions and confirm or correct my assumptions about the actions and display of this script. The code is provided only to explain my questions and is not intended to perform any important functions … just improve my understanding. 😮

Questions and assumptions about above code in different browsers:

  • 1.

    Non-IE browsers seem to reset page if “onsubmit=return false” is not included in <form> tag. Does not seem to matter with IE. Correct?

  • 2.

    <form> tag cannot be replaced by <div> tag and expect actions to remain the same. Correct?

  • 3.

    You cannot control the size (width) of a BUTTON without using using CSS. Correct?

  • 4.

    Is ‘display:block’ a correct method to force vertical (vs horizontal) button display in ‘.btnB’ CSS?

  • 5.

    Why does NS reset page with F5 (refresh) but IE does not? What is different here when changes have been made to text box?

  • I hoping I have posted this to the correct forum.

    I realize it contains a smidgen of HTML, Javascript, CSS and browser specific questions.
    If not posted to proper forum, perhaps the moderators can re-direct my questions to the proper area.

    Thanks in advance for any full or partial responses. ?

    to post a comment
    JavaScript

    6 Comments(s)

    Copy linkTweet thisAlerts:
    @phpnoviceJun 22.2006 — Questions and assumptions about above code in different browsers:

  • 1. Non-IE browsers seem to reset page if "onsubmit=return false" is not included in <form> tag. Does not seem to matter with IE. Correct?


  • 2. <form> tag cannot be replaced by <div> tag and expect actions to remain the same. Correct?


  • 3. You cannot control the size (width) of a BUTTON without using using CSS. Correct?


  • 4. Is 'display:block' a correct method to force vertical (vs horizontal) button display in '.btnB' CSS?


  • 5. Why does NS reset page with F5 (refresh) but IE does not? What is different here when changes have been made to text box?
  • [/QUOTE]

    [list=1]
  • [*]Not correct. IE will also reset the form fields if the form is submitted to itself.

  • [*]Correct. Without the FORM tag, you can no longer reference the input fields via dot-type object references -- because the form object does not exist. Thus, you must change to using [b]id[/b] attributes and the [b]getElementById[/b] method.

  • [*]Not strictly true. The content will change the width, too. ?

  • [*]Sounds good -- but, maybe, too good to be true in all cases.

  • [*]True. F5 is supposed to be a re-fetch from the server and ignoring cache. IE, however, sometimes leaves some user changes to form fields intact. I've never investigated far enogh to pin down exactly what IE will and will not do in this case.
  • [/list]
    Copy linkTweet thisAlerts:
    @JMRKERauthorJun 22.2006 — Thanks for the input phpnovice, ?

    Are my questions #1 and #5 related? When I refresh with a) mouse click on [refresh] symbol with or without b) a press of the SHIFT key or c) the CTRL key, and d) with or without also using the F5 key, nothing happens with my IE browser (ie, textbox fields do not reset to zero). Is this something I can fix with more investigation of the CASCHE (spelling ? ) META function I have spotted occasionally in some other code?

    For #3, I was asking if it is possible to set the same button width regardless of the content, without using CSS. I thought perhaps I can set the button font to a mono-space character set, but I assume that intales adding "&nbsp;" characters to keep button size the same (?). Seems like a lot of un-necessary extra work for me. ?

    I'll try your suggestions for #2 just to see what happens! :rolleyes:

    I've never tried this method, so I don't know if there are any benefits ? or pitfalls. ?
    Copy linkTweet thisAlerts:
    @phpnoviceJun 22.2006 — Are my questions #1 and #5 related?[/QUOTE]
    I don't think so. One is a refresh (not a reset) and the other is a submit.
    Is this something I can fix with more investigation of the CASCHE (spelling ? ) META function I have spotted occasionally in some other code?[/QUOTE]
    I don't think so. That is just how IE behaves with user-entered data in some form fields (normally only selects, checkboxes, and radio buttons are affected by this mis-behavior).
    For #3, I was asking if it is possible to set the same button width regardless of the content, without using CSS.[/QUOTE]
    Why not just use CSS?
    Copy linkTweet thisAlerts:
    @JMRKERauthorJun 22.2006 — Thanks again.

    As for #3:

    Reason: Avoidance of something new to me.


    And just one more area for me to screw up. ?

    But I'll keep an open mind so long a my brains don't fall out! :eek:
    Copy linkTweet thisAlerts:
    @phpnoviceJun 22.2006 — Yep, just style the button:

    style="width:100px;"
    Copy linkTweet thisAlerts:
    @JMRKERauthorJun 22.2006 — Thanks ... pretty easy fix.
    ×

    Success!

    Help @JMRKER spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 4.29,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...