标签: form-submit

我想知道如何通过Ajax(使用原型框架)提交表单并在"结果"div中显示服务器响应.html看起来像这样:

<form id="myForm" action="/getResults">
    [...]
    <input type="submit" value="submit" />
</form>
<div id="result"></div>

我试图将一个javascript函数(使用Ajax.Updater)附加到"onsubmit"(在表单上)和"onclick"(在输入上)但是在函数结束后表单仍然是"非Ajax"(所以整个页面被结果替换).

我正在使用PHP在需要时传递登录表单,这里是代码:

$htmlForm = '<form id="frmlogin">'.'<label>';
switch(LOGIN_METHOD)
{
    case 'both':
        $htmlForm .= $ACL_LANG['USERNAME'].'/'.$ACL_LANG['EMAIL'];
        break;
    case 'email':
        $htmlForm .= $ACL_LANG['EMAIL'];
        break;
    default:
        $htmlForm .= $ACL_LANG['USERNAME'];
        break;
}                       

$htmlForm .= ':</label>'.
             '<input type="text" name="u" id="u" class="textfield" />'.
             '<label>'.$ACL_LANG['PASSWORD'].'</label>'.
             '<input type="password" name="p" id="p" class="textfield" />'.
             '<center><input type="submit" name="btn" id="btn" class="buttonfield" value="Sign in to extranet" /></center>'.
             '</form>';

return $htmlForm;

问题是,当用户点击进入IE8时,表单不提交,并且用户被迫点击提交按钮.

我该如何纠正这个？

我有一个ASP .NET MVC 3项目和我的一个"创建"视图的问题.

我有使用ajax表单实现的级联下拉字段.

粗略地说这个观点 - 像这样:

@using (Html.BeginForm(...))
{
    @Html.MyDropDown1

    using (Ajax.BeginForm(...))
    {
        @Ajax.MyDropdown2
        <input type="submit" value="Select" />
    }

    using (Ajax.BeginForm(...))
    {
        @Ajax.MyDropdown3
        <input type="submit" value="Select" />
    }

    <!-- other form fields -->

    <input type="submit" value="Create" />
}

问题是ajax表单中的提交按钮实际上提交了外部html表单.

有没有办法指定我要提交的表单的名称？

我想把我的ajax表单放在我的html表单上面所以不会有任何嵌套 - 但我需要在我的html帖子中下拉列表的选定项的值.

谢谢,皮特

我正在使用simple_form和以下代码来创建按钮.

<%= form.action :submit, :value => "submit", :button_html => { :class => "lagoon" }  %>

但是按钮(仍然)标记为"创建用户"而不是"提交".我认为设置值=>会这样做,但事实并非如此

我正在尝试用照片做提交表单.在用户加载照片后,他按下提交按钮,我希望表单暂停10秒,为这10秒钟设置进度条动画,然后提交表单,你们可以说我做错了吗,看起来不像10秒后提交表格.这是代码:

HTML:

<form action="uploadpic.php" method="post" id="upload_form">
<input type="text" name="title" id="title">
<p id="title_p">Title</p>

<hr />

<input type="text" name="theme" id="picture_theme" size="40"/>
<p id="theme">Picture Theme<img src="../simages/info.gif" id="info" width="12" height="12" style="margin-left:10px;"></p>
<hr />

<div class="custom-upload">
    <input type="file" name="picture" id="true_pic" />
    <div class="fake-file">
        <input disabled="disabled" >
    </div>
</div>
<p id="upload_pic">Upload picture</p>?

<input type="submit" name="submit" id="submit" value="Upload" />
</form>

JAVASCRIPT:

form = document.getElementById("upload_form");
    size=1;
    form.onsubmit = function()
    {
        if (size < 10)
        {
            setTimeout(delayedSubmit,1000); 
        }
        return false;
    }
    function delayedSubmit() {
        size++;
            if (size<5)
            {
                setTimeout(delayedSubmit,1000); …

我知道这个问题已经被回答了几百次,但是我已经遇到了大量潜在的解决方案,但它们似乎都没有在我的实例中起作用.

以下是我提交表格的表格和代码.它会触发PHP脚本.现在我知道脚本本身不是提交的原因,因为我手动尝试了表单,它只提交一次.

jQuery代码的第一部分涉及打开一个灯箱并从下面的表中提取值,我已将其包含在内,无论出于何种原因它都是潜在的问题.

jQuery代码:

$(document).ready(function(){
    $('.form_error').hide();
    $('a.launch-1').click(function() { 
        var launcher = $(this).attr('id'),
            launcher = launcher.split('_');
        launcher, launcher[1], $('td .'+launcher[1]);
        $('.'+launcher[1]).each(function(){
            var field = $(this).attr('data-name'),
                fieldValue = $(this).html();
            if(field === 'InvoiceID'){
                $("#previouspaymentsload").load("functions/invoicing_payments_received.php?invoice="+fieldValue, null, function() {
                    $("#previouspaymentsloader").hide();
                });
            } else if(field === 'InvoiceNumber'){
                $("#addinvoicenum").html(fieldValue);
            }
            $('#'+field).val(fieldValue);
        });
    });
    $("#addpayment_submit").click(function(event) {         
        $('.form_error').hide();  
        var amount = $("input#amount").val();  
        if (amount == "") {  
            $("#amount_error").show();  
            $("input#amount").focus();  
            return false;
        }
        date = $("input#date").val();  
        if (date == "") {  
            $("#date_error").show();  
            $("input#date").focus(); 
            return false;
        } 
        credit = $("input#credit").val(); 
        invoiceID …

我有这样的表格

    <form name="test" action="test/test_new" />
<input type="text" />
<input type="submit" value="search"/>
<input type="button" value="download"/>

我甚至需要点击下载按钮.例如.如果我点击下载它应该提交text/text_new.xls而不是text/text_new.我该怎么做.

可能重复:
暂停表单提交以进行验证

这是对此的延续帖子.所以基本上我在iframe中上传文件.但在提交之前,我从表单中获取数据并使用django的内置系统检查它们的有效性(目前它只是一个虚函数,需要foo:bar,并返回json result ="true").我使用两个按钮 - 假可见,调用验证和第二 - 隐藏,提交表单.使用下面的代码,我能够执行验证,然后当它的结果是肯定的形式提交.现在,如果我对表单进行硬编码,我的警报就不会显示,而且我很确定没有执行上传(不幸的是,上传列表每8小时刷新一次,所以我会知道它是否在一段时间内有效).如果未指定目标,则使用重定向上载文件,因此省略整个"submit"事件侦听器.更重要的是,整个代码没有 在Chrome中完全可以工作.在接收验证响应和显示我以前从未见过的响应之间需要2-3s(看看firebug).我真的很想让它发挥作用,因为我已经浪费了2天而没有任何结果.

示例链接:

http://ntt.vipserv.org/artifact/

JS:

<script>  
    $('#fake_upload_submit').click(function(e){
        e.preventDefault();

        var fileUploadForm = document.getElementById('file_upload_form');
        fileUploadForm.addEventListener("submit", function() {
            alert("sent in iframe");
            fileUploadForm.target = 'upload_target';
        }, false);       

        $.ajax({
            type: "POST",
            url: '/artifact/upload/check-form/',
            data: 'foo=bar',
            dataType: "json",
            success: function(data){
                if(data['result'] == "true"){
                    $("#message").show();
                    $("#message").fadeIn(400).html('<span>'+data["message"]+'</span>');
                    setTimeout(function(){
                        $("#message").fadeOut("slow", function () {
                            $("#message").hide();
                        });
                    }, 1500);

                    fileUploadForm.submit();

                }
                else{
                    $("#message").show();
                    $("#message").fadeIn(400).html('<span">Response false</span>');
                    setTimeout(function(){
                        $("#message").fadeOut("slow", function () {
                            $("#message").hide();
                        });
                    }, 1500);                    
                    return false;
                }
            }
        });
        return …

我有一个有两个提交按钮的表单.我想使用JavaScript手动提交表单,并使用输入按钮提交与其他表单元素一起发布的表单,就像表单自动提交一样.关于这个问题有很多喋喋不休,但我找不到答案.

<form method="post" action="echoToScreenAndLog.jsp" id="form1"> 
    <input id="field1" name="field1"/>
    <input type="text" size="20" id="field2" name="field2"/>

    <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/>
    <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/>
</form> 

当窗体上方用"做一"按钮提交,张贴的参数是field1="xxx",field2="yyy",sub1_name="Do One".

但我想手动提交表格......

<form method="post" action="echoToScreenAndLog.jsp" id="form1"> 
    <input id="field1" name="field1"/>
    <input type="text" size="20" id="field2" name="field2"/>

    <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/>
    <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/>
</form> 
<script type="text/javascript">
    var btn = document.getElementById('sub1_id');
    btn.onclick=function() {
        return mySubmit(document.getElementById('form1'), ...);
    }
</script>

但是在mySubmit函数中手动提交表单不会发布sub1_name参数.我可以理解 - 我绕过了提交,因此表单没有使用按钮提交,因此发布表示用于提交表单的按钮的参数是没有意义的. …

我想在HTML表单上创建一个表单提交按钮,该表单的文本与将提交给主机的关键字的文本不同.所以我用过

<button type="submit" name="SubmitAction" value="Done" accesskey="D"><u>D</u>one for Now</button>

但W3Schools警告说:

注意:如果您<button>在HTML表单中使用该元素,则不同的浏览器可能会提交不同的值.用于<input>在HTML表单中创建按钮.

有没有办法使用按钮上<input>显示的文本与提交给主机的值不同来创建按钮？

不同浏览器发送的变体有哪些<button>？

注意:我不需要支持任何旧版本的IE 9,并且实际上将使用当前版本的Chrome和FireFox.