0

I've put a modal popup box for getting inputs and then stores via ajax. It's inserted values succesfully.. but the popup stills after submittion. i've try everything like window.close(); ... ('#modalname').hide(); but nothing works for me. please help me to fix this bug.

Here's my part of working code,

                        <!--css for display subject in row (starts)-->
                        <span class="b-messages__subject">
                            <span>
                                <a href="index.php?subject=<?php echo $results[$result]['subject']; ?>&username=<?php echo $results[$result]['username']; ?>#openModal" onclick="fetch_select(<?php echo $results[$result]["id"]; ?>);">
                                    <?php echo "Reply"; ?>
                                </a>
                            </span>
                        </span>
                        <!--css for display subject in row (ends)-->

and then modal div is,

                        <!--Modal box starts-->
                        <div id="openModal" class="modalDialog" align="center">
                            <div>
                                <a href="<?php echo ('/'); ?>yandex" title="Close" class="close">X</a>
                                <h2><strong>Reply Message</strong></h2>
                                <br>
                                <label><strong>Enter Your Message Here</strong></label>
                                <br>
                                <label><b>From:</b>&nbsp;&nbsp;<?php echo $user; ?></label>
                                <span id="content-info" class="info"></span>
                                <br/>
                                <!--set session username for hidden-->
                                <input type="hidden" name="username" id="username" value="<?php echo $user; ?>">
                                <textarea name="content" id="content" class="demoInputBox"></textarea>
                                <!--send fusername with hidden-->
                                <input type="text" name="fusername" id="fusername" value="<?php echo $_GET["username"] ?>">
                                <!--send subject with hidden-->
                                <input type="text" name="subject" id="subject" value="<?php echo $_GET["subject"] ?>">
                                <!--status init="0"-->
                                <input type="hidden" name="status" id="status" value="0">
                                <!--time-->
                                <input type="hidden" name="created" id="created" value='<?php echo date("Y-m-d H:i:s"); ?>'>
                                <br><br>
                                <input type="button" name="submit" id="but-sub" value="Send Message" onClick="add();" />
                            </div>  
                        </div>
                        <!--Modal box ends-->

My js file contains:

function add() { 
        /*initialize valid and assign to function validate()*/   
        var valid = validate(); 
        //alert(valid); returns true 
        //if function validate() returns valid.. then go away 
        if (valid){
            $.ajax({
                url: "add.php",
                type: "POST",
                data: {
                    username: $("#username").val(),
                    fusername: $("#fusername").val(),
                    subject: $("#subject").val(),
                    content: $("#content").val(),
                    status: $("#status").val(),
                    created: $("#created").val()}
            });
        }
    }
1
  • are you using jQueryUI?
    – dmgig
    Commented Mar 15, 2016 at 14:36

2 Answers 2

0

I am not sure if you are using JSON, but you should definitely be checking the response for pass or fail. Try adding success after your data like this (doesn't include check for pass or fail, but should close modal upon success response of the AJAX):

$.ajax({
    url: "add.php",
    type: "POST",
    data: {
        username: $("#username").val(),
        fusername: $("#fusername").val(),
        subject: $("#subject").val(),
        content: $("#content").val(),
        status: $("#status").val(),
        created: $("#created").val()
    },
    success: function (returndata) {
        //try this first
        $("#openModal").modal('hide');

        //try this second and uncomment if you aren't using jquery/bootstrap modal
        //$("#openModal").hide();

    }
});
0

Put your form elements in a <form></form>. The modal should close if form is submited.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.