Multiple Submit Buttons

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?

Excellent!

Let’s look at that now and carry on with the “New Advert Message” button.

The code for that currently looks like this:

<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”?

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

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.

<!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 
$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.

That code has worked :slight_smile: all fields submitted correctly i only had to alter the badword one slightly on my submit.php and it went in correctly.

Good news :slight_smile:
I’ll refactor the code this evening and post back here.
In the meantime do try and have a look at it and understand what we are doing.

shall do thank you :slight_smile: ill try get my head around it properly

Hi,

So I refactored the code a little:

<!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" class="newButtonForm"> 
          <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" class="newButtonForm"> 
        <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" class="newButtonForm"> 
        <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>
      (function(){
        function getFormValues(form){
          var $inputs = $('#' + form + ' :input'), 
              values = {};
              
          $inputs.each(function() {
            values[this.name] = this.value;
          });
          
          return $.extend(values, {sender: form});
        }
        
        function makeAjaxRequest(values){
          $.ajax({
            type : "POST",
            url : "submit.php",
            data: values,
            success : function(res) {
              $(".results").html(res);
              $("input[type=text]").val("");
            }
          });
        }
        
        $(".newButtonForm").on("submit", function(){
          var values = getFormValues(this.id);
          makeAjaxRequest(values);
  
          return false;
        });
        
        $(".back").on("click", function(){
          $(".results").html("");
        });
      })()
    </script>
  </body>
</html>

It can still be improved a bit, but let’s move on to the removing side of things.
Currently it looks like this:

&lt;!--Remove SMS--&gt; 
&lt;div data-role="page" id="removesms" data-theme="b"&gt; 
  &lt;form action="submit.php"  method="post"&gt; 
    &lt;h2&gt;SMS Removal&lt;/h2&gt;
    &lt;label for="smsid" class="select"&gt;&lt;h2&gt;Message:&lt;/h2&gt;&lt;/label&gt; 
    &lt;select name="smsid" id="smsid" data-mini="true"&gt; 
      &lt;?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 ('&lt;option value="'.$row['id'].'"&gt;'.$row['content'].'&lt;/option&gt;');
        }
      ?&gt; 
    &lt;/select&gt; 
    &lt;input name="removesms" type="submit" value="submit" data-role="button" data-inline="true" data-theme="b" /&gt;
    &lt;a href="#admin"&gt;&lt;button data-inline="true"&gt;back&lt;/button&gt;&lt;/a&gt; 
  &lt;/form&gt;
&lt;/div&gt; 
&lt;!--End Remove SMS--&gt;

It seems that when a user hits the “Remove SMS” you want to grab the last five SMSs and display them as a drop down.
Is this correct?

the extra code worked perfectly.

yeah so when a user wants to remove a sms advert or bad word it needs to submit and action the removal from the database and then refresh the page so the removed item is no longer in the dropdown

Good, good :slight_smile:

So, staying with the “Remove SMS” what should the user see in the dropdown the first time they visit the page?
The last five SMSs?

The reason I ask, is that we are going to need some test data to remove.
Could you provide an example?

check your PM i sent for the link and that has some data in there i can add words for testing.

You sure?
No PMs received, yet.

check the PM i sent you when the thread was first started if you have deleted it let me know and ill re link you

Ok, got the PM.

What I’m actually getting at is to try and understand how the removal functionality works in your app.
This is important, as it makes a difference as to how we approach the AJAX stuff.

This is how I imagine what you are trying to do:

You have a database full of SMSs.
The user visits the “Remove SMS” page and sees a list of the five most recent SMSs.
The user can then select one SMS to remove in the dropdown.
The user then presses submit.
The SMS is removed from the database.
The list is updated to show the most recent five SMSs

E.g.

There are 10 SMSs in the database with the ids 1 - 10
The user visits the page and sees SMSs 6 - 10 in the drop down.
The user selects number 7 and presses submit.
SMS number 7 is deleted from the DB.
The drop down updates to show the latest five SMSs, which would now be numbers 5, 6, 8, 9, 10

Is that correct?

that is correct.

the dropdown list is populated by a myquery and the submit button post’s the ID of the sms to the query which deletes the row with the id number out of the database

Ok then, I think the best way to proceed is like this:

Keep the PHP out of your HTML page.

Instead, we’ll create a JS function, that when the page loads (or is refreshed) submits an AJAX request to a different PHP script (“remove.php” or similar).
This script will get the latest five SMSs out of the database and assemble a bunch of <option> tags, inserting the correct information at the correct point.
This is untested, but something like this should do:

&lt;?php 
  $listsms = mysql_query("SELECT * FROM `texts` WHERE `content` IS NOT NULL AND `messagesent` = 0 LIMIT 5");
  $opts = ""
  while ($row = mysql_fetch_array($listsms)) {  
    $opts . ('&lt;option value="'.$row['id'].'"&gt;'.$row['content'].'&lt;/option&gt;');
  }
  echo $opts;

The PHP script will return this to the JS function, which will then insert it into the <select> tag.
That takes care of populating the drop down menu when the page loads.

Then, when the user selects one of these SMSs and presses submit, we can send another request to “remove.php”, including some kind of flag, so that the PHP script knows it has to delete the SMS, as well as the id of the SMS to be deleted.

Once the PHP script has deleted the SMS from the DB, it can fetch the most recent five SMSs (as above), then return that to the JavaScript.
The JavaScript can remove the now out-of-date <option> tags from the <select> tag, then, in their place, insert the current <option> tags it has received from the PHP script.
And Hey Presto! The SMS has been removed from the DB and the <select> menu has been updated on the page.

Does this sound ok to you or have I missed / overlooked anything?

currently on my submit.php i have the following


else if  ($_POST['removesms'])  {

$smsid = $_POST['smsid'];		
// Remove SMS
  $removesms = mysql_query("DELETE FROM `".$texts."` WHERE `id` = ".$smsid.";");
  echo('SMS: '.$smsid.' has been removed from the database');
}

where possible i would like to keep the php in the main index so that i only require 2 scripts for the whole admin

So you want to do everything in submit.php (as opposed to two different files)?
Apart from that is what I wrote above ok or have I missed / overlooked anything?

no everything looks spot on to me.

like i say i have similar thing in the index.php for the dropdown menu for the SMS that’s to be removed and for the removal i would just need it to post the ID to submit.php for removal and then echo the response and refresh the page so that the removed item is gone

Yeah, if we implement this for adverts, it’ll be a breeze to implement for text messages etc.
Leave it with me and I’ll post something later on.