html form two buttons with two actions

Question

Hi there I have got this simple form to work and both the functionality for the update and delete working however I cannot seem to figure out a way to make them work simultaneously in the one form... here is what i am doing

<form id ='UDAssignment' method ='get' name='UDAssignment'>
<input id ='action' type ='hidden' name ='action' value ='updateMessageFromSimpleForm' />

<label for='fId'> Id </label>
<input id ="fId" type='number' name ='fId' readonly/>
<label for='fTitle'> Title </label>
<input id ="fTitle" type='text' name ='fTitle'/>
<label for='fModule'>  Module </label>
<input id ="fModule" type ='text' name ='fModule'/>
<label for='fDescription'> Description </label>
<textarea rows ='4' id ='fDescription' type ='text' name ='fDescription'> </textarea>
<label for='fDueDate'> DueDate </label>
<input id ="fDueDate" type='date' name ='fDueDate'/>
<div class ="form-group">
<div class ="controls">
<button type ="submit" class ="btn btn-primary"> Update </button>
<button type ="submit" class = btn btn-default"> Delete </button>
</div>
</div>
</form>

so basically at the moment the action to update is set i want to know how to set the action to delete to fire if i click the delete button

Answer 1

You will need to add some client-side code. Ideally it would be a separate JavaScript function with validation etc. But at a very simplest you can modify your Delete button to:

<button type ="submit" class = "btn btn-default" onclick="document.getElementById('action').value = 'deleteMessageFromSimpleForm';" > Delete </button>

Before button submits - it calls handler for click event which changes value of hidden field to new action.

Answer 2

change their functionality with javascript

<input type="button" value="update" onclick="update()" />
<input type="button" value="delete" onclick="delete()" />

javascript:

function update(){
  document.UDAssignment.action = 'updateMessageFromSimpleForm';
  document.getElementById('UDAssignment').submit();
 }
function delete(){
  document.UDAssignment.action = 'deleteMessageFromSimpleForm';
  document.getElementById('UDAssignment').submit();
 }

Answer 3

I am using php. Check the code:

<?php
        if(isset($_GET['update'])){
        echo "update";
        //update code goes here
        }
        if(isset($_GET['delete'])){
        echo "delete";
        //delete code goes here
        }
    ?>
    <form id ='UDAssignment' method ='get' name='UDAssignment' action="">
        <input id ='action' type ='hidden' name ='action' value ='updateMessageFromSimpleForm' />
        <label for='fId'> Id </label>
        <input id ="fId" type='number' name ='fId' readonly/>
        <label for='fTitle'> Title </label>
        <input id ="fTitle" type='text' name ='fTitle'/>
        <label for='fModule'>  Module </label>
        <input id ="fModule" type ='text' name ='fModule'/>
        <label for='fDescription'> Description </label>
        <textarea rows ='4' id ='fDescription' type ='text' name ='fDescription'> </textarea>
        <label for='fDueDate'> DueDate </label>
        <input id ="fDueDate" type='date' name ='fDueDate'/>
        <div class ="form-group">
        <div class ="controls">
        <button type ="submit" name="update" > Update </button>
        <button type ="submit" name="delete"> Delete </button>
        </div>
        </div>
    </form>