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();
});
});
Related
I have a form in HTML to apply a Discount Coupon to a current shopping cart.
I would like the user to just click on APPLY (after entering the coupon code) and then without refreshing the page, to have some PHP code run so it computes the corresponding discount.
Here is my form:
<form action="">
<input type="text" name="couponCode">
<input type="submit" value="Apply">
</form>
PHP to be run:
if (isset($_REQUEST['couponCode']) && $_REQUEST['couponCode']!='')
{
$couponCode = $_REQUEST['couponCode'];
if ($couponCode == "TEST1")
{
$discount=0.2;
}
}
How would this be done using javascript?
You need to use either the onsubmit event of the form or the onclick event of the button.
In the event handler, you assemble a URL and "get" it. For example:
<script type="text/JavaScript">
function submitCouponCode()
{
var textbox = document.getElementById("couponCode");
var url =
"https://www.example.com/script.php?couponCode=" + encodeURIComponent(textbox.value);
// get the URL
http = new XMLHttpRequest();
http.open("GET", url, true);
http.send(null);
// prevent form from submitting
return false;
}
</script>
<form action="" onsubmit="return submitCouponCode();">
<input type="text" id="couponCode">
<input type="submit" value="Apply">
</form>
Use jQuery AJAX. When it's complete, refresh your page as needed.
You can use Jquery to do an AJAX post you your PHP script, and then use JS to change the contents of the calling page.
http://api.jquery.com/jQuery.post/
It's simple with jQuery. You just have to use the right tag. If you use an "a" tag the page will refresh.
<button id="MyButton">Click Me!</button>
<script>
$("#MyButton").click( function(){
$.post("somefile.php");
});
</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 wrote an array to pass variables in the GET to a search page. The search page only has 4 fields but I'm only passing the most important variables, first name and last. Here is the array:
<?php echo "<td><a href='" . matry::base_to('test/trace', array('first'=>$patient->first , 'last' =>$patient->last)) . "'><ul class='controls'>
<li id='check_orders'><`span class='symbols'>L</span><span class='label'>Skip Trace</span></li>
</ul></a></td>";?>
When the page loads i'm just echoing the _GET to pre populate the first and last input fields on that page..
What I'm looking for is a script that will execute the search with the first and last name fields populated as that page loads automatically. Additionally, when the search is executed it's populating in an iframe. (forgot about that part)~!
I tried using:
<script>document.getElementById('stack').submit();</script>
<form action='http://xxxx.yyyyyyy.com/stuffhere' name='es' target="my_iframe" id="stack">
with no avail.
Your <script> is running before the <form> exists.
Move the <script> below the <form>.
You are calling the submit function before the form is even loaded on the page.
Place the script tag after the closing form tag or call submit on document ready or window onload.
<form id-"stack">
... form fields...
</form>
<script>document.getElementById('stack').submit();</script>
or
<script>$(function(){$('#stack').submit();})</script>
Please imagine this simple example:
<html>
<head>
<script type="text/javascript">
function body_onload() {
var form = document.getElementById('theform');
form.submit();
}
</script>
</head>
<body onload="body_onload()">
<form id="theform" action="action.php">
<input type="hidden" name="query" id="query" value="foo" />
</form>
</body>
</html>
It will submit the form after the page has loaded.
But are you really searching for a non AJAX solution?
Try this, been using this on a redirect page for a while. This of course needs to be below the from so it is run after the browser process the form.
<script type="text/javascript">
function send(o)
{
var f = document.getElementById("theForm");
f.submit();
}
send();
</script>
If you want to submit the form when the page loads you should change your code to this:
<script>window.onload = function(){ document.getElementById('stack').submit(); }</script>
However this will redirect the user (as if they have clicked a form submit button). To avoid this you will need to use AJAX (I recommend using jQuery to do this). See example below:
$(document).ready(function(e) {
var form_data = $("#form_id").serialize();
var form_url = $("#form_id").attr("action");
var form_method = $("#form_id").attr("method").toUpperCase();
$.ajax({
url: form_url,
type: form_method,
data: form_data,
cache: false
});
});
See this page for more info on using AJAX
I need to call a php page from a search bar using nice urls only and without ?q=blahblah parameters.
<form id='searchForm' method="GET" action="/search/">
<input type="text" name="q" id='idInputWhat' value='' />
<input id='formSubmit' type="submit" value="go"/>
</form>
$('#formSubmit').on('click', function(e) {
// some validations here
..
// submit
$('#searchForm').submit();
});
This would generate an url like: example.com/search/?q=blahblah
My aim is to generate an url like example.com/search/q/blahblah
I was thinking to something like
$('#formSubmit').on('click', function(e) {
var nice_url = encodeURIComponent($("#idInputWhat").val());
$('#searchForm').attr('action', 'search/'+nice_url);
$("#idInputWhat").remove();
// submit
$('#searchForm').submit();
});
But it does not seem to work and I'm not really sure it's the best approach.
Any ideas?
If you are going to refresh the page why don't you just do this:
$('#formSubmit').on('click', function(e) {
var nice_url = encodeURIComponent($("#idInputWhat").val());
window.location = 'search/' + nice_url;
});
I just found out that .on() does not works.. it works with .live() even thought it's been deprecated and I'm using jquery 1.8.
I have an HTML form that currently just posts the data directly to a PHP file. I want to update the code so that the submit button sends the data to a JavaScript function so that I can create an AJAX function. Is it possible for the submit button to activate a JavaScript function rather than posting to a php file? The only thing I have come up with is below, which quite obviously does not work:
<html>
<head>
<script type="text/javascript">
function ajax(){
//...
}
</script>
</head>
<body>
<form action="ajax();">
<!-- ... -->
<input type="submit" value="Submit" />
</form>
</body>
</html>
You can give the "submit" input a "click" handler that explicitly prevents the default behavior from being carried out.
<input type='submit' value='Submit' onclick='ajax(event)'>
Then in the function:
function ajax(event) {
if ('preventDefault' in event) event.preventDefault();
event.returnValue = false; // for IE before IE9
// ...
}
edit #Esailija points out correctly that another option is to handle the "submit" event on the <form> element instead. The function would look pretty much the same, in fact exactly the same, but you'd wire it up like this:
<form id='yourForm' onsubmit='ajax(event)'>
That will also trap things like the "Enter" key action, etc.
Of course you can. But it's more useful to call your Javascript function in the input like this :
<input type="submit" value="Submit" onclick="ajax();" />
And remove the action part in the form.
I jQuery you can use event.preventDefault(); otherwise just use return false;
http://jsfiddle.net/mKQmR/
http://jsfiddle.net/mKQmR/1/
Pointy is correct... just add a click handler to the submit button, however make sure the last line of the click handler returns "false" to prevent the form from actually being posted to the form's action.
<html>
<head>
<script type="text/javascript">
function ajax(){
//...
return false;
}
</script>
</head>
<body>
<form action="thispage.htm">
<!-- ... -->
<input type="submit" value="Submit" onclick="ajax();" />
</form>
</body>
</html>