0

I have an overlay popup with a form inside. The form has a button and a textbox (imagine something like the FB Like and Comment box). Every interaction with the form triggers a MySQL DB Insert called through a PHP function. The problem is that after having clicked on the button or commented (and pressing enter key on the keyboard), the overlay disappears and the main page is refreshed. I don't want this to happen and I want to keep the focus on the popup. How can I do that?

Here's some code:

    <div id="LikeAndComment">
    <form name="formLAC" method="post" action="">
        <div id="containerLike">
            <button type="submit" id="likeit" value="FALSE" onClick="{vote(); keepFocus();}">
            <img src="images/implike_BUTTON.jpg" "/>
            </button>
        </div>
        <div id="containerComment">
            Commenta: <input type="text" class="input" id="comment" onkeydown="if (event.keyCode == 13) { this.form.submit(); keepfocus(); return false; }"></input>
        </div>
    </form>
</div>

And here's the code of the keepFocus function:

function keepFocus() {
    $('.formLAC').focus();
    };
strnk
  • 2,013
  • 18
  • 21
SteveRoss
  • 105
  • 11

1 Answers1

1

When you submit form as default without prevent form submit and using ajax, The browser will generate a new request and redirct you to the action url that you defined. What you ask is to submit the form without redirect the page. The ideal solution is to use ajax. You can catch the submit-form event and prevent the default action. then you have to handle it with you own code, In this case the ajax function.

An example how to send form with ajax you can see on this post with nice answer:
link to how make form submit with ajax

Community
  • 1
  • 1
Dvir
  • 3,287
  • 1
  • 21
  • 33
  • Thank you Dvir and k102, but as a total rookie, I'm afraid, I need some more help, since I've never used Ajax... – SteveRoss Oct 18 '13 at 09:09
  • For using ajax. I suggest to use Jquery because it's handle with cross-browser, better syntax, clean code, and have a lot of examples and good api. I assume that you know what is jquery, so the next step is to read about `$.ajax` and see the examples: [How to use ajax function in Jquery](http://api.jquery.com/jQuery.ajax/) – Dvir Oct 18 '13 at 09:14
  • I agree with Dvir, but for a quick soution u can call the content of the popup box in iframe so that the overlay wont disappear after submitting the form. If you are using any jquery modal pluguin... look for iframe:true option or something, and then pass the content url.. thats it. – Gaurav Mehra Oct 18 '13 at 09:15