Getting the value of a clicked button and a hidden input

davidgm
davidgm used Ask the Experts™
on
I have a simple form with three values like this:

<form id="deleteRecordForm" name="deleteRecordForm" action="deleteRecord.php" method="POST">"
<input type="hidden" id="recordID" name="recordID" value="<?php echo $recordID ?>">"
<button type="submit" id="delete" value="delete">Delete</button>
<button type="submit" id="cancel" value="cancel">Cancel</button>
</form>
                  
I am trying to use ajax/jquery without success to retrieve the value of the hidden input and the value of the clicked button. Using these two values I would like to either delete a record or abort the operation using php. The recordID will serve identify the record and the value of the clicked button to either delete or abort the operation.

You quick response is deeply appreciated.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I would do that this way:
<script>
$( "form" ).on( "submit", function( ev ) { ev.preventDefault(); });
var hndlr = function( ev ) {
    var payload = $( "#recordID" ).serialize() + "&clicked=" + $( this ).attr( "value" );
    $.post( $( "form" ).attr( "action" ), payload );
}

$("#delete").on( "click", hndlr );
$("#cancel").on( "click", hndlr );

</script>

Open in new window

Author

Commented:
I put the code in a js file

<script type="text/javascript" src="deleteMyRecord.js"></script> and

replaced "form" in the code with "deleteRecordForm".

In Firefox it launches the php file deleteMyRecord.php (bypassing the js file). Any ideas?
Post your files here?
Why Diversity in Tech Matters

Kesha Williams, certified professional and software developer, explores the imbalance of diversity in the world of technology -- especially when it comes to hiring women. She showcases ways she's making a difference through the Colors of STEM program.

Author

Commented:
FORM:

<div style=\"color:red;\"><strong>Are you sure you want to delete the record?</strong></div>
<form id="deleteRecordForm" name="deleteRecordForm" action="deleteMyRecord.php" method="POST">
<input type="hidden" id="recordID" name="recordID" value="$courseID"/>
<button type="submit" id="delete" value="delete">Delete</button>
<button type="submit" id="cancel" value="cancel">Cancel</button>



js File:

$( "deleteRecordForm" ).on( "submit", function( ev ) {
            ev.preventDefault();
            
            });

var hndlr = function( ev ) {
    var payload = $( "#recordID" ).serialize() + "&clicked=" + $( this ).attr( "value" );
    $.post( $( "deleteRecordForm" ).attr( "action" ), payload );
}

$("#delete").on( "click", hndlr );
$("#cancel").on( "click", hndlr );



php File:


<?php

//<!-- connect to database -->
 

$courseID=$_POST["recordID"];
$action1=$_POST["payload"];
//$action2=$_POST["cancel"];


echo "id to be deleted: $courseID";
echo "to delete or cancel: $action1";

?>
In your code, I don't see where the main file refers to the js file.
Also, you changed the js file incorrectly.
In this line:
$( "deleteRecordForm" ).on( "submit", function( ev ) {
"deleteRecordForm" is an ID, so it should be referenced with the ID notation as #deleteRecordForm
So, the full should be:
$( "#deleteRecordForm" ).on( "submit", function( ev ) {

Author

Commented:
I did the same with $( "deleteRecordForm" ) further down in function function( ev ) {...

Now the php file does not launch on the browser but I can see it in firebug. It comes with

Undefined index:  payload...

Could you include the success code to pass to php and how to retrieve the values within php.

I put an alert in the js file and I can see it when it loads with the form initially but not after I click the delete or cancel buttons.
I don't have PHP, so the form is placed to a static HTML file. Also I did not add the deleteRecord.php to the testing suit, I just see in the firebug that a correct string is sent to the server:
firebug logAttached my two files, the main html and the JS it uses.

Please make sure you have/link to the latest jQuery.
0430.htm
deleteMyRecord.js

Author

Commented:
Can you include code to display the echo messages of php? That is, the messages that php will generate depending on delete or cancel.
No sorry, I don't have PHP installed.

Author

Commented:
I know PHP... It is the jquery/ajax I am referring to. From what I know thus far, ajax listens to and displays the messages generated by the php program that it calls. I am not clear where that is happening in your code.

Say I have a div with id="confirm" on my webpage and my php program returns echo "The record has been deleted successfully";. Ajax would then trap this message and with appropriate code display it in the div. Say $("#confirm").html(data); data being what was returned from php.

May be I am missing something...?
To place the result which the deleteRecord.php generates to a div with id="confirm", modify the js code as follows:
    $.post( $( "#deleteRecordForm" ).attr( "action" ), payload, function( data ) {
        $( "#confirm" ).html( data );
      } );

Open in new window

Author

Commented:
It seems to be working. As you can imagine, the delete and cancel buttons are from a list of records displayed in rows of a table (<tr><td>...</td></tr>). In case of a delete, this operation would be half complete if the row in which the record is displayed is not removed.  

I have seen some web posts regarding this but couldn't wrap my head around them. Could this be coded easily? Perhaps I should open a new question?
Yes, you can remove a record from existed HTML table. Check the jQuery's remove() method: https://api.jquery.com/remove/

I guess, you should open a new question because there's many things yet to discuss, such as element's identification (the elements in your original question should have their own unique ID in each record), etc.

Author

Commented:
I will open a new question. I hope you continue because it is an addition to the code already started.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial