I have a file upload script which works great when opened from the calling page via window.open(). However, I'm trying to avoid the popup window and load the script into the calling page itself (via jQuery.load()).
However, although everything appears to work fine, the file does not actually get transferred. The calling page is itself a form. Could that cause the problem?
<form id="myParentPage">
<div id="myUploadPlaceholder"></div>
<input type="button" id="loadScript" value="Test" />
<script type="text/javascript">
$(document).ready(function()
{
$('#loadScript').click(function() {
$('#myUploadPlaceholder').load('myUploadScript.php?action=test' );
});
});
</script>
</form>
Try using a hidden iframe instead:
<iframe id="myUploadPlaceholder" src="_blank"></iframe>
<input type="button" id="loadScript" value="Test" />
<script type="text/javascript">
$(document).ready(function()
{
$('#loadScript').click(function() {
$('#myUploadPlaceholder').attr('src','myUploadScript.php?action=test');
});
});
</script>
Related
I have a php file which I want be executed when I click on a button. I have been using the following code to achieve the same:
<form action="test.php" method="post">
<input type="submit" value="Run Script" name="submit">
</form>
The code seems to take me to test.php file, but I want to be redirected back to the page where I was. Can is be possible to run this test.php on click on a button and not get redirected? Something like running the script in background?
Please let me know if you guys need further clarification.
Any help will be highly appreciated.
Thanks in advance guys!
you will need to use AJAX
<script>
function doTheFunction(){
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","URL_OF_PHP_FILE",true);
xmlhttp.send();
}
</script>
<button onclick"doTheFunction();">Run the script</button>
You need to do an ajax call and prevent the forms submit.
Html:
<form onsubmit="return doAxajCall();"> </form>
js Code:
function doAjaxCall(){
//do ajax call however you want
return false; //prevents the form from submitting
}
Easy way;
Make the action of your form 'self' like this;
<form action="#" method="post">
<input type="submit" name="submit" value="Do PHP">
</form>
Then test for submission at the top of the page like this;
if (isset($_POST['submit'])) {
// do stuff
}
in your instance 'test.php' has to included in the original file.
at the bottom of you php file
header('Location: lastPage.php');
or do some tricks using ajax.
code:
<!-- including jquery.min.js cdn -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<input type="submit" value="Run Script" id="submit" name="submit" />
<!-- now set ajax call for button -->
<script>
$("#submit").click(function(){
$.ajax({
url:'test.php',
type:'POST',
success:function(response){
alert('test.php file executed');
}
});
});
</script>
I don't know how to explain this, but I will do my best...
I am trying to submit a form normally, but the request result will be displayed at a iframe. Everything goes fine to here. What I want to do (if it is possible) is to animate the form putting a message into it (like "sending...") ultil the iframe is load with the respose. I now this is so confuse, but take a look to my files:
index.php
I have ommited the header because is so obvius.
<form enctype="multipart/form-data" method="post" action="upload.php" target="my_iframe" id="form-upload">
Choose your file here:
<input name="uploaded_file" type="file"/>
<input id="send-button" type="submit" value="Subir imagen"/>
</form>
<IFRAME name="my_iframe" SRC="upload.php" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0"></iframe>
<script type="text/javascript">
$(document).ready(function(){
$('#send-button').sendImage({formid: "form-upload"});
});
</script>
upload.php
Just for testing porpuses.
<?php
if( isset($_FILES['uploaded_file']) )
echo "image sent";
animate.js
This is where I am dealing with that. Because when I access the index.php always the message sending... is showed instance of the form elements.
var conf;
jQuery.fn.sendImage = function(args) {
conf = $.extend( {
}, args);
this.on('click', function(e){
e.preventDefault();
$('#'+conf.formid).submit();
$('#'+conf.formid).html('sending...');
});
}
Once a form is submitted, all processing on the current page stops. Anything you do must be BEFORE you actually submit the form. You alternative is to submit via AJAX.
I'm developing a plugin in Wordpress and am having difficulty trying to post data to a separate PHP file using Ajax without reloading the page. On the backend, the PHP file is relying on if( isset() ) to execute an SQL query. On the client side, the user should see individual records fadeOut and a message that records were successfully deleted.
UPDATE: The javascript is working so far, once the form button is clicked, the correct div-s fade in and fade out. However, the PHP file is not getting any value posted to it, as tested with a var_dump.
HTML Code:
<!-- problem: when setting "action" to a url, that page is automatically loaded. I want to stay on the existing page. -->
<form action='' id='form-delete-assoc' method='post'>
<input name='remove_all' type='submit' id='remove-all' value='Remove All'></input>
</form>
JQUERY: (updated with some fixes suggested by answerers)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tr.assoc_row').show();
$('#settings-removed-msg').hide();
$('#new-assoc-msg').hide();
$('#formdeleteassoc').submit(function(e){
e.preventDefault();
$.ajax ({
type: 'POST',
url: '<?php echo $cb_t2c_remove_all_url; ?>',
data: {removeall: 'yes'
},
success: function() {
$('#settings-removed-msg').fadeIn('fast');
$('tr.assoc_row').fadeOut('fast');
}
});
});
$('#formsavesettings').submit(function(){
$('#new-assoc-msg').fadeIn('fast');
});
});
</script>
remove_all.php:
<?php
//remove_all.php
global $wpdb;
$prefix = $wpdb->prefix;
$remove_var_dump = $_POST['removeall']; //returning NULL
var_dump($remove_var_dump);
if ( isset( $_POST['removeall'] ) ){
$wpdb->query("DELETE FROM ".$prefix."cb_tags2cats");
}
?>
Like the others said, you need to either return false or use preventDefault(). You should also move your calls to fadeOut and fadeIn into the success callback. If you don't and the request is unsuccessful for some reason, the user may be misled into thinking it was successful.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tr.assoc_row').show();
$('#settings-removed-msg').hide();
$('#form-delete-assoc').submit(function(e){
// prevent the form from submitting normally
e.preventDefault();
$.ajax ({
type: 'POST',
url: '/delete-assoc.php', // Relative paths work fine
data: { removeall: 'delete-all' },
success: function(){
$('tr.assoc_row').fadeOut('slow');
$('#settings-removed-msg').fadeIn('slow');
}
});
});
});
</script>
Your form submit event needs to return false, to stop the form from actually submitting.
$('#form-delete-assoc').submit(function(){
... rest of your code here...
return false;
}
to post data to a separate php page without reloading current (parent or top) page, create a hidden iFrame and use it as the submit target. this type of solution allows posting and retrieving json responses. this snippet uploads a file to a php page.
<script type="text/javascript">
function init() {
document.getElementById('file_upload_form').onsubmit=function() {
document.getElementById('file_upload_form').target = 'upload_target'; //'upload_target' is the name of the iframe
}
}
window.onload=init;
</script>
</head><body>
<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.php">
<input name="file" id="file" size="27" type="file" /><br />
<input type="submit" name="action" value="Upload" /><br />
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
this tutorial explains the process step by step ->
http://www.openjs.com/articles/ajax/ajax_file_upload/
follow up on how to parse the response ->
http://www.openjs.com/articles/ajax/ajax_file_upload/response_data.php
I am using the following code to effect an iframe that allows an ajax file upload on submit of the form without refresh.
This works as expected
window.onload=init;
function init() {
document.getElementById('form').onsubmit=function() {
document.getElementById('form').target = 'iframe';
}
}
What i would like to do is the same thing but 'onchange' of the file field input, i.e. when the user has chosen a file, to autmatically trigger the init() function and thus upload the file. I have tried with this code:
document.getElementById('file').onchange=function(){...
This doesn't work, and i'm completely stuck. Any ideas?
Many thanks
This should work for you
<script type="text/javascript">
window.onload = function() {
// add old fashioned but reliable event handler
document.getElementById('file_input').onchange = function() {
// submit the form that contains the target element
this.form.submit();
}
}
</script>
<iframe name="my_iframe"></iframe>
<form target="my_iframe"
action="your/file.ext"
method="post"
enctype="multipart/formdata">
<input type="file" name="my_file" id="file_input">
<!-- for no js users -->
<noscript>
<br/>
<input type="submit">
</noscript>
</form>
i think something like .live() will solve your issue hopefully, comment if you want more info on how to use it...
Give the file input element an id and:
$(document).ready(function(){
$(element).change(function(e){
fileInfo = e.currentTarget.files[0];
init();
});
});
I an working on a project and has encountered a problem. please view the following code.
<iframe name="stus" id="stus" style="display:none;"></iframe>
<form name="water" id="water" method="post" autocomplete="off" action="components/com_pocketsea/assets/new/water.php" target="stus">
<input type="hidden" id="newwatermark" name="newwatermark">
</form>
<div id="posting"></div>
and the code for water.php is
<?php
$newwat = $_POST['newwatermark'];
?>
<script type="text/javascript" src="../../js2/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$("#posting", window.parent.document).html("<?php echo $newwat; ?>").fadeIn('slow');
});
</script>
plz help
In your child window, your window object has a property called opener which points to the window object of the window that opened it. So when you want to insert data entered into a form in the child window into the page of the parent window, you would do:
$('#myform').submit(function(){
opener.document.getElementById('namearea').innerHTML = document.getElementById('nameform').value;
});
I don't know what you want (you did not specified), but I would change my Js code to this:
$(document).ready(function(){
$('#posting').html($newwat).fadeIn('slow');
});