SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 73

Hybrid View

  1. #1
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Submit Buttons

    Hi,

    I am very new to jquery and just getting started i have a page with a good few pages in it and each page has a submit button.

    How would i get it so that when each submit button it would post the data required to submit.php but retrive the HTML data from submit.php and display it in a div below the form.

    My submit buttons have the following ID's if this helps

    badword
    badid
    newad
    removeadvert
    removesms
    newsms

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    So that I can understand what you are trying to do more fully, could you post a link to a page on your site where I could see one of the forms (submit buttons)?

  3. #3
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PM sent to you with link

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    So when you click one of those buttons, you want to send an AJAX request to submit.php and display the results of that request in a <div> underneath the buttons.
    Is that correct?

  5. #5
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    So when you click one of those buttons, you want to send an AJAX request to submit.php and display the results of that request in a <div> underneath the buttons.
    Is that correct?
    Yep so when I click it the post data goes to submitt.php but the ajex injects the response from submit.php in to a div to confirm the action has completed

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ok, well normally this is quite easy to implement, but in this case there are a couple of things we need to sort out first.

    First off, your page refreshes every five seconds using this:

    Code JavaScript:
    function timedRefresh(timeoutPeriod) {
      setTimeout("location.reload(true);",timeoutPeriod);
    }

    Is there any reason you need to do this?

    Quote Originally Posted by txt3rob View Post
    i have a page with a good few pages in it and each page has a submit button.
    I now understand what you mean with this.
    You have multiple <body> tags throughout your page.
    This is invalid HTML and needs fixing.
    Is there any reason you have done this?

    Finally your HTML is full of other errors.
    You don't declare a doctype and have lots of miss-matching or stray tags.

    I can help you fix all of this.
    Is it ok if I post the source code here?
    I would remove any references to you or your website first.

  7. #7
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Ok, well normally this is quite easy to implement, but in this case there are a couple of things we need to sort out first.

    First off, your page refreshes every five seconds using this:

    Code JavaScript:
    function timedRefresh(timeoutPeriod) {
      setTimeout("location.reload(true);",timeoutPeriod);
    }

    Is there any reason you need to do this?



    I now understand what you mean with this.
    You have multiple <body> tags throughout your page.
    This is invalid HTML and needs fixing.
    Is there any reason you have done this?

    Finally your HTML is full of other errors.
    You don't declare a doctype and have lots of miss-matching or stray tags.

    I can help you fix all of this.
    Is it ok if I post the source code here?
    I would remove any references to you or your website first.
    Yeah thats fine. I put the reload in as when you click submit or go to a page it is not always the latest data from the database.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Okay then. Your basic page structure looks like this:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
    
      <body>
      </body>
    </html>
    You need all of these elements and they can appear only once.

    Meta tags and style sheets should go in the head of the page.
    Script includes at the bottom.
    We'll also get rid of the refresh function:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
      </head>
    
      <body>
      
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
      </body>
    </html>
    Then add a <form> for your buttons, but style it using CSS (not the deprecated <center> tag):

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <style>
          #myForm{ width:750px; margin: 0 auto; text-align: center;}
        </style>
      </head>
    
      <body>
        <div data-role="page" id="admin" data-theme="b">
          <form id="myForm" method="post" action="submit.php">
            <h2>SMS Display Admin</h2>
            <div>
              <a href="#newsms">
                <button data-inline="true">New SMS Message</button>
              </a>
              <a href="#removesms">
                <button data-inline="true">Remove a SMS</button>
              </a>
            </div>
            <div>
              <a href="#newadvert">
                <button data-inline="true">New Advert Message</button>
              </a>
              <a href="#removeadvert">
                <button data-inline="true">Remove a Advert</button>
              </a>
            </div>
            <div>
              <a href="#newbadword">
                <button data-inline="true">New Bad Word</button>
              </a>
              <a href="#removebadword">
                <button data-inline="true">Remove a badword</button>
              </a>
            </div>
          </form>
          <div id="results"></div>
        </div>
        
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
      </body>
    </html>
    After that you can add the AJAX functionality:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <style>
          #myForm, #result{ width:750px; margin: 0 auto; text-align: center; margin-bottom:25px;}
          
        </style>
      </head>
    
      <body>
        <div data-role="page" id="admin" data-theme="b">
          <form id="myForm" method="post" action="submit.php">
            <h2>SMS Display Admin</h2>
            <div>
              <a href="#newsms">
                <button data-inline="true" name="action" value="New SMS">New SMS Message</button>
              </a>
              <a href="#removesms">
                <button data-inline="true" name="action" value="Remove SMS">Remove a SMS</button>
              </a>
            </div>
            <div>
              <a href="#newadvert">
                <button data-inline="true" name="action" value="New Advert">New Advert Message</button>
              </a>
              <a href="#removeadvert">
                <button data-inline="true" name="action" value="Remove Advert">Remove a Advert</button>
              </a>
            </div>
            <div>
              <a href="#newbadword">
                <button data-inline="true" name="action" value="New Bad Word">New Bad Word</button>
              </a>
              <a href="#removebadword">
                <button data-inline="true" name="action" value="Remove Bad Word">Remove a badword</button>
              </a>
            </div>
          </form>
          
          <div id="result"></div>
        </div>
        
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script>
          $("button").on("click", function(e) {
            e.preventDefault();
            var action = this.value;
            $.ajax({
              type : "POST",
              url : "submit.php",
              data: "action=" + action,
              success : function(res) {
                $("#result").html(res);
              }
            });
          });
        </script>
      </body>
    </html>
    Whenever any of the buttons are pressed, the form's submit action is prevented and instead a POST request is sent to "submit.php".

    Whatever is returned by the PHP script is displayed within the "result" div.

    PHP Code:
    <?php
    // submit.php 
    $action $_POST['action'];
    echo(
    "You pressed the '" $action "' button.");
    Here's a working demo.

    Let me know if you have any questions.

  9. #9
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i found that by adding this it actually did not perform the post with the correct data so i have had to revert.

    I am going to go over your code tonight and try again to see where i had gone wrong as i can not add the action id as this will mess up the post data that is required i did use firebug to check and it did not seem to post the data.

    I am also faced with another issue that when the data has been submitted i will need to refresh the page as some of the drop downs are pulled from mysql and do not update once they have been removed from the DB due to the page being all in one.

    Thank you for the assistance i will now try use the demo to see where i get to.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by txt3rob View Post
    i found that by adding this it actually did not perform the post with the correct data so i have had to revert.
    Adding what? I don't quite get what you mean. Could you be more specific?

    Quote Originally Posted by txt3rob View Post
    i can not add the action id as this will mess up the post data that is required i did use firebug to check and it did not seem to post the data.
    Again, I'm afraid I don't quite understand. Which action id?

    Quote Originally Posted by txt3rob View Post
    I am also faced with another issue that when the data has been submitted i will need to refresh the page as some of the drop downs are pulled from mysql and do not update once they have been removed from the DB due to the page being all in one.
    This can be done with AJAX.
    Good luck.

  11. #11
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I tried to modify the page with bits from the example you had given but i could not get it to post the correct data as I need the ajax post on the submit buttons not the navigation buttons.

    I've now tried to w3c validate the page and messed it up some how with 2 of the buttons not working now for the navigation.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by txt3rob View Post
    Sorry I tried to modify the page with bits from the example you had given but i could not get it to post the correct data as I need the ajax post on the submit buttons not the navigation buttons.
    Well, it shouldn't be too difficult to sort out, but first we need to agree on the HTML (and CSS) you will be using.
    Could you post it here?

  13. #13
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did not close a div causing one or two buttons to mess up got that resolved.

  14. #14
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this actual script i am currently using at the moment.

    PHP Code:
    <?php
    require_once('../config.php');
    //establish a connection to the database
    $dbhandle mysql_connect($hostname$username$password)
     or die(
    "Unable to connect to MySQL"mysql_error());
     
    //select a database to work with
    $selected mysql_select_db($dbname,$dbhandle)
      or die(
    mysql_error());

    ?>
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>SMS Display Admin</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <style type="text/css">
        div {text-align: center}
        </style>
        
      </head><div data-role="page" id="admin" data-theme="b">

    <h2>SMS Display Admin</h2>
    <div>
              <a href="#newsms">
                <button data-inline="true">New SMS Message</button>
              </a>
              <a href="#removesms">
                <button data-inline="true">Remove a SMS</button>
              </a>
            </div>
            <div>
              <a href="#newadvert">
                <button data-inline="true">New Advert Message</button>
              </a>
              <a href="#removeadvert">
                <button data-inline="true">Remove a Advert</button>
              </a>
            </div>
            <div>
              <a href="#newbadword">
                <button data-inline="true">New Bad Word</button>
              </a>
              <a href="#removebadword">
                <button data-inline="true">Remove a badword</button>
              </a>
            </div>
    <h2>Created By Robert Wiggins / txt3rob</h2>
    </div>
    <!--New SMS Page -->

    <div data-role="page" id="newsms" data-theme="b">
    <div id="SMSinput">
    <form action="submit.php" method="post">
    <label for="basic"><h2>SMS Input:</h2></label>
    <input name="content" type="text" size="160" data-mini="true" />
                    <input type="hidden" name="sender" value="4477777777777">
                    <input type="hidden" name="inNumber" value="447786202125">
                    <input type="hidden" name="email" value="none">
                    <input type="hidden" name="credits" value="2501">
                    <input type="hidden" name="forward" value="0">
                    <input type="hidden" name="messagesent" value="0">
                    <div><input name="newsms" data-role="button" data-inline="true" type="submit" value="submit" /></form><a href="#admin"><button data-inline="true">back</button></a></div>

    </div>
    </div>
    <!--End SMS Page -->
    <br>
    <br>
    <!--New Advert Page -->
                    <div data-role="page" id="newadvert" data-theme="b">
                    <form action="submit.php" method="post">
                    New Advert <input name="newadvert" type="text" size="160" />
                    <input name="newad" data-role="button" data-inline="true" type="submit" value="submit" />
                    <a href="#admin"><button data-inline="true">back</button></a>
                    </form>
                    </div>
                
    <!--End Advert Page -->
    <br>
    <br>
    <!--New Bad Word Page -->
    <div data-role="page" id="newbadword" data-theme="b">

    <form action="submit.php" method="post">
                    New Bad Word <input name="word" type="text" size="160" />
                    <input name="badword" data-role="button" data-inline="true" type="submit" value="submit" /><a href="#admin"><button data-inline="true">back</button></a>
            </form>
    </div>

    </div>

    <!--End Bad Word Page -->
    <br>
    <br>
    <!--Remove SMS-->
    <div data-role="page" id="removesms" data-theme="b">
    <form action="submit.php"  method="post">
    SMS Removal
    <label for="smsid" class="select">Message:</label>
    <select name="smsid" id="smsid" data-mini="true">
    <?php
    $listsms 
    mysql_query("SELECT * FROM `texts` WHERE `content` IS NOT NULL AND `messagesent` = 0 LIMIT 5");  //Grab 5 messages to display
            
    while ($row mysql_fetch_array($listsms)) { 
            echo (
    '<option value="'.$row['id'].'">'.$row['content'].'</option>'); } ?>
       </select>
    <input name="removesms" type="submit" value="submit" data-role="button" data-inline="true" data-theme="b" /><a href="#admin"><button data-inline="true">back</button></a>
      </form> </div>

      <!--End Remove SMS-->
    <br>
    <br>
    <!--Remove advert-->
    <div data-role="page" id="removeadvert" data-theme="b">
    Advert Removal
    <form action="submit.php"  method="post">
    <label for="advertid" class="select"></label>
    <select name="advertid" id="advertid" data-mini="true">
    <?php
    $listadverts 
    mysql_query("SELECT * FROM `adverts` WHERE `expired` = 0");  // List All Adverts
            
    while ($row mysql_fetch_array($listadverts)) { 
            echo (
    '<option value="'.$row['advertid'].'">'.$row['adcontent'].'</option>'); } ?>
       </select>
       <div>
    <input name="removeadvert" type="submit" value="submit" data-role="button" data-inline="true" data-theme="b" /></form><a href="#admin"><button data-inline="true">back</button></a>
       </div></div>
      
    </div>
    <!--End Remove Advert-->
    <br>
    <br>
    <!--Remove Bad Word-->
    <div data-role="page" id="removebadword" data-theme="b">
    Bad Word Removal<br>

    <form action="submit.php"  method="post" id="badid"><div><label for="badidnum" class="select"><label><select name="badidnum" id="badidnum" data-mini="true">
    <?php
    $listabadword 
    mysql_query("SELECT * FROM `banned`");  // List All Adverts
            
    while ($row mysql_fetch_array($listabadword)) { 
            echo (
    '<option value="'.$row['id'].'">'.$row['word'].'</option>'); } ?>
       </select>
    <input name="badid" type="submit" value="submit" data-role="button" data-inline="true" data-theme="b" /><a href="#admin"><button data-inline="true">back</button></a></form></div></div>
    <!-- End Remove Bad Word-->

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ok, so you have a page with various buttons and with various forms.
    Instead of trying to tackle everything at once, let's isolate one of the forms and concentrate on that.
    Let's go with the "SMS input" form. What should happen when you submit that?

    Also, your HTML is better, but still has lots of stray and unclosed tags.
    You are also missing your opening and closing <body> tags.

    This would be the code we would initially focus on.
    I have removed the database connection code for the time being.
    We can reinstate it once we get the AJAX functionality working.
    Is that ok?

    Code:
    <!DOCTYPE HTML> 
    <html> 
      <head> 
        <meta charset="utf-8"> 
        <title>SMS Display Admin</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
        <style type="text/css"> 
        	div {text-align: center} 
        </style> 
      </head>
      
      <body>
        <div data-role="page" id="admin" data-theme="b"> 
          <h2>SMS Display Admin</h2> 
          <div> 
            <a href="#newsms"><button data-inline="true">New SMS Message</button></a> 
            <a href="#removesms"><button data-inline="true">Remove a SMS</button></a> 
          </div> 
          <div> 
            <a href="#newadvert"><button data-inline="true">New Advert Message</button></a> 
            <a href="#removeadvert"><button data-inline="true">Remove a Advert</button></a> 
          </div> 
          <div> 
            <a href="#newbadword"><button data-inline="true">New Bad Word</button></a> 
            <a href="#removebadword"><button data-inline="true">Remove a badword</button></a> 
          </div> 
        </div> 
        
        <!--New SMS Page --> 
        <div data-role="page" id="newsms" data-theme="b"> 
          <div id="SMSinput"> 
            <form action="submit.php" method="post"> 
              <label for="basic"><h2>SMS Input:</h2></label> 
              <input name="content" type="text" size="160" data-mini="true" /> 
              <input type="hidden" name="sender" value="4477777777777"> 
              <input type="hidden" name="inNumber" value="447786202125"> 
              <input type="hidden" name="email" value="none"> 
              <input type="hidden" name="credits" value="2501"> 
              <input type="hidden" name="forward" value="0"> 
              <input type="hidden" name="messagesent" value="0"> 
              <input name="newsms" data-role="button" data-inline="true" type="submit" value="submit" />
            </form>
            <a href="#admin"><button data-inline="true">back</button></a>
          </div> 
        </div> 
        <!--End SMS Page --> 
      </body>
    </html>

  16. #16
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah that's brill thanks for helping.

    With the SMS input i would like all them fields to be posted to submit.php and it echo back the html from submit php which will be new sms "whatever was submitted" has been added to the data base.

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ok, I've got to go to work right now but leave it with me and I'll post back later on.

  18. #18
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers as a note all data i want to be showed is echo'd in the submit.php file and the drop down tables for the removing pages need to refresh once submitted as this will show it's been removed

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I'm back again.
    I wrote a bit of code top do what you want.
    When you press the "New SMS" button, you are taken to the new SMS form.
    Here you enter your message and press "Submit".
    The script will get the values of all form fields (including the hidden ones) and send them to submit.php
    submit.php echoes one of the values back at you, but in reality you would do all of your data processing here.

    Here's a demo.

    Code:
    <!DOCTYPE HTML> 
    <html> 
      <head> 
        <meta charset="utf-8"> 
        <title>SMS Display Admin</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
        <style type="text/css"> 
          div {text-align: center}
          #result { margin-top: 15px; }
        </style> 
      </head>
      
      <body>
        <div data-role="page" id="admin" data-theme="b"> 
          <h2>SMS Display Admin</h2> 
          <div> 
            <a href="#newsms"><button data-inline="true">New SMS Message</button></a> 
            <a href="#removesms"><button data-inline="true">Remove a SMS</button></a> 
          </div> 
          <div> 
            <a href="#newadvert"><button data-inline="true">New Advert Message</button></a> 
            <a href="#removeadvert"><button data-inline="true">Remove a Advert</button></a> 
          </div> 
          <div> 
            <a href="#newbadword"><button data-inline="true">New Bad Word</button></a> 
            <a href="#removebadword"><button data-inline="true">Remove a badword</button></a> 
          </div> 
        </div> 
        
        <!--New SMS Page --> 
        <div data-role="page" id="newsms" data-theme="b"> 
          <div id="SMSinput"> 
            <form action="submit.php" method="post" id="newSMSForm"> 
              <label for="basic"><h2>SMS Input:</h2></label> 
              <input name="content" type="text" size="160" data-mini="true" /> 
              <input type="hidden" name="sender" value="4477777777777"> 
              <input type="hidden" name="inNumber" value="447786202125"> 
              <input type="hidden" name="email" value="none"> 
              <input type="hidden" name="credits" value="2501"> 
              <input type="hidden" name="forward" value="0"> 
              <input type="hidden" name="messagesent" value="0"> 
              <input name="newsms" data-role="button" data-inline="true" type="submit" value="submit" />
            </form>
            <a href="#admin" class="back"><button data-inline="true">back</button></a>
          </div> 
          
          <div id="result"></div>
        </div> 
        <!--End SMS Page -->
        
        
        <script>
          $("#newSMSForm").on("submit", function(e){
            
            var $inputs = $('#newSMSForm :input'), 
                values = {};
            $inputs.each(function() {
              values[this.name] = this.value;
            });
            
            $.ajax({
              type : "POST",
              url : "submit.php",
              data: values,
              success : function(res) {
                $("#result").html(res);
                $("input[type=text]").val("");
              }
            });
            
            return false;
          });
          
          $(".back").on("click", function(){
            $("#result").html("");
          });
        </script>
      </body>
    </html>
    PHP Code:
    <?php 
    // submit.php
    $content $_POST['content'];
    echo(
    "A new SMS '" $content "' was submitted.");
    Is this going in the right direction?

  20. #20
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would i need to put the ajax on each page i.e for new advert and new bad word and change the #page references to do for the others?

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by txt3rob View Post
    That looks to be perfect it submitted it to the database and displays
    Excellent!

    Quote Originally Posted by txt3rob View Post
    would i need to put the ajax on each page i.e for new advert and new bad word and change the #page references to do for the others?
    Let's look at that now and carry on with the "New Advert Message" button.

    The code for that currently looks like this:

    Code:
    <div data-role="page" id="newadvert" data-theme="b"> 
       <form action="submit.php" method="post"> 
        New Advert <input name="newadvert" type="text" size="160" /> 
        <input name="newad" data-role="button" data-inline="true" type="submit" value="submit" /> 
        <a href="#admin"><button data-inline="true">back</button></a> 
      </form> 
    </div>
    What should happen when the user clicks the "New Advert Message" button, enters some text and then presses "Submit"?

  22. #22
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks to be perfect it submitted it to the database and displays

  23. #23
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i would like the same sort of thing just at the bottom it says Advert: $newadvert has been added to the database.

    once that is done then i will do the same for the bad word and then it's just on to the dropdowns that pull data from the database so when they are submitted it refresh's and says what ever has been removed

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Okay, well here's the code for the new sms, new advert and new bad word.
    Have a look at what I have done and see if there is anything you don't understand.

    Code:
    <!DOCTYPE HTML> 
    <html> 
      <head> 
        <meta charset="utf-8"> 
        <title>SMS Display Admin</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
        <style type="text/css"> 
          div {text-align: center}
          .results { margin-top: 15px; }
        </style> 
      </head>
      
      <body>
        <div data-role="page" id="admin" data-theme="b"> 
          <h2>SMS Display Admin</h2> 
          <div> 
            <a href="#newsms"><button data-inline="true">New SMS Message</button></a> 
            <a href="#removesms"><button data-inline="true">Remove a SMS</button></a> 
          </div> 
          <div> 
            <a href="#newadvert"><button data-inline="true">New Advert Message</button></a> 
            <a href="#removeadvert"><button data-inline="true">Remove a Advert</button></a> 
          </div> 
          <div> 
            <a href="#newbadword"><button data-inline="true">New Bad Word</button></a> 
            <a href="#removebadword"><button data-inline="true">Remove a badword</button></a> 
          </div> 
        </div> 
        
        <!--New SMS Page --> 
        <div data-role="page" id="newsms" data-theme="b"> 
          <div id="SMSinput"> 
            <form action="submit.php" method="post" id="newSMSForm"> 
              <label for="newsms"><h2>SMS Input:</h2></label> 
              <input name="content" type="text" size="160" data-mini="true" id="newsms"/> 
              <input type="hidden" name="sender" value="4477777777777"> 
              <input type="hidden" name="inNumber" value="447786202125"> 
              <input type="hidden" name="email" value="none"> 
              <input type="hidden" name="credits" value="2501"> 
              <input type="hidden" name="forward" value="0"> 
              <input type="hidden" name="messagesent" value="0"> 
              <input name="newsms" data-role="button" data-inline="true" type="submit" value="submit" />
            </form>
            <a href="#admin" class="back"><button data-inline="true">Back</button></a>
          </div> 
          <div class="results"></div>
        </div> 
        <!--End SMS Page -->
        
        <!--New Advert Page --> 
        <div data-role="page" id="newadvert" data-theme="b"> 
          <form action="submit.php" method="post" id="newAdvertForm"> 
            <label for="newadvert"><h2>New Advert:</h2></label> 
            <input name="newadvert" type="text" size="160" id="newadvert" /> 
            <input name="newad" data-role="button" data-inline="true" type="submit" value="submit" /> 
          </form> 
          <a href="#admin" class="back"><button data-inline="true">Back</button></a>
          <div class="results"></div>
        </div> 
        <!--End Advert Page --> 
        
        <!--New Bad Word Page --> 
        <div data-role="page" id="newbadword" data-theme="b"> 
          <form action="submit.php" method="post" id="newBadWordForm"> 
            <label for="newbadword"><h2>New Bad Word:</h2></label> 
            <input name="newbadword" type="text" size="160" id="newbadword" /> 
            <input name="badword" data-role="button" data-inline="true" type="submit" value="submit" />
          </form> 
          <a href="#admin" class="back"><button data-inline="true">Back</button></a>
          <div class="results"></div>
        </div> 
        <!--End Bad Word Page -->
        
        <script>
          $("#newSMSForm").on("submit", function(e){
            
            var $inputs = $('#newSMSForm :input'), 
                values = {};
            $inputs.each(function() {
              values[this.name] = this.value;
            });
            values.sender = "newSMSForm";
            
            $.ajax({
              type : "POST",
              url : "submit.php",
              data: values,
              success : function(res) {
                console.log(res);
                $(".results").html(res);
                $("input[type=text]").val("");
              }
            });
            
            return false;
          });
          
          $("#newAdvertForm").on("submit", function(e){
            var $inputs = $('#newAdvertForm :input'), 
                values = {};
            $inputs.each(function() {
              values[this.name] = this.value;
            });
            values.sender = "newAdvertForm";
            
            $.ajax({
              type : "POST",
              url : "submit.php",
              data: values,
              success : function(res) {
                $(".results").html(res);
                $("input[type=text]").val("");
              }
            });
            
            return false;
          });
          
          $("#newBadWordForm").on("submit", function(e){
            var $inputs = $('#newBadWordForm :input'), 
                values = {};
            $inputs.each(function() {
              values[this.name] = this.value;
            });
            values.sender = "newBadWordForm";
            
            $.ajax({
              type : "POST",
              url : "submit.php",
              data: values,
              success : function(res) {
                $(".results").html(res);
                $("input[type=text]").val("");
              }
            });
            
            return false;
          });
          
          $(".back").on("click", function(){
            $(".results").html("");
          });
        </script>
      </body>
    </html>
    PHP Code:
    <?php 
    $sender 
    $_POST['sender'];

    switch(
    $sender){
      case 
    "newSMSForm":
        
    $content $_POST['content'];
        
    $retVal "A new SMS '" $content "' was submitted.";
        break;
      case 
    "newAdvertForm":
        
    $advert $_POST['newadvert'];
        
    $retVal "Advert: '" $advert "' has been added to the database.";
        break;
      case 
    "newBadWordForm":
        
    $badword $_POST['newbadword'];
        
    $retVal "Bad word: '" $badword "' has been added to the database.";
        break;
    }

    echo 
    $retVal;
    I have also updated the demo.

    IMPORTANT:
    There is a lot of duplication here and, as it is, this is bad code.
    Let me know if this all makes sense to you and works as you desire, then the next step will be to tidy this code up.

  25. #25
    SitePoint Zealot txt3rob's Avatar
    Join Date
    Jul 2013
    Location
    Liverpool UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That code has worked all fields submitted correctly i only had to alter the badword one slightly on my submit.php and it went in correctly.


Bookmarks

Posting Permissions

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