I have a problem in my codes. So the idea is I have two modals that triggered when user Click OK or Fail
So when the user click ok the modal is
<div class="modal-body">
This is the confirmation window to PASS all the Quality Control for, <br/><br/>
Project : <b>'.$row['PROJECT_NAME'].'</b><br/>
HeadMark : <b>'.$row['HEAD_MARK'].'</b><br/>
ID : <b>'.$row['ID'].'</b>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" name="acceptButton" id="acceptButton" class="btn btn-success">Confirm PASS!</button>
and when user click FAIL its still the same body but with different button action,
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" name="rejectButton" id="rejectButton" class="btn btn-danger">Confirm REJECT!</button>
</div>
and my jQuery corresponded with those buttons are,
$('#acceptButton').click(function() {
var myData = $('#data_field');
$.post("acceptClass.php",{
acceptProjectName : myData.attr("data_project"),
acceptHeadMark : myData.attr("data_headmark"),
acceptId : myData.attr("data_id")
},function callback(result){
window.location = "update_fabrication_qc_pass.php";
});
});
$('#rejectButton').click(function() {
var myData = $('#data_field');
$.post("rejectClass.php",{
projectName : myData.attr("data_project"),
headMark : myData.attr("data_headmark"),
id : myData.attr("data_id"),
reasonReject : $("#reasonForRejection").val()
},function callback(result){
window.location = "update_fabrication_qc_pass.php";
});
});
Variables that are to be passed are stored in the hidden input,
echo "<input type='hidden' data_project='$row[PROJECT_NAME]' data_headmark='$row[HEAD_MARK]' data_id='$row[ID]' id='data_field'></input>";
So the problem is, all the buttons only work with the (#rejectButton). So even if I click accept button, only the action in the rejectClass.php are applied to the database. It supposed to be when user click acceptButton, actions in the acceptClass.php that are applied.
Please help me, im so confused.
Related
I am making a forum-like website in php and I added a button inside each question container to delete questions on the forum. I am looking for a way to make a popup appear when the user clicks the delete button. I am using bootstrap and I found a popup modal on the bootstrap website. With my current code, the popup appears when the button is clicked and it asks the user to confirm that he wants to delete his question. The problem is that I don't know how to get the ID of the question the users wants to delete so after I can delete it in my MySQL database.
This is my current button and it is inside a php echo '...'
<div class="col-1" title="delete your comment"><button name="delmsgbtn" class="btn-reseter" type="button" data-bs-toggle="modal" data-bs-target="#delmsg">delete</button></div>
And this is the popup modal from bootstrap that shows up when button is clicked
<div class="modal fade" id="delmsg" tabindex="-1" aria-labelledby="delmsgLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="delmsgLabel">Are you sure you want to delete this message?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
<button type="button" class="btn btn-danger">delete</button>
</div>
</div>
</div>
</div>
I had the idea to redirect the user to the same page but with the url containing the question id, so after I can have it using the get method. So I modified the button by adding a redirection.
New button also inside a php echo that is why the backslash
<div class="col-1" title="delete your comment"><button name="delmsgbtn" class="btn-reseter" onclick="location.href = \'course.php?courseid='.$_GET["courseid"].'&quesid='.$idQues.'\';" type="button" data-bs-toggle="modal" data-bs-target="#delmsg">delete</button></div>
But when doing this, the page refreshes and the popup disappears. Can you help me.
First, modify your modal open button. Should be something like this
<button class="btn-reseter delmsgbtn" data-comment_id="<?= PHP_COMMENT_ID ?>">delete</button>
Be sure to replace PHP_COMMENT_ID with an actual PHP variable that holds the comments ID.
Replace the "delete" button in the modal with a form.
<form method="POST" action="PHP_PROCESS_SCRIPT">
<input type="hidden" name="comment_id" id="comment_id_input"/>
<button type="submit" class="btn btn-danger">delete</button>
</form>
Make sure that PHP_PROCESS_SCRIPT points to the PHP script to process the comment deletion. Also, if applicable, make sure in this script that the user who is deleting the comment is actually allowed to.
Create a click handler to open the modal, instead of inline attributes.
<script>
$('.delmsgbtn').on('click', function() {
//update #comment_id_input in the popup form,
//based on data-comment_id added to the button from the first snippet
$('#comment_id_input').val($(this).data('comment_id'));
$('#delmsg').modal('show'); //open the modal
});
<script>
When the form is submitted, the PHP script you hooked up will get a value $_POST['comment_id'].
Alternatively, you could make an ajax call from a click handler attached to the delete button inside the modal. This is better if you want to prevent a page refresh. First, modify the delete button like this
<button id="delmsg_submit" type="button" class="btn btn-danger">delete</button>
Then, add some click handlers
<script>
var active_comment_id = null;
$('.delmsgbtn').on('click', function() {
//update active_comment_id,
//based on data-comment_id added to the button from the first snippet
active_comment_id = $(this).data('comment_id');
$('#delmsg').modal('show'); //open the modal
});
$('#delmsg_submit').on('click', function() {
if(active_comment_id) {
//send ajax call
}
});
<script>
I would put the id of the element with php
like
<button id="element-id-<?php echo $id ?>" class="myBtn" >
then i would use a javascript function to do execute the call on database
<script>
const btn = document.querySelector('.myBtn')
btn.addEventLIstener('click', () => {
const elementId = this.id //then remove the 'element-id-' from the value
const data = { id: elementId }
fetch( URLforBackend, {
method: 'post',
headers: {
'Content-Type': 'application/json'
}
body: JSON.stringify(data)
})
</script>
this will give to your backend the id.
in php, in there, just do the deletion
I'm trying to create a modal popup that contains a confirmation delete button when I press delete on my index view, that button contains the ID of the object you are going to delete, I get it with jquery and replace the form action with it.
My problem is replace it not just replacing the placeholder ID on my action form, its replacing whole route with something like http://localhost/project/public/logout.
Delete button on my index.blade.php:
<button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteModal" data-id="{{$category->id}}"><i class="far fa-trash-alt"></i> Delete</button>
Form on modal:
<form action="{{route('categories.destroy', ['id' => 'placeHolderId'])}}" method="POST">
#csrf
#method('DELETE')
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button class="btn btn-danger" type="submit">Delete</button>
</form>
Jquery function that replaces the placeholderId on form action attribute:
$(document).ready(function() {
$('#deleteModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var placeHolderId = button.data('id');
var modal = $(this);
var action = $('form').attr('action');
modal.find('form').attr("action", action.replace('placeHolderId', placeHolderId));
});
});
Result:
<form action="http://localhost/project/public/logout" method="POST">
Expected result:
<form action="http://localhost/project/public/manager/categories/1" method="POST">
give the submit form another id, and on jQuery find the form by that Id, cause right now, its gettign the first form on the DOM and thats logout form
basically put id="categoriesForm" and on jQuery $("#categoriesForm").submit()
$(document).ready(function() {
$('#deleteModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var placeHolderId = button.data('id');
var modal = $(this);
var action = $('#categoryForm').attr('action');
modal.find('#categoryForm').attr("action", action.replace('placeHolderId', placeHolderId));
});
});
or what you can do, is capture when the form is submit, then prevent the default, do the confirmation pop up and then submit
<form action="{{route('categories.destroy', ['id' => 'placeHolderId'])}}" method="POST" id="categoryForm">
#csrf
#method('DELETE')
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button class="btn btn-danger" type="submit">Delete</button>
</form>
$(document).ready(function() {
$("#categoryForm").on('submit', function(e) {
e.preventDefault();
var confirmDelete = confirm("Are you sure you want to delete this category!");
if(confirmDelete) {
$(this).submit()
}
})
});
is it possible to have this form submit when someone presses enter
<div class="form-group">
<?= lang("reference_note", "reference_note");?>
<?php echo form_password('reference_note', $reference_note, 'class="form-control kb-pad" id="reference_note" autofocus="autofocus"');?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal"> <?=lang('close')?> </button>
<button type="button" id="suspend_sale" class="btn btn-primary"><?= lang('submit') ?></button>
</div>
the field requires input of a pincode and then when enter is pressed it should submit the form.
now the code is entered and it only submits when the button is pressed
Are you using JQuery? If so, this will do the trick:
$("input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
$("form").submit();
}
});
Otherwise, you can use pure javascript to accomplish it by doing this:
<script type="text/javascript">
function submitOnEnter(inputElement, event) {
if (event.keyCode == 13)
{
inputElement.form.submit();
}
}
</script>
Then on your input element, add this:
onkeypress="submitOnEnter(this, event);"
I am having problem on passing values into another page using jQuery and modal. So here is my code.
Firing up the modal:
echo "<input type='hidden' data_project='$row[PROJECT_NAME]' data_headmark='$row[HEAD_MARK]' data_id='$row[ID]'></input>";
echo '<button type="button" name="qcreject" id="qcreject" class="btn btn-primary btn-danger btn-lg btn-block" data-toggle="modal" data-target="#qcRejectModal">
<span style="font-size:35px"> '.$row['PROJECT_NAME'].' / <b>'.$_POST["hm"].'</b>/'.$row['ID'].' ~ FAIL</span></button>';
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
This is the confirmation window to PASS all the Quality Control for, <br/><br/>
PROJECT : <b>'.$row['PROJECT_NAME'].'</b>
HEADMARK : <b>'.$row['HEAD_MARK'].'</b>
ID : <b>'.$row['ID'].'
</div>
</div>
</div><br/>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea name="reasonForRejection" id="reasonForRejection" class="form-control" placeholder="Reason for rejection" rows="2" required></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" name="rejectbutton" id="rejectbutton" class="btn btn-danger">Confirm REJECT!</button>
</div>
and when user click the reject button it should pass PROJECT_NAME, HEAD_MARK, ID and values in the textarea to the testClass.php.
jQuery is,
$('#rejectbutton').click(function() {
$.post("testClass.php",{
projectName : this.getAttribute("data_project"),
headMark : this.getAttribute("data_headmark"),
id : this.getAttribute("data_id"),
reasonReject : this.getAttribute("reasonForRejection")});
});
and inside the testClass.php
echo 'TEST CLASS WORKS';
$val1 = $_POST["projectName"];
$val2 = $_POST["headMark"];
$val3 = $_POST["id"];
$val4 = $_POST["reasonReject"];
var_dump($val1);
var_dump($val2);
var_dump($val3);
var_dump($val4);
unfortunately all the values I'm getting in the testClass are null
TEST CLASS WORKSstring(0) ""
string(0) ""
string(0) ""
string(0) ""
Add id attribute in your hidden field then use that in js like below code.
echo "<input type='hidden' data_project='$row[PROJECT_NAME]' data_headmark='$row[HEAD_MARK]' data_id='$row[ID]' id="data_field" />";
// your codes
$('#rejectbutton').click(function() {
var myData = $('#data_field');
$.post("testClass.php",{
projectName : myData.attr("data_project"),
headMark : myData.attr("data_headmark"),
id : myData.attr("data_id"),
reasonReject : $("#reasonForRejection").val()
});
});
Looking at this code:
$('#rejectbutton').click(function() {
$.post("testClass.php",{
projectName : this.getAttribute("data_project"),
headMark : this.getAttribute("data_headmark"),
id : this.getAttribute("data_id"),
reasonReject : this.getAttribute("reasonForRejection")});
});
it assumes, that when the element with id #rejectbutton is clicked, which is:
<button type="button" name="rejectbutton" id="rejectbutton" class="btn btn-danger">Confirm REJECT!</button>
It has the attributes you want on it, but it doesn't. Also, you are trying to get the attributes using getAttribute() - why don't you use the jquery method?
this is how you do it. Update your HTML to be like this:
<button
type="button"
name="rejectbutton"
id="rejectbutton"
class="btn btn-danger"
data_project="some project name",
headMark="some head mark",
data_id="1234",
reasonForRejection="some reason here"
>Confirm REJECT!</button>
Then update your JS to get those attributes in your post request like this:
$('#rejectbutton').click(function() {
$.post("testClass.php", {
projectName : $(this).attr('data_project'),
headMark : $(this).attr('headMark'),
id : $(this).attr('data_id'),
reasonReject : $(this).attr('reasonForRejection'),
});
});
How to create a delete confirmation dialog? If 'yes' clicks delete the message, if 'no' clicks cancel delete operation.
Currently I have like this in my view:
Confirm Message
And how to change the dialog box content?
You can't do a confirm or bootstrap confirm in PHP as PHP is server side code.
What you will be after is how to use Javascript to create a confirm box.
Plain Javascript
Using plain standard javascript this would only need a button with a function
HTML
<button onclick="show_confirm()">Click me</button>
javascript
// function : show_confirm()
function show_confirm(){
// build the confirm box
var c=confirm("Are you sure you wish to delete?");
// if true
if (c){
alert("true");
}else{ // if false
alert("false");
}
}
Demo jsFiddle
Bootstrap with jQuery
This way is a little more complex as you are adding in 3rd-party libraries.
To start off with you will need to create a modal to act as your confirm box.
HTML
<div id="confirmModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Delete?</h3>
</div>
<div class="modal-body">
<p>Are you sure you wish to delete?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button onclick="ok_hit()" class="btn btn-primary">OK</button>
</div>
</div>
Same button as before with a little bit of styling
<button class="btn btn-danger" onclick="show_confirm()">Click me</button>
and then the
Javascript
// function : show_confirm()
function show_confirm(){
// shows the modal on button press
$('#confirmModal').modal('show');
}
// function : ok_hit()
function ok_hit(){
// hides the modal
$('#confirmModal').modal('hide');
alert("OK Pressed");
// all of the functions to do with the ok button being pressed would go in here
}
Demo jsFiddle
A simple approach with javascript:
<a onclick="if(!confirm('Are you sure that you want to permanently delete the selected element?'))return false" class="btn btn-large btn-info msgbox-confirm" href="?action=delete">Delete</a>
This way, when user clicks on "Delete", a dialog will ask her/him to confirm. If it is accepted, the page is reloaded with a parameter in the url (change to whatever you need). Otherwise, the dialog is closed and nothing happens.
<script>
function deletechecked()
{
var answer = confirm("Are you sure that you want to permenantly delete the selected element?")
if (answer){
document.messages.submit();
}
return false;
}
</script>
<a href="<?php echo base_url('department/deletedept/'.$row['dept_id']);?>" onclick="return deletechecked();" title="Delete" data-rel="tooltip" class="btn btn-danger">