Multiple Submit Buttons

txt3rob · September 13, 2013, 10:46am

nice one thanks for you support

James_Hibbard · September 14, 2013, 12:18pm

So then, this is a bit more complicated than the previous examples, but here we go:

<!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="ajaxForm" data-action="new"> 
          <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="ajaxForm" data-action="new"> 
        <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="ajaxForm" data-action="new"> 
        <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 -->
    
    <!--Remove SMS--> 
    <div data-role="page" id="removesms" data-theme="b"> 
      <form action="submit.php"  method="post" id="removeSMSForm" class="ajaxForm" data-action="remove"> 
        <h2>SMS Removal</h2>
        <label for="smsid" class="select"><h2>Message:</h2></label> 
        <select name="smsid" id="smsid" data-mini="true"></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-->  
       
    <script>
      (function(){
        function populateDropdown(values){
          $.extend(values, {sender: "removeSMSForm"});
          makeAjaxRequest(values, function(res){
            $("#smsid").html(res).selectmenu("refresh");
          });
        }
        
        function getFormValues(form){
          var $inputs = $('#' + form + ' :input'), 
              values = {};
              
          $inputs.each(function() {
            values[this.name] = this.value;
          });
          
          return $.extend(values, {sender: form});
        }
        
        function makeAjaxRequest(values, callBack){
          $.ajax({
            type : "POST",
            url : "submit.php",
            data: values,
            success : function(res) {
              callBack(res);
            }
          });
        }
        
        $(".ajaxForm").on("submit", function(){
          var values = getFormValues(this.id),
              action = $(this).data("action"),
              callBack;
              
          if(action === "new"){
            callBack = function(res){
              $(".results").html(res);
              $("input[type=text]").val("");
            }
          } else {
            callBack = function(res){
              populateDropdown(values);
            }
          }
          
          makeAjaxRequest(values, callBack)
          return false;
        });
        
        $(".back").on("click", function(){
          $(".results").html("");
        });
        
        populateDropdown({});
      })()
    </script>
  </body>
</html>

<?php 
// Establish database connection here

$sender = $_POST['sender'];
$sms = array(
  "0" => "SMS 1", 
  "1" => "SMS 2",
  "2" => "SMS 3",
  "3" => "SMS 4",
  "4" => "SMS 5"
);

function getLastFiveSMS(){
  global $sms;
  $retVal = "<option></option>";
  foreach ($sms as $k => $v){
    $retVal .= "<option value='" . $k . "'>" . $v . "</option>";
  }
  return $retVal;
}


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;
  case "removeSMSForm":
    $smsid = $_POST['smsid'];
    if (isset($smsid)){
      global $sms;
      unset($sms[$smsid]);
    }
    $retVal = getLastFiveSMS();
}

echo $retVal;

This all works as previously discussed, the only difference being in submit.php I have just made an array with five elements.
Initially the form is populated with these five SMSs. If the user selects an SMS from the dropdown and submits the form, then this SMS is removed from the menu.

Obviously where I am doing all of this nonsense with arrays, you would do your database manipulation etc.

I’ve also updated the demo.

txt3rob · September 16, 2013, 10:14am

Cheers i will review the code and hopefully get it all sorted thank you very much for your help!!

James_Hibbard · September 16, 2013, 10:44am

No probs
Let me know if you need any help implementing it for the final two buttons - it can be optimized in the same way as the previous code (for the new buttons).

txt3rob · September 16, 2013, 12:48pm


!--Remove SMS--&gt;
&lt;div data-role="page" id="removesms" data-theme="b"
&lt;form action="submit.php"  method="post" id="removeSMSForm" class="ajaxForm" data-action="remove"&gt;
SMS Removal
&lt;label for="smsid" class="select"&gt;Message:&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;

the dropdown isnt getting the content not sure what i’ve done wrong

James_Hibbard · September 16, 2013, 12:55pm

You need to do the database lookup on the server and return the HTML for the select tag to the JavaScript.

txt3rob · September 16, 2013, 12:57pm

i think i have an idea ill try updating the site again and see if i am right in the issue

James_Hibbard · September 16, 2013, 1:02pm

Yeah, no problem.
Let me know how you get on.

txt3rob · September 16, 2013, 1:16pm

i need to put the sql query in to submit.php don’t i now?

James_Hibbard · September 17, 2013, 7:02am

Yup.
I’m a bit busy today, but if you’re stuck, I can have a look at this later for you.

txt3rob · September 17, 2013, 12:08pm

No Worries when i get a free moment ill have another look over the code to resolve it.

got another project come up now but I am sure i can work it out

txt3rob · September 19, 2013, 10:58am

i am trying to change the array to a mysql_query ignore it’s not a pdo query for now but any ideas how to resolve it.


$sms =  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($sms)) {
		
		

function getLastFiveSMS(){
  global $sms;
  $retVal = "&lt;option&gt;&lt;/option&gt;";
  foreach ($sms as $k =&gt; $v){
    $retVal .= "&lt;option value='" . $k . "'&gt;" . $v . "&lt;/option&gt;";
  }
  return $retVal;
}

James_Hibbard · September 21, 2013, 12:40pm

Hi,

I would do it like this:

<?php 
try {
  $conn = new PDO('mysql:host=localhost;dbname=test', 'user', 'password');
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
  echo 'ERROR: ' . $e->getMessage();
}

$sender = $_POST['sender'];

function getLastFiveSMS($conn){
  $stmt = $conn->prepare('SELECT * FROM texts WHERE content IS NOT NULL AND messagesent = 0 LIMIT 5');
  $stmt->execute();
  $options = "";
  
  while($row = $stmt->fetch()) {
    $options .= "<option value='" . $row["id"] . "'>" . $row["content"] . "</option>";
  }
  
  return $options;
}

function deleteSMS($id, $conn){
  $stmt = $conn->prepare('DELETE FROM texts WHERE id = :id');
  $stmt->execute(array('id' => $id));
}

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;
  case "removeSMSForm":
   $smsid = $_POST['smsid'];
   if (isset($smsid)){
     deleteSMS($smsid, $conn);
   }
   $retVal = getLastFiveSMS($conn);
}

echo $retVal;

Does that help?

James_Hibbard · September 22, 2013, 12:17pm

Hi again,

I just realised that when you click the buttons (to remove an SMS or whatever, they remain in a “pressed” state).
I don’t know if this is a bug in jQuery UI (similar bug report) or desired behaviour.
You are however using a rather old version of jQuery UI, so I just wrote a function to sort this out.

Here’s the complete 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" class="ajaxForm" data-action="new"> 
          <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="ajaxForm" data-action="new"> 
        <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="ajaxForm" data-action="new"> 
        <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 -->
    
    <!--Remove SMS--> 
    <div data-role="page" id="removesms" data-theme="b"> 
      <form action="submit.php"  method="post" id="removeSMSForm" class="ajaxForm" data-action="remove"> 
        <h2>SMS Removal</h2>
        <label for="smsid" class="select"><h2>Message:</h2></label> 
        <select name="smsid" id="smsid" data-mini="true"></select>        
        <input id="removeSmsButton"name="removesms" type="submit" value="submit" data-role="button" data-inline="true" data-theme="b" />
      </form> 
      <a href="#admin" class="back"><button data-inline="true">Back</button></a>
      <div class="results"></div>
    </div> 
    <!--End Remove SMS-->  
       
    <script>
      (function(){
        function populateDropdown(values){
          $.extend(values, {sender: "removeSMSForm"});
          makeAjaxRequest(values, function(res){
            $("#smsid").html(res).selectmenu("refresh");
          });
        }
        
        function getFormValues(form){
          var $inputs = $('#' + form + ' :input'), 
              values = {};
              
          $inputs.each(function() {
            values[this.name] = this.value;
          });
          
          return $.extend(values, {sender: form});
        }
        
        function makeAjaxRequest(values, callBack){
          $.ajax({
            type : "POST",
            url : "submit.php",
            data: values,
            success : function(res) {
              callBack(res);
            }
          });
        }
        
        function removeActiveButton(){
          $(".ui-btn-active").each(function(){
            $(this).removeClass("ui-btn-active");
          });
        }
        
        $(".ajaxForm").on("submit", function(){
          var values = getFormValues(this.id),
              action = $(this).data("action"),
              callBack;
              
          if(action === "new"){
            callBack = function(res){
              $(".results").html(res);
              $("input[type=text]").val("");
              removeActiveButton();
            }
          } else {
            callBack = function(res){
              populateDropdown(values);
              removeActiveButton();
            }
          }
          
          makeAjaxRequest(values, callBack)
          return false;
        });
        
        $(".back").on("click", function(){
          $(".results").html("");
        });
        
        populateDropdown({});
      })()
    </script>
  </body>
</html>

<?php 
try {
    $conn = new PDO('mysql:host=localhost;dbname=test', 'user', 'password');
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}

$sender = $_POST['sender'];

function getLastFiveSMS($conn){
  $stmt = $conn->prepare('SELECT * FROM texts WHERE content IS NOT NULL AND messagesent = 0 LIMIT 5');
  $stmt->execute();
  $options = "";
  
  while($row = $stmt->fetch()) {
    $options .= "<option value='" . $row["id"] . "'>" . $row["content"] . "</option>";
  }
  
  return $options;
}

function deleteSMS($id, $conn){
  $stmt = $conn->prepare('DELETE FROM texts WHERE id = :id');
  $stmt->execute(array('id' => $id));
}

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;
  case "removeSMSForm":
   $smsid = $_POST['smsid'];
   if (isset($smsid)){
     deleteSMS($smsid, $conn);
   }
   $retVal = getLastFiveSMS($conn);
}

echo $retVal;

I also updated the demo to work off of a database.
I inserted 10 SMSs into the database and you can delete them from the drop down - try it out!

HTH

txt3rob · September 23, 2013, 8:12am

ah cheers i can always update jquery that isnt a problem

txt3rob · September 23, 2013, 8:19am

im going to have to host this site my self the current host (a friend) doesnt have the PDO extension installed got to love having a VPS

txt3rob · September 23, 2013, 8:56am

i’ve moved the site now but i am now adding functions for delete badword and advert.

James_Hibbard · September 23, 2013, 8:57am

Good stuff.
Let me know if you run into any trouble.

txt3rob · September 23, 2013, 9:28am

for the dropdown menu’s do i need to change anything of the jquery as i had added the adverts in a similar fashion to the remove sms and it does not appear to dropdown.

txt3rob · September 23, 2013, 9:30am

i implemented the following:


function getadverts($conn){
  $stmt = $conn->prepare('SELECT * FROM adverts');
  $stmt->execute();
  $options = "";

  while($row = $stmt->fetch()) {
    $options .= "<option value='" . $row["advertid"] . "'>" . $row["adcontent"] . "</option>";
  }

  return $options;
}

i also added downbelow


case "removeAdvert":
   $advertid = $_POST['advertid'];
   if (isset($advertid)){
     deleteAdvert($advertid, $conn);
   }
   $retVal = getadverts($conn);
}

echo $retVal;