how to get the code on this button to work?

Discussion in 'Programming' started by jingramm, Feb 22, 2013.

  1. jingramm

    jingramm Senior member

    Joined:
    Oct 25, 2009
    Messages:
    723
    Likes Received:
    1
    I saw it on another website and I'd like to implement something similar on mine. It's a simple email subscription form with one button to subscribe. The HTML code has
    <button class="btn" style="width:125px; height:35px;" onClick="signup.addEmail()">

    Where do I need to go to build the signup.addEmail() code and make that work?
    And any thoughts on what that code would look like?
     
  2. Markbnj

    Markbnj Elite Member <br>Moderator Emeritus
    Moderator

    Joined:
    Sep 16, 2005
    Messages:
    15,683
    Likes Received:
    3
    The 'onClick' is calling a javascript event handler called 'addEmail()' which is declared as a property of an object named 'signup', and that's about all we can tell you from this snippet. The event handler probably posts the user email address to a url for processing on the server. In order to make this work you'd need javascript, a server, some server-side code in php, perl, java, c#, etc., and a database or file system to store the users who sign up.
     
  3. jingramm

    jingramm Senior member

    Joined:
    Oct 25, 2009
    Messages:
    723
    Likes Received:
    1
    Edit:

    I figured it out. I didn't use javascript or anything, but I used a simpler PHP version to get the function working. Thanks!
     
    #3 jingramm, Feb 22, 2013
    Last edited: Feb 22, 2013
  4. tech7

    tech7 Junior Member

    Joined:
    Feb 22, 2013
    Messages:
    7
    Likes Received:
    0
    A simple implementation would be:

    HTML:
    <button class="btn" style="width:125px; height:35px;" onClick="signup.addEmail()" id="emailAddress"> 
    
    <script>
    var signup = {
        addEmail : function() {
            window.location = "addEmail.php?email=" + encodeURIComponent(document.getElementById("emailAddress").value);
        }
    };
    </script>
    This would redirect to addEmail.php with the querystring variable "email".
     
  5. jingramm

    jingramm Senior member

    Joined:
    Oct 25, 2009
    Messages:
    723
    Likes Received:
    1
    Is it possible to get each email address emailed to me instead of requiring me to go into addEmail.php file and also have the submit button change text to "Thank you" right after submitting without going to another webpage?

    Just wondering, because if not I will just keep what I implemented using PHP
     
  6. tech7

    tech7 Junior Member

    Joined:
    Feb 22, 2013
    Messages:
    7
    Likes Received:
    0
    Yes it's possible but you need to use a mix of Javascript and PHP to do that, specifically, PHP has to handle the email sending (can't be done with JS alone).

    You may have heard of AJAX. Simply put AJAX allows you to call PHP scripts (or other server side scripts) behind the scenes without making the user change page. AJAX will allow you to do what said, the process would be something like:


    • On button click: grab the email in the textbox, fire off an AJAX request (behind the scenes) to a PHP script including the email address
    • The PHP script sends the email to yourself saying that xyz has registered their email
    • The Javascript updates the button text to "Thank you". You could also disable the button at this point to help prevent duplicate submissions.
    Let me know if you want any help with the coding.