<script> document.write button no show, but <noscript> button yes?

[we5inelgr]

Hi all,

I'm running into two issues with this code:

<form action="https://somesite.net">
<input type="hidden" name="var1" value="val1">
<textarea name='txtArea1"></textarea>

<script type="text/javascript">
<!--
document.write('<input type='button' value='Send Message Script' onClick='window.open('https://somesite.net', 'Windows', 'width=650, height=350, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no');return false'>');
-->
</script>

<noscript><input type="submit" value="Send Message NO Script"></noscript>

</form>

Note: The button "values" are just for testing purposes right now.

1. I'm trying to get two different submit buttons to show up, independently, depending upon <script> and <noscript>. Mainly, I want the new window opened as described, but of course want to provide an alternative for users without javascript on and thus the need (I think) for the document.write version within the <script> tags.

Using I.E. 9, when I turn off javascript, I can see the "Send NO Script" button.

When I turn javascript on, I do not see the "Send Message Script" button. I've tried the script code with and without the <!-- --> declarations. Same result. The button doesn't show.

Ideas why?

Also,

2. When I click the "Send Message NO Script" button (when js is turned off), the form does submit to the url indicated, however, the inputs on the form show up in the URI portion, hidden field as well as the textarea.

Why would that occur?

[edited by: phranque at 10:11 pm (utc) on Sep 25, 2013]
[edit reason] fix sidescroll [/edit]

[Fotiman]

Ideas why?

Your document.write statement is malformed... you used single quotes for all of the attribute values as well as surrounding the entire string.
Also:
1. The type attribute is not needed, so omit it unless you require it for validating as HTML4 or XHTML.
2. Don't wrap the contents of script tags in HTML comments. It's an obsolete practice, as that was only needed for version 1 Netscape and Mosaic browsers (hasn't been needed for over a decade).
3. Ideally, you should avoid using document.write in favor of using DOM methods to write to your document.
4. Ideally, you should avoid inline event handlers because it mixes content with behavior (best to put script in a separate .js file). Also, instead of onClick, you're better to use onclick as it's more portable (XHTML requires all lowercase attributes).
5. For accessibility and usability reasons, it's generally a bad idea to open new windows without toobar/menubar.
With all that said, here's the minimum changes I would make to your code:

<script>
document.write('<input type="button" value="Send Message Script" onclick="window.open(\"https://somesite.net\",\"Windows\",\"width=650,height=350,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,directories=no,status=no\");return false;">');
</script>

[edited by: Fotiman at 8:07 pm (utc) on Sep 25, 2013]

[Fotiman]

the inputs on the form show up in the URI portion

You haven't specified a method attribute on the form element, so it defaults to GET, which submits the form fields in the URI to the form action. It doesn't matter the input type (hidden or not), ALL of the form elements will be sent.

If you don't want them to be sent in the URI, the alternative is to send it as a POST request, though you generally handle POST requests slighly different on the server side than GET requests.

[we5inelgr]

Wow. Many thanks for all of your suggestions and input. I really do appreciate your insight and professionalism!

Once I get this cleaned up after testing, I will place the js code in a separate file (and test again, of course).

[And, I can't believe I forgot to put the form's method. geez. :( ]