www.webdeveloper.com
Results 1 to 15 of 15

Thread: How to get an alert box after submiting a form

  1. #1
    Join Date
    Sep 2009
    Posts
    8

    How to get an alert box after submiting a form

    At our website: chatwincompany.com
    we want to have an alert window e.g "Thanks for Subscribing"
    instead of having a new window coming from the 'insert.php' script. I tried may ways and I know this should be simple, but I'm a newbie at JavaScript. Below is the current code:

    <form action="insert.php" enctype="multipart/form-data" id="form" method="post">
    <div class="form"><img src="images/form_title_test.gif" alt="" /><br />
    <div class="div_input"><input name="email" type="text" class="input_1" value="Enter email" /></div>
    <a href="#" onclick="document.getElementById('form').submit()"><img src="images/link_subscribe_test.gif" alt="" /></a>
    </div></form>

    Thanks in advance....

  2. #2
    Join Date
    Sep 2009
    Posts
    7
    form onsubmit="yourJavacrit();"

  3. #3
    Join Date
    Sep 2009
    Posts
    8
    you mean this way?:
    <form action="insert.php" onsubmit="myJavaScript()" enctype="multipart/form-data" id="form" method="post">

    or

    <form action="insert.php" enctype="multipart/form-data" id="form" method="post">
    <form onsubmit="myJavaScript();">

    thanks

  4. #4
    Join Date
    Sep 2009
    Posts
    7
    Code:
    <form action="insert.php" onsubmit="alert('Thanks for Subscribing');" enctype="multipart/form-data" id="form" method="post">
    and if needed redirection continue with onsubmit="alert('Thanks for Subscribing'); document.location.href='http://new location';"
    Last edited by aihazm@yahoo.co; 09-22-2009 at 06:12 PM.

  5. #5
    Join Date
    Sep 2009
    Posts
    8
    hey...sorry it took me long to respond i was away. it still redirects me to the insert.php page. this is my current code:
    Code:
    <form action="insert.php" onsubmit="alert('Thanks for Subscribing');" enctype="multipart/form-data" id="form" method="post">
                                    <div class="form"><img src="images/form_title_test.gif" alt="" /><br />
                                    <div class="div_input"><input name="email" type="text" class="input_1" value="Enter email" /></div>
                                    <!--<a href="#" onclick="document.getElementById('form').submit()"><img src="images/link_subscribe_test.gif" alt="Subscribe" /></a>-
    ->Press Enter
    how can i just have the alert window without redirecting anywhere. and if i do this will the insert.php still work? thanks...

  6. #6
    Join Date
    Jan 2009
    Posts
    3,346
    The PHP will still need to process the form (requiring a refresh) unless you want to post the data using AJAX. The best practice is to provide a server-side solution and then using AJAX if available to provide a smoother more user-friendly solution.

  7. #7
    Join Date
    Sep 2009
    Posts
    8
    thanks...so what is the best way to accomplish this criterion9? i would like to have something more user friendly. AJAX? can you point me to the right direction? what changes should i make? thanks...

  8. #8
    Join Date
    Jan 2009
    Posts
    3,346
    Here are some AJAX form links:
    http://www.captain.at/howto-ajax-form-post-get.php
    http://www.tizag.com/ajaxTutorial/ajaxform.php

    The best solution is to build a working version without AJAX and then write the javascript portion to interrupt the form and inject itself if possible. This way the form will still work if for example the user is on a mobile phone or has javascript disabled for some reason.

  9. #9
    Join Date
    Sep 2009
    Posts
    8
    i like those links criterion9...thanks! i going to experiment and see what happens...thanks!

  10. #10
    Join Date
    Sep 2009
    Posts
    8
    i will work on that, but for now How can i make the confirmation page (insert.php) a pop-up window? i tried a few ways and doesn't seem to work for me....
    thanks

  11. #11
    Join Date
    Jan 2009
    Posts
    3,346
    You won't be able to make it a popup as far as I know unless your form is on a different page and you set the target attribute to "_blank" on your form (but I'm not sure that will work in most situations or any at all in fact). This is not a good idea though and you should really look at just using the same page to do what you need (in this case tell the user the form submitted successfully). Once you get that working you can use AJAX to create a "popup" div that appears instead of a page refresh.

  12. #12
    Join Date
    Sep 2009
    Posts
    8
    you should really look at just using the same page to do what you need (in this case tell the user the form submitted successfully)
    I have this working already: chatwincompany.com
    if you fill out the newsletter form it will confirm the user, but it will take the user to the insert.php page and i wanted an alert box(which i can't still figure how to make work the way is supposed to).
    How would you do that 'AJAX popup div'?
    thanks...

  13. #13
    Join Date
    Jan 2009
    Posts
    3,346

  14. #14
    Join Date
    Sep 2009
    Posts
    8
    criterion9...i appreciate your help. i have this alert window working, but how do i avoid being redirected to the insert.php page? as you can see at chatwincompany.com when the user subscribes to the newsletter you get the alert window, but then you are taken to the insert.php page!
    i think this should be easy to take care, i just don't see the way. how can i stop from redirecting to the insert.php and if i do would the insert.php still do what is supposed to do? (insert emails in database?) thanks again....

  15. #15
    Join Date
    Jan 2009
    Posts
    3,346
    If you are using an onsubmit handler use the return value to cancel the submit. As in:
    Code:
    <form onsubmit="return yourFunction()">
    Then you submit your form using AJAX as described above and make sure to return false in your function to prevent the browser from submitting it as well.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles