jsp 中用js提交表单并关闭本窗口的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsp 中用js提交表单并关闭本窗口的问题相关的知识,希望对你有一定的参考价值。

在我的程序里,有人回复的时候,点击回复,会window.open一个窗口,里面用的有fck,然后填写完成后,提交,然后会关闭这个弹出的窗口。js中,我是这么写的。$("#id").submit(),windows.close();我可以确定程序里没有错。
在运行的时候,没有提交,直接关闭了。后来我在这两句中间加了一个alert,它就提交了。这是为什么呢?要怎么解决呢?谢谢各位大侠。我的是jsp。

1、在html中的表单form设置属性action='#'防止自动提交

2、利用js获取html中表单form,重新设置表单的action

3、action设置完毕后调用form.submit()方法提交表单

4、表单提交后利用window.close()关闭当前窗口

示例:

<form action='#' id="myForm">
    <input type="text" name="username" value=""/>
    <input type="button" value="提交" onclick="subform();"/>
</form>

方法:

function subform()
    var form = document.getElementById('myForm');//获取表单dom
    form.action="testurl";//重新设置提交url
    form.submit();//提交表单
    window.close();//关闭窗口
 

参考技术A $("#id").submit();
windows.close();
你中间加了alert,页面会正常提交,如果没加alert
submit还没提交完成,页面就关闭了,提交动作当然就被取消了,
你可以改成:
$("#id").submit();
setTimeout(function()windows.close(),1000);// 等1秒再关闭

但是如果网络不好,1秒内没有提交完成,还是会取消提交动作的
参考技术B

1、在html中的表单form设置属性action='#'防止自动提交

2、利用js获取html中表单form,重新设置表单的action

3、action设置完毕后调用form.submit()方法提交表单

4、表单提交后利用window.close()关闭当前窗口


button按钮也可以的啊,一样的使用方法啊,在js中提交的,还是说你想根据不同的按钮将form1表单提交到不同的action里?
<script type="text/javascript">
function sub()
document.form1.submit();

</script>
 <body>
   <form action="Getvalue" method="post" name="form1">
   <input type="text" name="username"><br/>
   <input type="password" name="password"><br/>
   <input type="button" value="button测试" onclick="sub();">
   </form>
 </body>

参考技术C $("#id").submit(function(e)
windows.close();
);
楼上的是新手
楼主你用的是jq的插件吧?我这是jq的写法
大意就是:
当submit提交成功后,才会执行windows.close()
如果提交不成功,就不执行了
QQ群:154158565
招管理,各种前端问题答疑解惑本回答被提问者采纳

在 Bootstrap 模式窗口中单击 Enter 并点击提交按钮时提交表单数据

【中文标题】在 Bootstrap 模式窗口中单击 Enter 并点击提交按钮时提交表单数据【英文标题】:Submit form data both on clicking enter and hitting the submit button from a Bootstrap modal window 【发布时间】:2013-10-18 07:36:00 【问题描述】:

这是我的模态窗口中的表单:

我没有关闭按钮,并且我禁用了按 esc 关闭窗口。我希望能够在按下提交或按下回车键时提交表单数据。

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-header">
        <h3 id="myModalLabel">Enter your Credentials</h3>
    </div>
    <div class="modal-body">
        <form id="login-form" class="form-horizontal" accept-charset="UTF-8"  data-remote="true"">
            <div class="control-group">
                <label class="control-label" for="inputEmail">Email</label>
                <div class="controls">
                    <input type="email" id="email" name="email" value=""  placeholder="Email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPassword">Password</label>
                <div class="controls">
                    <input type="password" id="passwd" name="passwd" value="" placeholder="Password">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox"> Remember me
                    </label>
                    <input type="submit"  id="login" value="Login"class="btn btn-primary" />

                </div>
            </div>
        </form>          
    </div>
</div>

这是我正在使用的脚本:

$(document).ready(function()
    $('#myModal').modal('show');
);

function submitLogin() 
    $.ajax(
        url:"login_mysql.php",
        type:'POST',
        dataType:"json",
        data: $("#login-form").serialize()
    ).done(function(data)
        //do something
    );


$('#passwd').keypress(function(e) 
    if (e.which == '13') 
        submitLogin();
    
);

$('#login').click(function()
    submitLogin();
);

在输入我的密码或单击提交按钮后按 Enter 键,相同的页面会重新加载,并且 ajax 脚本不会运行。有人可以告诉我我的脚本是否与我的模态窗口的默认设置发生冲突吗?

【问题讨论】:

将 type="submit" 从您的登录按钮更改为 type="button" 【参考方案1】:

我已经做到了,提交表单将在模式对话框中打开,然后在字段中提交整个条目。如果您单击提交按钮,将在数据库上完成输入,并立即将页面重定向到包含新数据的同一页面。无需刷新即可查看最近输入的数据。 希望这会有所帮助。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">ADD CONTENT</button>
<!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Please Add Content</h4>
        </div>
      <div class="modal-body">
        <form role="form" action="" method="POST">
          <!-- YOUR HTML FORM GOES HERE--->
        <button type="submit" name="submit" class="btn btn-primary btn-lg"id="sub" onclick="SUBMISSION()" >Submit </button>
        </fieldset>
        </form>
<?php
  if(isset($_POST['submit']))
  
    SUBMISSION();
  
  function SUBMISSION()
  
    // UR CONNECTION ESTABLISHMENT CODE GOES HERE
    // SQL QUERY FOR INSERTION IN FIELDS

    echo"<script type=\"text/javascript\">
      document.location.href='http://localhost/dict/pages/YOURPAGE.php';
    </script>";

    $conn->CLOSE();
  
?>

        </div>                      
       </div>
     <!-- /.modal-content -->
     </div>
   <!-- /.modal-dialog -->
   <!-- /.panel-body -->
   </div>
   <!-- /.panel -->
 </div>
 <!-- /.col-lg-12 -->

【讨论】:

你能再解释一下你的答案吗?很难理解你在这里写的内容。 yaa of course..但这并不难理解。我使用引导模式打开提交表单,提交单击按钮后,您可以看到即时填充的数据。首先我在模态框 div 之后定义了按钮,在模态正文中我定义了单击“添加内容按钮”后将在模态框上显示的表单 填写完所有数据后,您单击提交按钮,然后在执行 SUBMISSION() 时,首先数据将保存在数据库中,然后使用 document.location.href 您将重定向到您可以的数据表页面查看最近填充的数据。执行起来超级简单 简单来说,我在模态正文中定义了所有表单字段,并在 php 中执行提交,如您所见【参考方案2】:
    将 type="submit" 从您的登录按钮更改为 type="button"。

编辑: 2. 尝试删除 data-keyboard="false"。

【讨论】:

模式在点击按钮时提交数据,而不是在按下回车键时提交数据。【参考方案3】:

监听submit 事件 - 它由输入和点击事件触发。

标记

<form id="yourForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Submit">
</form>

JS

$('#yourForm').submit(function(event)

  // prevent default browser behaviour
  event.preventDefault();

  //do stuff with your form here
  ...

);

【讨论】:

以上是关于jsp 中用js提交表单并关闭本窗口的问题的主要内容,如果未能解决你的问题,请参考以下文章

jsp中用button提交表单数据

JS弹窗提交关闭后,刷新父页面 在线等 急!!!

请问在PHP中用JS打,关闭子窗口,刷新父窗口,用echo " ";形式,谢了…

jsp 如何实现提交表单 但不跳转到提交页面

JSP form表单无法提交

php 提交多行多列的form表单