I understand how easy it is to hide/remove/disable a button after clicking client-sided. However, I would like to hide/disable a button permanently after it's been clicked once.
<form action="" method="post" class="delivery-confirm-frm">
<input type="hidden" name="order_id" value="<?php echo $_order->getIncrementId(); ?>" />
<input type="button" value="CONFIRM" class="delivery-confirm" id="confirmbutton"/>
</form>
<script type="text/javascript">
var $jj = jQuery.noConflict();
$jj(document).ready(function () {
$jj('.delivery-confirm').on('click', function () {
var _this = $jj(this);
$jj.confirm({
title: 'Confirm!',
content: 'Are you sure? Once confirmed, you cannot dispute this transaction.',
buttons: {
confirm: function () {
_this.closest('form').submit();
},
cancel: function () {
}
}
});
});
});
</script>
Basically, I have a button a person will click to confirm that an order has been delivered to them. An alert confirmation pops up after clicking. I would like to remove the button after the person has confirmed via the alert pop up.
Is there a simple way to do this via PHP? Or is it a little more complicated?
First of all you need to implement both client side and server side. Client side is for once the user clicks on submit for the first time so using javascript you can call the following after the form submit:
$("#confirmbutton").prop("disabled",true);
after that you need to handle the case that a user reloads the page. So the button should be disabled when the page loads. So assuming that there is a function is_confirmed() that returns true or false, you can add the following in your button
<input type="button" value="CONFIRM" class="delivery-confirm" id="confirmbutton" <?php echo $_order->is_confirmed() ? 'disabled' : ''; ?>/>
Related
I am trying to get a popup submit button working but I haven't quite found the solution I'm looking for.
I am using the jquery modal plugin to show the client the content of their changes before they submit them. However, when I try submitting, nothing happens. The submit button exists on the pop up, whereas the .modify button is the button that opens it. I am having no issues with the pop up itself.
My console test is printing so I know there's nothing wrong with my event listener. Maybe it has something to do with event.preventDefault()?
Thanks in advance.
Here is my code
Back end
jQuery(".modify").click(function() {
event.preventDefault();
var submit = confirm('Are you sure?');
<?php
$post_ids = array();
while($author_entry_posts->have_posts()) : $author_entry_posts->the_post();
array_push($post_ids, get_the_ID());
endwhile;
?>
if (submit == true) {
var data = {
'action': 'modalcall',
'postid': <?php echo json_encode($post_ids)?>,
'userid': <?php echo get_current_user_id() ?>
};
jQuery.post(ajaxurl, data, function(response) {
jQuery(response).appendTo('body').modal();
//Script which handles the submit button on the modal pop-up
jQuery(".modal_submit").click(function() {
console.log("test");
jQuery().submit();
});
});
} else {
return false;
}
});
Front end
<input type="submit" name="submit" value="Submit" class="button modal_submit">
In your handler for click on modal submit you are not defining which form needs to be submitted.
jQuery(".modal_submit").click(function() {
console.log("test");
jQuery().submit(); // you are not defining which form to submit.
});
Instead the <input type="submit" name="submit" value="Submit" class="button modal_submit"> needs to be inside a form which needs to be submitted by calling jquery submit on it.
jQuery(".modal_submit").click(function() {
console.log("test");
$(this).closest('form').submit(); // asking to submit the form which contains this button
});
<form method="POST">
<div id="showme">Show me <?php echo $_POST['name']?></div>
Send the value<input type="radio" name="name" value="ja"/>
<input type="submit" id="submit" name="submit" value="BEREKENEN! ">
</form>
<script>
$(document).ready(function () {
$('#showme').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#showme').fadeIn(5000);
});
});
</script>
This code won't send the value of the radiobutton to the showme div.
I can't receive the $_POST['name'] when I use hide() and fadeIn() between the <script> tags.
Whenever I don't use jQuery it sends the data - when using it , it won't let me send the value.
How do I fix this problem, this is just an example of 1 radio button. I have a list of 6 radiobuttons that need to be sent to PHP section in the same file, I don't want to make another file for this.
This code will FadeIn the requested div, it shows me Show me but it won't show the value where I ask for with the line <?php echo $_POST['name']?>
PHP is parsed on the server. <?php echo $_POST['name']?> has already been evaluated and echod to the page long before any of the submission stuff happens. What you need is to use AJAX.
You can replace the submit button with just a regular button, remove the <form> element entirely even.
jQuery:
$('#submit').on('click', function(evt) {
var e = evt || window.event;
e.preventDefault();
$.post('page.php', { name: $('input[name="name"]').val() }, function ( data ) {
$('#showme').append(data).fadeIn(5000);
});
return false;
});
(if you do what I did below turning submit into button, you dont need the e.preventDefault())
PHP:
if(isset($_POST['name'])) {
echo $_POST['name'];
return;
}
HTML:
<div id="showme">Show me </div>
<label for="name">Send the value</label><input type="radio" name="name" value="ja"/>
<input type="button" id="submit" name="submit" value="BEREKENEN!">
I'm not so sure you can get a non-BOOLEAN value from a radio button with PHP though. You're probably better off using <input type="hidden" value="ja" /> or maybe type="text".
I have a form, which take name from form and it sends to javascript codes and show in php by Ajax. these actions are done with clicking by submit button, I need to have another button, as review in my main page. how can I address to ajax that in process.php page have "if isset(submit)" or "if isset(review)"?
I need to do different sql action when each of buttons are clicked.
how can I add another button and be able to do different action on php part in process.php page?
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
submitHandler: function(form) {
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
<body>
<form name="myform" id="myform" action="" method="POST">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<input type="submit" name="submit" value="Submit">
</form>
<div id="results"><div>
</body>
process.php:
<?php
print "<br>Your name is <b>".$_POST['name']."</b> ";
?>
You just need to add a button and an onclick handler for it.
Html:
<input type="button" id="review" value="Review"/>
Js:
$("#review").click(function(){
var myData = $("#myform").serialize() + "&review=review";
$.post('process.php', myData , function(data) {
$('#results').html(data);
});
}
);
Since you have set a variable review here, you can use it to know that is call has come by clicking the review button.
Bind the event handlers to the buttons' click events instead of the form's submit event.
Use the different event handler functions to add different pieces of extra data to the data object you pass to the ajax method.
I have this jquery script that refreshes a div tag on my page:
$(function() {
$(".loadlink").click(function(event) {
event.preventDefault();
$("#result").load($(this).attr("href"));
});
});
A link click activates it, but I want to change it to a button. Currently I have:
<a class="loadlink" href="crimes_result.php?id=<? echo $id ?>">do job<a>
Instead I want a submit button, like: (this doesnt work-doesn't send the id)
<input type="submit" class="loadlink" value=" do job " onClick="location.href='crimes2.php?id=<? echo $id ?>';this.disabled=true;">
What am I doing wrong?
Leverage the data attribute and jQuery's data method. I think this is what you are trying to do.
html
<input type="submit" class="loadlink" data-url="crimes2.php?id=<?php echo $id ?>" />
javasript
$(function() {
$(".loadlink").click(function(event) {
event.preventDefault();
$("#result").load($(this).data('url'));
});
});
You may try
<input type="submit" class="loadlink" value=" do job " onClick="loadlink('crimes2.php?id=<? echo $id ?>'); this.disabled=true;">
And JavaScript
function loadlink(href)
{
$("#result").load(href);
}
Set the URL as a data-attribute in your button markup and read it like this in your JS:
$(function() {
$(".loadlink").click(function(event) {
event.preventDefault();
$("#result").load($(this).attr("data-href"));
this.disabled = true;
});
});
This requires your button to look more like this:
<input type="submit" class="loadlink" value=" do job " data-href="crimes2.php?id=<? echo $id ?>';">
The reason it's not working, is that the submit button does not have a href attribute.
You need to add the value you want to go to (the url) to the button and change your javascript accordingly or just change the link to make it look like a button.
use a hidden field which will store the url to load:
<input type="hidden" name="myUrl" value="crimes_result.php?id=<? echo $id ?>" />
and use the javascript:
$(function() {
$(".loadlink").click(function(event) {
event.preventDefault();
$("#result").load($('input[name=myUrl]').val());
});
});
I am getting the form on click from a file called test.php which contains the following:
<form method="post" class="adminTM">
<input type="hidden" name="execID" value="<?=$_POST['exec']?>" />
<input type="hidden" name="fromTM" value="<?=$_POST['TM']?>" />
<input type="text" name="toTM" value="<?=$_POST['TM']?>" />
<input type="hidden" name="symbol" value="<?=$_POST['symbol']?>" />
<button class="submitTM">SUBMIT</button>
</form>
The javascript looks like so:
$(function(){
$('.adminTMClick').live('click', function(e){
$(this).data('TM', this.innerHTML);
$.post('test.php', $(this).data(), function(data){
$(data).dialog({
modal: true,
beforeClose: function(){
$(this).remove();
}
});
console.log($('.adminTM'));
console.log($('.submitTM'));
});
});
$('.submitTM').live('click', function(e){
//originally had .adminTM with submit which failed
e.preventdefault();
alert('i am here');
return false;
});
});
How do i make it so that the form DOES NOT do the default submit action when the submit button is clicked?
Here is a fiddle that demonstrates basically what I am doing (i had to change it a bit because of the way jsfiddle works): http://jsfiddle.net/maniator/tQVnV/show/
You should use the submit() event on the form instead of the click() on the submit, since pressing enter will still submit the form (bypassing the submit button).
This should properly prevent the form from doing the default submit:
$('.adminTM').live('submit', function(e) {
// execute custom code
console.log("submit event fired");
// prevent default submit
return false;
});
jsFiddle: http://jsfiddle.net/bjorn/tQVnV/11/