CODEWITHSUNDEEP
javascript
Andrew
Andrew

Reputation: 2011

JS Close window on form submission

Update at bottom of post:

I have a page where when a button is pressed, a new window will popup with a form. Below is where I open the popup.

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

When the form is submitted, I need to close that window. The problem I am having now is that the window is closing before the form is fully getting submitted.

Popup Window Code:

<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(); ?>

Trying to use Ajax call now with no luck:

$('#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;

Upvotes: 0

Views: 1776

Answers (1)

epascarello
epascarello

Reputation: 207501

You have a race condition and the window.close will always win. You need to close when the form is DONE submitting.

Either convert it over to use an Ajax call or call the window.close() in the response of the form submission.

Upvotes: 1

Related Questions