HTML Form - successfully post form but do not leave the page (NO-JQUERY)

Question

I have a simple form inside a Pop up window. In my form I have only one checkbox with a label for the checkbox. What I have done is when the user clicks on the label or checkbox, the submit button to appear and the user will be able to submit the form. Moreover, I would like when the user press the submit button to collect the information in my database and then to close the pop up window and continue on the website normally without leaving. I am not sure how to achieve that but this is what I have done until now. Please I need some help to achieve this.

1) I want to submit the form successfully and collect the information to my database. 2) I want to close the PopUp Window. 3) I do not want to leave the page.

Thanks.

HTML:

<div id="popUp">
      <form id="myform" method="post" action="somepage.php" onsubmit="return closeWindow">
         <input type="checkbox" id="checkbox" name="checkbox"><label for="checkbox">Click to show Submit</label><br>
         <input type="submit" id="submit-button" value="Submit" style="display:none">
     </form>
   </div>

CSS:

#popUp {
    height:400px;
    border:1px solid #000;
    background:#e2e2e2;
}

JS:

var checkBox = document.getElementById("checkbox");
var submitButton = document.getElementById("submit-button");
var PopUpWindow = document.getElementById("popUp");

function checboxFunc() {
    if (checkBox.checked) {
        submitButton.style.display = "block";
    } else {
        submitButton.style.display = "none";
    }
}
checkBox.addEventListener("click", checboxFunc);


function closeWindow() {
    PopUpWindow.style.display = "none";
    return false;
}
submitButton.addEventListener("click", closeWindow);

At [so] you are expected to try to **write the code yourself**. After **[doing more research](//meta.stackoverflow.com/questions/261592)** if you have a problem you can **post what you've tried** with a **clear explanation of what isn't working** and providing a [**Minimal, Complete, and Verifiable example**](//stackoverflow.com/help/mcve). I suggest reading [ask] a good question and [the perfect question](http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/). Also, be sure to take the [tour] and read **[this](//meta.stackoverflow.com/questions/347937/)**. — John Conde, Apr 26 '17 at 16:39
Possible duplicate of [How to use jquery $.post() method to submit form values](http://stackoverflow.com/questions/25881204/how-to-use-jquery-post-method-to-submit-form-values) — MaxZoom, Apr 26 '17 at 16:41
You didn't tell what have you achieved so far and where do you need the help exactly? — Sagar Balyan, Apr 26 '17 at 16:43
Thank you for ur answer @JasonSingh . When I click the submit button, the it takes me to the somepage.php and the pop up window does not seems to close. — NoName84, Apr 26 '17 at 16:45
There is a simple solution for your problem having 2 steps - 1) use e.preventDefault() to avoid the website redirect. 2) use ajax to send the form to your sql server. — Sagar Balyan, Apr 26 '17 at 17:00
@JasonSingh so for this to be achieve I will have to use AJAX? Is there any solution only with pure JS. No AJAX, no server side programming? — NoName84, Apr 26 '17 at 17:23

Abraham Murciano Benzadon · Answer 1 · 2017-04-26T18:13:20.160

Although you could use AJAX, a simpler approach would be to put the form in another HTML file and load it into an iframe and set the form's target="name_of_iframe".

You will also have to get rid of the onsubmit attribute and instead add an event listener. Like so.

yourpage.html

<iframe id="popUp" name="popup" src="path/to/form.html"></iframe>

form.html

<form id="myform" method="post" action="somepage.php" target="popup">
    <input type="checkbox" id="checkbox" name="checkbox"><label for="checkbox">Click to show Submit</label><br>
    <input type="submit" id="submit-button" value="Submit" style="display:none">
</form>

yourpage.js

var checkBox = document.getElementById("checkbox");
var submitButton = document.getElementById("submit-button");
var PopUpWindow = document.getElementById("popUp");
var form = document.getElementById("myform");

function checboxFunc() {
    if (checkBox.checked) {
        submitButton.style.display = "block";
    } else {
        submitButton.style.display = "none";
    }
}
checkBox.addEventListener("click", checboxFunc);


function closeWindow() {
    PopUpWindow.style.display = "none";
    return false;
}
form.addEventListener("submit", closeWindow);

When this is submitted, the somepage.php will load, but only inside the popup, wich will be hidden anyway. So you will have the desired effect.

Thank you @Abraham Murciano . I have tried your solution but when i render the page I cannot see anything. — NoName84, Apr 26 '17 at 17:20
I just checked, and apparently, you can't put HTML directly into an iFrame. you'd need it in a separate file. I will update the answer. — Abraham Murciano Benzadon, Apr 26 '17 at 17:37
thanks @Abraham Murciano Benzadon . I have check it but im not sure if it is working. It does not leave the page which is ok but the iframe is still there. It does not disappear. — NoName84, Apr 26 '17 at 17:59
I see. its because the closeWindow function is not defined inside the iframe. only outside. I'll update the answer now. — Abraham Murciano Benzadon, Apr 26 '17 at 18:06

score 0 · Answer 2 · answered Apr 26 '17 at 16:59

Ajax was invented to solve this. Jquery wraps it nicely like:

checkout $.post

Two suggestions, if you are doing this type of request, dont complicate matters and use the FORM tag, just use the inputs. Secondly send JSON instead of form data, can be messy trying to get in the correct format.

So your client side would look something like this:




    var req_obj = {
        "id":"ENTER_DATA",
        "params":{
            "param_name1":"param_val1",
            "param_name2":"param_val2"
        }
    };

    $.post(
        APP.ActionUrl,
        JSON.stringify(req_obj),
        function(data){ //this is the callback,do your confirmation msg },
        "json");

SERVER:



    $req_obj = json_decode(get_post_data());
        $param1 = $req_obj->params->param_name1;


        function get_post_data(){
            $buf = '';

            if(($h_post = fopen('php://input','r'))){
                while(!feof($h_post))
                    $buf .= fread($h_post,1024);

                fclose($h_post);
                return $buf;
            }
            else
                return false;
        }

Thank you @Yogistra Anderson for your answer. Your answer probably would work but I would like a simple solution. — NoName84, Apr 26 '17 at 17:21

HTML Form - successfully post form but do not leave the page (NO-JQUERY)

2 Answers2