草庐IT

javascript - 单击提交按钮两次以发布表单

coder 2025-01-17 原文

我在发布来自以下代码的用户输入时遇到问题。只有在提交按钮被点击两次后才会发布信息。请查看我的代码并告诉我是否需要更改任何内容。

<script>
function validate(form) {
    fail = validateName(form.name.value)
    fail += validateEmail(form.email.value)
    fail += validateCity(form.city.value)
    if (fail == "") {
        $(function () {
            $('#submitbtn').click(function (event) {
                event.preventDefault();
                var form = $(this).closest('form'),
                    action = form.attr('action');
                $.post(action, form.serialize(), function (data) {
                    $('#errors').html("You have been successfully subscribed to our newsletter.");
                })
            });
        });
    }
    else {
        document.getElementById('errors').innerHTML = fail;
    }
    return false
}
function validateName(field) {
    if (field == "") return "No name was entered.<br/>"
    else if (field.length < 3) return "Please enter a valid name.<br/>"
    else if (!/[a-zA-Z ]/.test(field)) return "Name can only have alphabetical characters.<br/>"
    return ""
}

function validateEmail(field) {
    if (field == "") return "No email was entered.<br/>"
    else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The email address is invalid.<br/>"
    return ""
}

function validateCity(field) {
    if (field == "") return "No city was entered.<br/>"
    else if (field.length < 3) return "Please enter a valid city.<br/>"
    else if (!/[a-zA-Z ]*$/.test(field)) return "City can only have alphabetical characters.<br/>"
    return ""
}
            
</script>


</head>

<body id="body-results-page">
    <div class="modalDialog" id="openModal">
        <div>
            <a class="close" href="#close" title="Close">X</a>
            
     <h2>Newsletter Sign-Up</h2>      

  <form action="" name="subscribe1" id="subscribe1" method="POST" autocomplete="off" onSubmit="return validate(this)">
<div id="errors"></div>
<input name="name" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" id="name" placeholder="Your name"/>


<input name="email" required id="email" type="email" title="Please enter your email address" placeholder="Your email address"/>

<input name="city" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" id="city" placeholder="Your city"/>

<div id="buttons">
            <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset"/>
            
            <button type="submit" name="submit" id="submitbtn" class="submitbtn" value="Submit this!">Subscribe Now!</button>
            
            <br style="clear:both;">
        </div>
<input type="hidden" name="MM_insert" value="subscribe1">
  </form>

最佳答案

因为您在提交时调用函数 validate(form) 并在它之后向按钮添加提交处理程序但没有调用它。

解决方案 - 在将点击提交处理程序附加到按钮后调用提交处理程序。

$('#submitbtn').click();

像这样

if (fail == "") {
    $(function () {
        $('#submitbtn').click(function (event) {
            event.preventDefault();
            var form = $(this).closest('form'),
                action = form.attr('action');
            $.post(action, form.serialize(), function (data) {
                $('#errors').html("You have been successfully subscribed to our newsletter.");
            })
        }).click();
    });
}

如果条件为真,最好不要附加提交处理程序,直接运行 AJAX 请求。

像这样

if (fail == "") {
        action = $(form).attr('action');
    $.post(action, $(form).serialize(), function (data) {
        $('#errors').html("You have been successfully subscribed to our newsletter.");
    })
}

关于javascript - 单击提交按钮两次以发布表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19900376/

有关javascript - 单击提交按钮两次以发布表单的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调? - 2

    我有一个服务模型/表及其注册表。在表单中,我几乎拥有服务的所有字段,但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  3. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  4. ruby-on-rails - 如何在发布新的 Ruby 或 Rails 版本时收到通知? - 2

    有人知道在发布新版本的Ruby和Rails时收到电子邮件的方法吗?他们有邮件列表,RubyonRails有一个推特,但我不想听到那些随之而来的喧嚣,我只想知道什么时候发布新版本,尤其是那些有安全修复的版本。 最佳答案 从therailsblog获取提要.http://weblog.rubyonrails.org/feed/atom.xml 关于ruby-on-rails-如何在发布新的Ruby或Rails版本时收到通知?,我们在StackOverflow上找到一个类似的问题:

  5. git使用常见问题(提交代码,合并冲突) - 2

    文章目录git常用命令(简介,详细参数往下看)Git提交代码步骤gitpullgitstatusgitaddgitcommitgitpushgit代码冲突合并问题方法一:放弃本地代码方法二:合并代码常用命令以及详细参数gitadd将文件添加到仓库:gitdiff比较文件异同gitlog查看历史记录gitreset代码回滚版本库相关操作远程仓库相关操作分支相关操作创建分支查看分支:gitbranch合并分支:gitmerge删除分支:gitbranch-ddev查看分支合并图:gitlog–graph–pretty=oneline–abbrev-commit撤消某次提交git用户名密码相关配置g

  6. ruby-on-rails - Rake 任务仅调用一次时执行两次 - 2

    我写了一个非常简单的rake任务来尝试找到这个问题的根源。namespace:foodotaskbar::environmentdoputs'RUNNING'endend当在控制台中执行rakefoo:bar时,输出为:RUNNINGRUNNING当我执行任何rake任务时会发生这种情况。有没有人遇到过这样的事情?编辑上面的rake任务就是写在那个.rake文件中的所有内容。这是当前正在使用的Rakefile。requireFile.expand_path('../config/application',__FILE__)OurApp::Application.load_tasks这里

  7. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频,可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗?为此,表单应该是什么样的?目前我有类似的东西但显然它允许多项选择,而我试图将它限制为只有一个..怎么办? 最佳答案 如果要使用字符串列,让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. ruby-on-rails - 多次选择一个随机数,但绝不会两次选择相同的随机数 - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:HowdoIgeneratealistofnuniquerandomnumbersinRuby?我想做的事:Random.rand(0..10).timesdoputsRandom.rand(0..10)end但如果随机数已经显示过,则无法再次显示。如何最轻松地做到这一点?

  10. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上,我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了,但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何,感谢您的帮助。附言。我在ApplicationController中定义了该方法,它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用,您需要对应用程序中的端点执行ajax调用。该路由应调用rub

随机推荐