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

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

PM sent to you with link

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

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:

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.

Okay then. Your basic page structure looks like this:

<!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:

<!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):

<!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:

<!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
// submit.php 
$action = $_POST['action'];
echo("You pressed the '" . $action . "' button.");

Here’s a working demo.

Let me know if you have any questions.

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.

Hi there,

Adding what? I don’t quite get what you mean. Could you be more specific?

Again, I’m afraid I don’t quite understand. Which action id?

This can be done with AJAX.
Good luck.

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.

did not close a div causing one or two buttons to mess up got that resolved.

Hi,

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?

this actual script i am currently using at the moment.


&lt;?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());

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

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

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

&lt;/div&gt;
&lt;/div&gt;
&lt;!--End SMS Page --&gt;
&lt;br&gt;
&lt;br&gt;
&lt;!--New Advert Page --&gt;
				&lt;div data-role="page" id="newadvert" data-theme="b"&gt;
				&lt;form action="submit.php" method="post"&gt;
				New Advert &lt;input name="newadvert" type="text" size="160" /&gt;
				&lt;input name="newad" data-role="button" data-inline="true" type="submit" value="submit" /&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 Advert Page --&gt;
&lt;br&gt;
&lt;br&gt;
&lt;!--New Bad Word Page --&gt;
&lt;div data-role="page" id="newbadword" data-theme="b"&gt;

&lt;form action="submit.php" method="post"&gt;
				New Bad Word &lt;input name="word" type="text" size="160" /&gt;
				&lt;input name="badword" data-role="button" data-inline="true" type="submit" value="submit" /&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;/div&gt;

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

&lt;/div&gt;
&lt;!--End Remove Advert--&gt;
&lt;br&gt;
&lt;br&gt;
&lt;!--Remove Bad Word--&gt;
&lt;div data-role="page" id="removebadword" data-theme="b"&gt;
Bad Word Removal&lt;br&gt;

&lt;form action="submit.php"  method="post" id="badid"&gt;&lt;div&gt;&lt;label for="badidnum" class="select"&gt;&lt;label&gt;&lt;select name="badidnum" id="badidnum" data-mini="true"&gt;
&lt;?php
$listabadword = mysql_query("SELECT * FROM `banned`");  // List All Adverts
		while ($row = mysql_fetch_array($listabadword)) {
		echo ('&lt;option value="'.$row['id'].'"&gt;'.$row['word'].'&lt;/option&gt;'); } ?&gt;
   &lt;/select&gt;
&lt;input name="badid" 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;/div&gt;
&lt;!-- End Remove Bad Word--&gt;

	




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?

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

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.

Ok, I’ve got to go to work right now :frowning: but leave it with me and I’ll post back later on.

cheers :slight_smile: 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 :slight_smile:

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.

<!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
// submit.php
$content = $_POST['content'];
echo("A new SMS '" . $content . "' was submitted.");

Is this going in the right direction?

That looks to be perfect it submitted it to the database and displays :slight_smile: