JS关闭表单提交窗口

时间:2013-04-01 14:13:12

标签: javascript

帖子底部更新:

我有一个页面,当按下按钮时,会弹出一个带有表单的新窗口。下面是我打开弹出窗口的地方。

<a><span class="add-on"><i class="icon-plus" style="color: green;" onclick="window.open('<?php echo $this->Html->Url(array('controller' => 'customers', 'action' => 'add?popup')); ?>', 'Add Customer', 'height=630, width=430')"></i></span></a>

提交表单后,我需要关闭该窗口。我现在遇到的问题是窗口在表单完全提交之前关闭。

弹出窗口代码:

<fieldset style="padding-left: 15px;">
<legend>Add Customer</legend>

<?php echo $this->Form->create('Customer', array('inputDefaults' => array('div' => false, 'label' => false))); ?>
    <div class="control-group">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <?php echo $this->Form->input('first_name', array('placeholder' => 'First Name')); ?>
        </div>
    </div>

    <div class="control-group">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <?php echo $this->Form->input('last_name', array('placeholder' => 'Last Name')); ?>
        </div>
    </div>

    <div class="input-prepend">
        <span class="add-on"><i class="icon-globe"></i></span>
        <?php echo $this->Form->input('location', array('placeholder' => 'Location')); ?>
    </div>

    <div class="control-group">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-phone"></i></span>
            <?php echo $this->Form->input('phone_number', array('class' => 'maskedPhone', 'placeholder' => 'Phone Number')); ?>
        </div>
    </div>

    <div class="control-group">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i></span>
            <?php echo $this->Form->input('email', array('placeholder' => 'Email')); ?>
        </div>
    </div>

    <!-- Close Form -->
<?php echo $this->Form->end(array(
    'label' => 'Save Customer',
    'id' => 'saveCust',
    'class' => 'btn btn-primary',
    'div' => false
)); ?>

<?php echo $this->Html->script('jquery.maskedinput.min', array('inline' => false));
  echo $this->Html->script('maskedinput', array('inline' => false));

$this->start('script'); ?>
    <script type="text/javascript">
        $(document).ready(function () {     
            inputs.maskedInputs();

            // Get queryString to close popup window
            var queryString = window.location.search.substring(1);
            if (queryString == "popup"){
                $('#CustomerAddForm').submit(function() {
                    window.close();                 
                });                 
            }
        });
    </script>
<?php $this->end(); ?>

现在尝试使用Ajax调用,但没有运气:

$('#saveCust').click(function() {
                    alert("test");
                    $.ajax({
                        type: "POST",
                        url: "<?php echo $this->Html->Url(array('controller' => 'Customers', 'action' => 'add')); ?>",
                        data: $('#CustomerAddForm').serialize(),
                        success: function(data)
                        {
                            alert("Test");
                            window.close();
                        }
                    })
                });
                return false;               

1 个答案:

答案 0 :(得分:1)

你有一个竞争条件,window.close将永远胜利。您需要在表单完成提交时关闭。

将其转换为使用Ajax调用或在表单提交的响应中调用window.close()。