Window popup to refresh base file when a text a submited? - php

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;
});

Related

WordPress - A submission confirmation on modal pop up

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
});

JS working locally, but not on webserver - any odd JS quirks I'm missing?

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>

Form Target _blank submits on both new page and current page

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.

Ajax calling twice

I'm using an ajax call for upload pdf files. After triggering upload button the ajax calls two times. I checked the entire code. But couldn't get any solution. Kindly help me :)
My code is,
HTML:
<div class="uk-form-row">
<div id="loadingPDFUpload"><i class="uk-icon-spinner uk-icon-spin"></i></div>
<div id="targetUpload"></div>
<label class="uploadLbl">Upload Book:</label>
<div class="uploadWrap">
<input name="pdfFile" id="pdfFile" type="file" size="30" />
<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" />
</div>
</div>
ajax code:
function uploadPDF(){
$("#frm").attr("action","upload.php");
$("#loadingPDFUpload").show();
$("#frm").ajaxForm({
target: '#targetUpload',
complete: function(){
$("#loadingPDFUpload").hide();
}
}).submit();}
You have a submit button calling the function but then the function uses the forms submit method. That is probably triggering a double call on the function.
I see you are using jQuery and the jQuery Form Plugin, so this should be relatively easy to fix. I would create the event handler directly in the JavaScript to avoid messy markup. Remove the onclick attribute of your submit button:
<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" />
Then do something like this in your code:
$(document).ready(function() {
$('#frm').submit(function(e) {
e.preventDefault(); //stops the default submit action
$('#loadingPDFUpload').show();
$(this).attr('action', 'upload.php');
$(this).ajaxForm({
target: '#targetUpload',
complete: function(){
$("#loadingPDFUpload").hide();
});
});
})
});
You are using form submit button for trigger your ajax call
<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" />
So when you trigger click it which call uploadPDF() function also which submit your form after submit() function. That is why there the function is call two times.
Try removing the submit at the end of ajaxForm request. It is submitting the form again. Also please update your HTML code. I cannot see #frm anywhere.
function uploadPDF() should return false, in order to prevent normal form submission.
as in documentation example code
// attach handler to form's submit event
$('#myFormId').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});

launching a jquery pop up window on html form submit?

can anyone please help. i have this login form:
<form id="myform" form action="login.php" method="post" class="loginform">
Email
<input type="text" name="email" maxlength="30" />
Password
<input type="password" name="password" maxlength="30" />
<input type="image" src="../PTB1/assets/img/icons/loginarrow1.png" name="submit" class="loginbutton" value="Login" />
</form>
i also have this script which brings up the form action page "login.php" in a popup window when my form is submitted.
at the moment it brings up a basic pop up window but i want to know if i can tweak the jquery code to implement a jquery lightbox window which opens up instead.
heres the jquery code that launches the pop up window when my login form is submitted.
<script>
$(document).ready(function() {
$('#myform').submit(function() {
window.open('', 'formpopup', 'width=400,height=400');
this.target = 'formpopup';
});
});
</script>
but now i want to have this pop up window open using my jquery lightbox window which is called "shadowbox" (available to download on the net) which you would normally open your links with like so.
<a href="link" rel="shadowbox;height=300;width=500" >link</a>
so just to be clear, i am asking if there is a way to launch my jquery lightbox "shadowbox" in place of the normal pop up window which is being launched when the user clicks the submit button on the login form.
Please can someone show me a way of doing this. thank you.
I would add e.preventDefault() to the previous statement
$(function() {
$('#myform').submit(function(e) {
e.preventDefault();
this.target = 'formpopup';
Shadowbox.open({
content: 'link',
height: 300,
width: 500
});
});
});
$(function() {
$('#myform').submit(function() {
this.target = 'formpopup';
Shadowbox.open({
content: 'link',
height: 300,
width: 500
});
});
});

Categories