Show button onClick event of another button - javascript

I need to show status after the onClick event of a button. But I want the shown button to be on another page. Is this possible?
For example, one button on my Investigation page shows the patient status for a user. If I click that button, the investigation status should be Pending and a user list should display in front of that particular patient.

Try this using jquery
Html
<button id="first-button" type="button" class="btn"> first button </button>
<button id="second-button" type="button" class="btn hide"> Pending </button>
Script
$("#first-button").click(function(){
ev.preventDefault();
$('#second-button').removeClass('hide');
$('#first-button').addClass('hide');
});
OR
In php
<?php
if($pedding)
{
echo '<button id="pending" type="button" class="btn">Pending</button>';
}
else
{
echo '<button id="status" type="button" class="btn">Status</button>';
}
?>

Related

Save data to MySQL from within jquery loaded page

I have created an example of what I am trying to accomplish:
I have an index page with a form + input elements (example.php).
When submitted I call a php page via jQuery that processes the form data and outputs result in div on index page (proces.php)
From within this php process page loaded in the div I have a button that when clicked I want to save $_POST data + other values from that page into MySQL.
I simply just cannot figure out how to "re-use" $_POST data and new values from example.php file and process.php file so I can save it from proces page when clicking button on proces.php page.
This is the example: http://mazey.dk/example.php
When form on index page is submitted the proces.php is called and here all POST data is parsed. This data I want to save when clicking Save button in proces.php file.
I hope someone can guide me in the right direction.
Thanks
***** UPDATE *****
Let me break down the code I have:
On example.php page I have a POST form with an action and a jQuery/AJAX script that prevents form from submitting in a normal way, instead it sends POST to form action URL. Result is then shown inside the with .previews class.
<script>
$(document).ready(function(){
$('.selectform').ajaxForm( {
target: ".previews",
//success: function(res) {
//$( "#currentOrders" ).load(window.location.href + " #currentOrders" );
//}
});
});
</script>
<form action="proces.php" class="selectform" method="post">
<input name="test" type="hidden" value="123">
<div class="form-group col-md-9">
<input name="inputtest" type="text">
</div>
<div class="form-group col-md-9">
<div class="">
<button class="btn btn-primary btn-lg" type="submit"><i aria-hidden="true" class="fa fa-calculator"></i> Calculate</button> <button class="btn btn-default btn-outline btn-lg" type="reset">Reset</button>
</div>
</div>
</form>
<div class="col-md-6 col-lg-6 col-xl-6 col-xxl-6">
<div class="previews"></div>
</div>
Inside proces.php file (that displays in the .previews ) I have a button. This button I want to trigger a "save-action" so when clicked I can save POST values + other variables that will be defined in proces.php into the MySQL DB. I have no problem in handling functionality to MySQL, but I need to figure out how to call POST data + variables upon clicking the button.
Proces.php file:
<input type="submit" name="save" value="SAVE" class="btn btn-lg btn-default">
<?
print_r($_POST);
$newTest = "Check";
$data = 234;
// TEMPERATURE CONTROLLER
$controller = explode("|",$_POST[controller]);
$controllerCostEach = $controller[1];
$controllerName = $controller[2];
$controllerCost = $controller[1];
$qtyController = $controller[0];
$controllerAssemblyCost = $controller[3];
$totalControllerAssemblyCost = $controllerAssemblyCost * $qtyController;
$controllerCost = $qtyController * $controllerCost;
//SUBMIT BUTTON CLICKED
//E.g if(save).clicked{
echo "HERE I can save original $_POST data + other variables from $_POST values from index file and this proces.php file via standard mysqli_query";
//}
//SUBMIT
?>
I hope with this explanation that someone can help me :-)

How to stop next page to be loading

In my project, while a particular button is clicked I want to stop the next page appearing. Here is my JavaScript code:
function checkcond() {
check_value=document.getElementById("chkvalue");
if(check_value==null){
alert(check_value);
document.firstform.textview.focus();
return false;
}
}
and button code is:
<form id="payment_form" name="payment_form" action="<?php echo site_url("cont/accept");?>" method="post">
<input id="chkvalue" name="chkvalue" type="hidden">
<button type="submit" id="submit_button" class="btn btn-primary" onclick="checkcond()">
<b>Make a Payment</b>
<span class="fa fa-hand-o-right" aria-hidden="true"></span>
</button>
Here after checking the check_value I want to keep my current page while it is null. How should it be done? Is there any function for that?
My suggestion would be to remove inline javascript
and use like this
document.getElementById('payment_form').onsubmit = function() {
return checkcond();
};
or if you want to use inline method, change onclick method like this
<button type="submit" id="submit_button" class="btn btn-primary" onclick="return checkcond()"><b>Make a Payment</b>

Show and Hide element (jquery/javascript)

I have a modal but I don't want to show it unless it ends doing all the validation.
So am I trying to hide it in the beginning and show it if it passes through the validation process..
My code still shows the modal when I click the btnSubmit
$('#btnSubmit').click(function(e) {
e.preventDefault();
$('#creationModal').modal('hide');
//if the flow is not validated
var flowName = $('#flowName').val();
//check if it exists
validateFlowName(flowName);
});
function validateFlowName(flowName) {
if //some validation processes)
{
}
//if passes all validations, show it
else {
$('#creationModal').modal('show');
}
<button type="submit" class="btn btn-rounded btn-success-outline top10" data-target="#creationModal" data-toggle="modal" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>
When page is load, at that time $('#creationModal').hide() will hide your element and then you will click on button $('#btnSubmit').click(function(e) will call. In this function you can check the condition like this :
$('#creationModal').hide();
$('#btnSubmit').click(function(e) {
e.preventDefault();
//if the flow is not validated
var flowName = $('#flowName').val();
//check if it exists
if(flowName) {
$('#creationModal').show();
}
else {
$('#creationModal').hide();
}
});
Remove data-target="#creationModal" data-toggle="modal" line of code from your button, because this line will open modal. Above line is required if you want open modal directly.
<button type="submit" class="btn btn-rounded btn-success-outline top10" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>
try removing the data-target="#creationModal" data-toggle="modal" from your button :
<button type="submit" class="btn btn-rounded btn-success-outline top10" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>

ajax and codeigniter code for add to cart button

iam new to codeigniter and to ajax so i need to add a product to cart
the isert function is working and the button changes to 'remove' but when refreshing the page it again changes to add to cart in need to remain it as 'remove' pls help
$('.btn_add_remove_cart').click(function(e){
e.preventDefault();
var self = $(this);
if (self.hasClass('add-cart')){
// if it's add cart button, replace add-cart class by remove-cart and change label
self.removeClass('add-cart').addClass('remove-cart').text('Remove');
} else {
// it's remove cart button, do the inverse
self.removeClass('remove-cart').addClass('add-cart').text('Add to Cart');
}
});
});
this my ajax code
and my button is
<button name="submit" type="submit" class="btn btn-primary add-cart btn_add_remove_cart btn-default promotion-button" value="<?php echo $row->prod_id;?>">add as promotion product</button>

How to disable a button on click and replace that button with another button with different function using AngularJS?

How to disable a button on click and replace that button with another button with different function using AngularJS?
The following is my button,
<button type="submit" class="btn btn-small btn-default"
ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">
<span class="glyphicon glyphicon-edit"></span> Edit Setting</button>
you can use a state setting, say $scope.showFirstButton=true to control when to show the submit button:
<button ng-show="showFirstButton" type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">Edit Setting</button>
and another button, showing them alternatively:
<button ng-show="!showFirstButton" type="submit" class="btn btn-small btn-default" ng-click="doSomethingElse()">Seccond Button</button>
In the controller method $scope.editSetting() you change the value of the state: $scope.showFirstButton = !$scope.showFirstButton'.
Edit: if you need to revert the state of the buttons, do the same thing in the second method:
$scope.doSomethingElse = function(){
//some cool things happen here, and:
$scope.showFirstButton = !$scope.showFirstButton
}
and this will get back the first button and hide the second.

Categories