How to call php function on a form button using javascript

JavaScript
1

I am sure this has been asked hundreds of times but i can’t findanything useful anywhere even after looking for about a week.

What I want to do is have a form with several buttons on it such as “add”, “delete”, “edit” and “save”. They will all be normal buttons not submit buttons.

I have a php function that does the database stuff for each button action but I need to know how I would call that function depending on which button was clicked.

I am sure that I would use a javascript onclick function call on each of the buttons to call a javascript function but how would i call the php function from the javascript? I have looked at ajax and everyone keeps showing the basic functions on making a request but i can’t see anything about calling a php function.

Does anyone know how i could achieve what i am trying to do?

2

Hi AdRock952
One option would be to make the buttons submit, then change the form action property, with an onclick trigger.
See http://projectwownow.blogspot.com/2008/07/enable-html-form-to-submit-to-multiple.html for an example
Hope this helps

3

Or, if you want to leave them as buttons and not make them submit you could do the following

on your button have the following trigger

<input type="button" id="myButton" title="my button" onclick="performAction('edit');" />

then before your closing </form> tag have a hidden field called action, like so

<input type="hidden" id="action" name="action"  value="" />

then a javascript function as follows


function performAction(action)
   {
      // ASSIGN THE ACTION
      var action = action;

      // UPDATE THE HIDDEN FIELD
      document.getElementById("action").value = action;

      // SUBMIT THE FORM
      document.nameOfYourForm.submit();
   }

Then obv make sure that the action of your form is the relevant php script. which then does the following


if($_POST && array_key_exists("action", $_POST)){

  // CARRY OUT SANITIZATION AND DATA VALIDATION HERE!!!!!!!!!

  // CARRY OUT RELAVANT ACTION
  switch($_POST['action'])
   {
      case "edit":
        editRecord();
      break;
      case "add":
        addRecord();
      break;
      case "delete":
        deleteRecord();
      break;
      case "save":
        saveRecord();
      break;
   }
}

Hope this helps

Cheers
Rob

4

Many thanks chaps for your replies :slight_smile:

I tried your example neron as it made sense to me how it would work but i get a javascript error on document.adminform.submit();

Here is my form if you can see what is wrong

<script type="text/javascript">
			function performAction(action) {
				// ASSIGN THE ACTION
				var action = action;
				
				// UPDATE THE HIDDEN FIELD
				document.getElementById("action").value = action;
				
				// SUBMIT THE FORM
				document.adminform.submit();
			}
		</script>

<form id="adminform" action="#" method="post">
			<input type="button" class="delete-event" id="deletebutton" title="delete" onclick="performAction('delete');" />
			<input type="button" class="archive-event" id="archivebutton" title="archive" onclick="performAction('archive');" />
			<input type="button" class="edit-event" id="editbutton" title="edit" onclick="performAction('edit');" />
			<input type="button" class="add-event" id="addbutton" title="add" onclick="performAction('add');" />
							
			</table>
			<input type="hidden" id="action" name="action"  value="" />
		</form>

My other question is that I have a file with all the php functions and i include that at the top of the page. Will it find these functions when it works?

5

Hi AdRock952,

The reason that is not working for you is because you need to change this line


<form id="adminform" action="#" method="post">

to this:


<form id="adminform" name="adminform" action="yourphpscripthere.php" method="post">

For some reason only FF and other standards compliant browsers can submit forms using their ID’s. IE does not like it and requires a name attribute.

Yes it should do provided you use the PHP code I provided you with in my original post. So you would have my php code at the top of your included file then all your functions below. :slight_smile:

Hope this helps

Regards
Rob

6

Many thanks Neron

This does exactly what I wanted to do and in so little code. You have saved me a massive headache and a lot of time :smiley:

7

No problem AdRock952,

Glad to be of help! :smiley: