Databases
StackOverflow2013
Postsdbo
POJavascript/ PHP events update sign up button
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript/ PHP events update sign up button
    text
    copied!<p>I'm trying to design a basic Javascript email sign up to events update, just like you see on under construction and coming soon pages. A visitor will add their email and click submit to add themselves to the email list, with a basic Ajax or jQuery "thank you for signing up" message. Also I would need to use a PHO email validator.</p> <p>HTML</p> <pre><code>&lt;form action="scripts/mail.php" method="POST"&gt; &lt;input type="email" name="email" id="email" placeholder="Enter your email here....." tabindex="1"&gt; &lt;input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2"&gt; &lt;/form&gt; </code></pre> <p>With the PHP file below:</p> <pre><code>&lt;?php $from = "events@spectator.co.uk"; $email = $_POST['email']; $to = "datunrase@pressholdings.com"; $subject = "Please add me to the events mailing list"; $mailheader = "Email: $email \r\n"; mail($to, $subject, $mailheader) or die("Error!"); echo "&lt;script type=\"text/javascript\"&gt;". "alert('Thanks! We will keep you updated');". "&lt;/script&gt;"; ?&gt; </code></pre> <p>Then I used this Javascript SignUp.js:</p> <pre><code>$(document).ready(function(){ var mousedownHappened = false; $("#submitbtn").mousedown(function() { mousedownHappened = true; }); $("#email").focus(function(){ $(this).animate({ opacity: 1.0, width: '250px' }, 300, function(){ // callback method empty }); // display submit button $("#submitbtn").fadeIn(300); }); $("#submitbtn").on("click", function(e){ e.stopImmediatePropagation(); $("#signup").fadeOut(230, function(){ // callback method to display new text // setup other codes here to store the e-mail address $(this).after('&lt;p id="success"&gt;Thanks! We will keep you updated.&lt;/p&gt;'); }); }); $("#email").blur(function(){ if(mousedownHappened) { // reset mousedown and cancel fading effect mousedownHappened = false; } else { $("#email").animate({ opacity: 0.75, width: '250px' }, 500, function(){ // callback method empty }); // hide submit button $("#submitbtn").fadeOut(400); } }); }); </code></pre> <p>But I need help to make it function properly. First I want the email to say who it's from, but currently it says nobody.</p> <p>Also I know the JS and PHP seems to override each other when it comes to the email confirmation text. So can you tell me what's best to use? And after they sign up I want the visitor to stay on the same page. Thanks.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload