提交表单在Firefox中运行正常但不适用于Safari

时间:2012-10-16 18:35:10

标签: javascript forms wordpress firefox safari

我在我的留言系统中添加了一个Javascript代码。当用户点击提交按钮时,这个JS代码在textarea中添加了一行BBCode。

BBCode可以在Firefox和Safari中正常插入。但是,该消息仅在Firefox中传递。使用Safari发布时,它不会进入数据库。我只用这两种浏览器对它进行了测试,很可能会被其他浏览器破坏。

以下是代码:

<!-- 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>

我删除了Javascript代码,表单在Safari中运行正常。这意味着不知何故,JS代码使其无法正常运行 - 为什么我该如何解决?

2 个答案:

答案 0 :(得分:1)

在Safari中,当我运行此小提琴时,我收到参考错误:http://jsfiddle.net/esCPN/1/

如果您要使用onclick来触发javascript evens(您不应该这样做),那么您应该使用javascript:语法。

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

这将停止Safari正在抛出的任何参考错误。

答案 1 :(得分:1)

我通过完全重写javascript代码解决了上帝遗弃的事情,现在在两种浏览器中都能正常工作。我不知道原始方法有什么问题,并非完全不可能是浏览器错误。

以下是新方法:

<!-- 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>