Losing Button value on form submit with Confirm dialogue
Question
I'm trying to pass a button value on a form submit in conjunction with a jquery confirm dialogue, but it's not going through. I understand it has something to do with the script using a "form.submit" function but I'm not familiar enough with JS to code a workaround to the problem.
Is there a way to maybe reassign the first button's value to a new JS variable and pass that instead?
I've simplified the form down to its basic elements to make it easy to follow. The data I'm trying to pass in this example is "123" using the button tied to the confirm dialogue script. A second "regular button" is added to demonstrate a successful form submission. Some PHP gathers in the POST data and displays it.
// Results:
// $regularbutton = '456';
// $alertbutton = '';
testpage.php:
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
'use strict';
function confirmDialog(title, message, success) {
var confirmdialog = $('<div></div>').appendTo('body')
.html('<div><h6>' + message + '</h6></div>')
.dialog({
modal: true,
title: title,
zIndex: 10000,
autoOpen: false,
width: 'auto',
resizable: false,
buttons: {
Yes: function () {
success();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function() {
$(this).remove();
}
});
return confirmdialog.dialog("open");
}
$('#submit_alert').on('click', function (e) {
e.preventDefault();
var form = document.getElementById('form_alert');
confirmDialog('Confirm', 'Are you sure you want to proceed?', function () {
form.submit();
});
});
});
//]]>
</script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
</head>
<body>
<?php
extract($_POST);
echo "button1: $alertbutton <br>";
echo "button2: $regularbutton <br>";
?>
<form method="post" id="form_alert" action="testpage.php">
<button name="alertbutton" value="123" id="submit_alert">Alert Button</button>
<button name="regularbutton" value="456">Regular Button</button>
</form>
</body>
</html>
2 answers
solution1
1 2019-09-01 10:41:50
The value of the button is not commited.
You could inject a hidden field before calling the form.submit() :
confirmDialog('Confirm', 'Are you sure you want to proceed?', function () {
$('#form_alert').append('<input type="hidden" name="alertbutton" id="submit_alert_hidden" value="' + $('#submit_alert').val() + '" />');
form.submit();
});
solution2
1 2019-09-01 10:46:52
You can use the attribute data-* to pass some datas :
$(function() { $(".MyButton").on('click', function(e) { // note that some-value is camelCased to someValue console.log(e.target.dataset.someValue); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="MyButton" name="alertbutton" data-some-value="123" id="submit_alert">Alert Button</button> <button class="MyButton" name="regularbutton" data-some-value="456">Regular Button</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.