Submit form works fine in Firefox but not Safari

Question

I have added a Javascript code to my message system. This JS code adds a line of BBCode in the textarea when user clicks on the submit button.

The BBCode gets inserted fine in both Firefox and Safari. However, the message only goes through in Firefox. When posting with Safari, it does not go through to the database. I have only tested this with these two browsers, it is likely that it is broken with others.

Here is the code:

<!-- Start javascript code for message type -->
<script>
    var messageType = {
        General: "[b][green]General[/green]:[/b]",
        News: "[b][blue]News[/blue]:[/b]",
        Trend: "[b][orange]Trend[/orange]:[/b]",
        Help: "[b][red]Help[/red]:[/b]"
    };

    function submitForm(){
        msgSelText = messageType [document.getElementById('messageSelection').value]
        document.getElementById('wpam_nm_text').value = msgSelText + ' ' +document.getElementById('wpam_nm_text').value;
        document.getElementById('new_post_form').submit();
    }
</script>
<!-- End javascript code for message type -->

<form name="new_post" method="post" action="admin.php?page=wp-admin-microblog/wp-admin-microblog.php" id="new_post_form">
    <table class="widefat">
        <thead>

        <tr>
            <td>
                <div id="postdiv" class="postarea" style="display:block;">
                    <textarea name="wpam_nm_text" id="wpam_nm_text" style="width:100%;" rows="4"></textarea>
                </div>
                Type of message:
                <select id="messageSelection">
                    <option>General</option>
                    <option>News</option>
                    <option>Trend</option>
                    <option>Help</option>
                </select>

                <p style="text-align:right; float:right;"><input name="send" type="submit" class="button-primary" value="<?php _e('Send', 'wp_admin_blog'); ?>" onclick="submitForm()" />
            </td>
        </tr>
        </thead>
    </table>
</form>

I removed the Javascript code and the form worked fine in Safari. This means that somehow, the JS code is making it not function - why ? And how do I fix it ?

Answer 1

In Safari, I'm getting a Reference Error when I run this Fiddle: http://jsfiddle.net/esCPN/1/

If you are going to use onclick to trigger javascript evens (which you shouldn't) then you should use the javascript: syntax.

<input name="send" type="submit" class="button-primary" value="Send"
    onclick="javascript:submitForm()" />

This will stop any Reference Errors that Safari is throwing.

Answer 2

I solved the god forsaken thing by completely rewriting the javascript code, now works fine in both browsers. I have no idea what was wrong with the original approach, not entirely impossible that it was a browser bug.

Here is the new approach:

<!-- Start javascript code for message type -->
<script type="text/javascript">
function setText(){
  var messageType = document.getElementById('messageType');
   var feed = document.getElementById('feed');
    feed.value= messageType.value + " "  +
    feed.value;
    }
</script>
<!-- End javascript code for message type -->

<form name="new_post" method="post" action="admin.php?page=wp-admin-microblog/wp-admin-microblog.php" id="new_post_form">
    <table class="widefat">
        <thead>
        <tr>
            <th><?php _e('Your Message', 'wp_admin_blog');?><a name="newpost"></a></th>
        </tr>
        <tr>
            <td>
                <div id="postdiv" class="postarea" style="display:block;">
                    <textarea name="wpam_nm_text" id="feed" style="width:100%;" rows="4"></textarea>
                </div>
                Type of message:

                 <select id="messageType" style="width:100px; height:20px; text-align:center;">
                     <option value="[b][green]General[/green]:[/b]">General</option>
                     <option value="[b][blue]News[/blue]:[/b]">News</option>
                     <option value="[b][orange]Trend[/orange]:[/b]">Trend</option>
                     <option value="[b][red]Help[/red]:[/b]">Help</option>
                </select>

                <p style="text-align:right; float:right;"><input name="send" type="submit" class="button-primary" value="<?php _e('Send', 'wp_admin_blog'); ?>" onclick="javascript:setText()" /></p>

            </td>
        </tr>
        </thead>
    </table>
</form>