I'm setting up a form with a "Submit" button and a "Preview" button.
Everything is working fine with the submit button. However, the Preview button does indeed open up a new page with the preview but it also submits to the same preview on the actual form page, which is not what I intend, since the user loses all working data.
The JQuery code to allow for this is the following:
<script type="text/javascript">
jQuery(document).ready(function ($) {
$( ":button" ).click(function(){
var url = $(this).attr('data-url');
if(url=="{{ URL::to('customdownloadpage/preview') }}") {
$('#formCustom').target = "_blank";
}
$('#formCustom').attr('action',url);
$('#formCustom').submit();
});
});
</script>
The HTML for the buttons is the following:
<button data-url="{{ URL::to('customdownloadpage/new') }}" class="btn btn-primary">I'm Finished</button>
<button data-url="{{ URL::to('customdownloadpage/draft') }}" class="btn btn-primary">Save Draft</button>
<button style="float:right" data-url="{{ URL::to('customdownloadpage/preview') }}" class="btn btn-default">Preview</button>
Why is the form submitting twice (on a _blank page and on the self)?
Try preventing the default submission:
$( ":button" ).click(function(e){
var url = $(this).attr('data-url');
if(url=="{{ URL::to('customdownloadpage/preview') }}") {
$('#formCustom').target = "_blank";
e.preventDefault();
}
$('#formCustom').attr('action',url);
$('#formCustom').submit();
});
Make the preview button an anchor tag instead of a button. Buttons always seem to serve as submit triggers inside forms, so if you use a tags with the btn class you get the looks of a button without all the events.
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()
}
})
});
In my base page index.php I make use of this
SHOW
to open a dialog window that has a form and allow me to submit some text using PHP.
The Show link does not change, you click it, the window opens and may have some data in it.
When I submit something to the dialog.php how can I refresh the index.php?
My goal is to show that data to the index.php
Thank you
UPDATE
I added this to the dialog.php
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
and when I close the window it refreshes the parent page.
Is there a way to make it happen when the
<input type="submit" name="submit" class="button" id="submit_btn" value="ADD">
is submited?
Just add your function, refreshParent() to an onclick event for the submit button.
<input onclick="refreshParent()" type="submit" name="submit" class="button" id="submit_btn" value="ADD">
Note that using 'onclick' tags is generally discouraged. A better way would be to use addEventListener:
document.getElementById('submit_btn').addEventListener('click', function () {
refreshParent;
}, false);
Or with JQuery:
$( "#submit_btn" ).click(function() {
refreshParent;
});
First, let's get this out of the way:
No errors (JS, etc) exist on the local and remote dev page. The jQuery lib is also called correctly.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Basically both pages are identical.
What I'm trying to have my webpage achieve:
Submit my form if the user (accidentally) clicks away on a link instead of using the normal form submit button.
Link:
<a class="arrow autoSaveLeft" href="<?php echo $prevWeekURL ?>">←</a>
<form>
// ...
<input type="submit" name="submit" class="submitForm" value="Update" />
</form>
JS (at bottom):
<script>
$(document).ready(function() {
$('.autoSaveLeft').click(function(event){
event.preventDefault();
$('.submitForm').click();
window.location = $(this).attr('href');
});
});
</script>
Any idea why this might fire correctly on MAMP (form is submitted and url is followed), but not when I try live on a shared host (form is NOT submitted, but url is followed)?
Thank you.
If you wanted to save your user's progress on a form before leaving, you'd have to submit the form without actually, submitting it via the browser. Thus you could use AJAX to send the information that's been provided so far, upon success - carry on with the href provided on the original .click() handler.
<a class="arrow autoSaveLeft" href="somepage.php">←</a>
<form id="userform">
<input type="submit" name="submit" class="submitForm" value="Update" />
</form>
<script>
$(document).ready(function() {
$(document).on('click', '.autoSaveLeft', function( event ) {
var $that = $(this);
event.preventDefault();
$.ajax({
type: "POST",
data: $('#userform').serialize(),
url: 'yourpostscript.php',
success: function(){
window.location.href = $that.attr('href');
}
});
});
});
</script>
Is their any possible when on click the button it change to only text and not as a button.
Ex:
I have Invite button for all individual user. What I need is when on click the Invite button, button text need not to change instead button is change to text.
"Invite" button format is change to "pending request" text format along with "cancel" button when on click the button.
Hope it helps, this FIDDLE
if you want to learn more. read more about jquery.
html
<input id="invite" type="button" value="Invite" />
<span id="pending">Pending</span>
<input id="cancel" type="button" value="Cancel" />
script
$('#pending').hide();
$('#cancel').hide();
$('#invite').on('click', function () {
$(this).hide('fast');
$('#pending').show('fast');
$('#cancel').show('fast');
});
$('#cancel').on('click', function () {
$(this).hide('fast');
$('#pending').hide('fast');
$('#invite').show('fast');
});
Try this code :
$('button').click(function() {
$(this).replaceWith("pending request<button>cancel</button>")
})
$("#btnAddProfile").click(function(){
$("#btnAddProfile").attr('value', 'pending request...');
//add cancel button
});
If you have a button like this:
<button>Click me</button>
You can disable it on click with jQuery like this:
$(function() {
$('button').on('click', function(e) {
e.preventDefault();
$(this).prop('disabled', 'disabled');
});
});
See fiddle here:
http://jsfiddle.net/jpmFS/
Or replace it with only text like this:
$(function() {
$('button').on('click', function(e) {
e.preventDefault();
$(this).replaceWith('<p>'+$(this).text()+'</p>');
});
});