Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2013
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Submit form without leaving page

    I got an small problem with my script because i can't get it to stay on the same page after submitting the form, i've tried a lot of things but none of them seems to work so i'm probably doing something wrong. could anyone give me a hand with this? The .php and form works fine just need a piece of script to stay on the same page.

    Thank you.

    Form:

    <form id="myForm" action="mail.php" method="POST">

    <input class="bttn_default" type="submit" name="answer" value="Notify me" onclick="showDiv()" />

    <input class="field" type="text" name="email"placeholder="Email" id="myField">
    </form>

    .php:

    <?php
    $email = $_POST['email'];
    $formcontent="$email \n Notify me on this email please";
    $recipient = "contact@google.com";
    $subject = "Notify me";
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

    ?>

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by DesignedbyLau View Post
    I got an small problem with my script because i can't get it to stay on the same page after submitting the form, i've tried a lot of things but none of them seems to work so i'm probably doing something wrong. could anyone give me a hand with this? The .php and form works fine just need a piece of script to stay on the same page.
    Submit the form to a hidden iframe. Example, with better coding practices:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    	</head>
    	<body>
    		<form id="myForm" method="post" action="mail.php" target="submission.frame">
    			<button class="bttn_default">Notify Me</button>
    			<input id="myField" type="email" name="email" placeholder="Email" required class="field">
    			<iframe name="submission.frame" hidden></iframe>
    		</form>
    		<script>
    			var form = document.getElementById("myForm");
    			function showDiv() {
    				// Do something.
    				/* Testing Statement: */ alert("The form was submitted!");
    			}
    			form.addEventListener("submit", showDiv);
    		</script>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Jun 2013
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you so much ! totally worked

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Quote Originally Posted by Arbitrator View Post
    Submit the form to a hidden iframe. Example, with better coding practices:
    […]
    I love it how HTML 5 takes all the bad things we were happy to get rid of in XHTML to redefine them as good practice.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by VIPStephan View Post
    I love it how HTML 5 takes all the bad things we were happy to get rid of in XHTML to redefine them as good practice.
    Assuming you're talking about the iframe and target attribute, I wasn't speaking of those in that statement. I was referring to the elimination of the onclick attribute and use of the type="email attribute, required attribute, and button element. I also stripped a seemingly pointless name attribute on the button; I've never seen a form where the button value was relevant to form submission.

    I don't think iframes and target attributes aimed at them are particularly bad though despite being eliminated in HTML4 Strict. The spec was apparently written with the idea that the object element would be the go-to element for embedded content, which obviously didn't pan out. Plus, we've had the whole rise of embedded social media thing since the spec was written in 1999.

    On the other hand, I still think other usages like target="_blank" or embedding one's own site's content in an iframe is stupid.

    On re-considering the code I just wrote, it might be better to attach the target attribute via script. Otherwise, the user will get no feedback indicating successful form submission when scripting is disabled.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by Arbitrator View Post
    I also stripped a seemingly pointless name attribute on the button; I've never seen a form where the button value was relevant to form submission.
    That will be relevant if you have multiple submit buttons on a page to determine on the server-side which button was clicked on.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by glenngv View Post
    That will be relevant if you have multiple submit buttons on a page to determine on the server-side which button was clicked on.
    Hmm... OK. Now that I think about it some more, I can see some utility in having name attributes on buttons and have probably have seen such a form:

    Code:
    <input type="email" name="email" placeholder="Email">
    <button name="action" value="subscribe">Subscribe</button>
    <button name="action" value="unsubscribe">Unsubscribe</button>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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