We all know it's not possible to do file upload using jquery alone. But it is possible to do a work around using jquery and hidden IFrame.
I have found four solutions using this method, but don't see how I can implenent them.
This solution found here on Stackoverflow, is one way of doing it. But I'm not sure if it's the best way. (not tested)
Using jQuery Form plugin is another option. I tried following this example, but it did not help. The solution loads my uploader.php in a new page and it's not able to get file info. I can't see it using IFrame.
Ajax File Upload is another solution - this one is crating a dynamic IFrame. Looking at the example code, I can't fiure out how to implement this.
The last solution is AJAX file upload from Webtoolkit. Here I can't figure out where I should declare what PHP file it should load for file handling.
Does anyone have a working example using one of these methods?
I have used Uploadify in a another solution - but I don't want to use flash now.
For #3 This is basically right off their website.
I'm a .Net guy, so I can't really help you on the .php handler you'll need to receive the file, but I hope you find this useful.
<html>
<head>
<link href="http://www.phpletter.com/css/general.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
//YOUR URL TO RECEIVE THE FILE
url: 'http://localhost/testing/postfile.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(data.error);
alert(e);
}
}
)
return false;
}
</script>
</head>
<body>
<form name="form" action="" method="POST" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>Ajax File Upload</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>
</tr>
<tr>
<td>Please select a file and click Upload button</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
Related
I noob and get mad when submit php form, convert input value to json, and other php file get it.
html
<form action="submit.php" method="post" name="form1" id="myform">
<table width="100%" border="0" style="font-size: 65px;">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<tr>
<td></td>
<td><button id="submit">Submit</button></td>
</tr>
</table>
</form>
<script src="script.js"></script>
script.js
$('#myform').submit(function (event) {
name = $('#name').val();
var data = {
name: name
}
$.ajax({
type: "POST",
url: 'submit.php',
contentType: 'application/json',
data: JSON.stringify(data),
dataType: 'json'
});
return false
});
php file
header('Content-Type: application/json');
$name_dirty = json_decode($_POST['name']);
echo $name_dirty;
Can someone help me? submit.php got blank, I cant get the value that I submit from html page. Big Thanks
Your Html
<table width="100%" border="0" style="font-size: 65px;">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<tr>
<td></td>
<td><button id="submit">Submit</button></td>
</tr>
</table>
<script src="script.js"></script>
Your JS
$('#submit').click(function() {
name = $('#name').val()
var data = {
name: name
}
$.ajax({
type: "POST",
url: 'submit.php',
data: data
dataType: 'json'
complete: function (resultData) {
alert('data has been send')
})
})
In your php:
<?php
print_r($_POST['data'])
A few notes. Make sure you check your paths. In my answer i assumed that the problem is in the code and not in wrong paths. Also when you use form tag you can use a submit button like <input type="submit" value="Submit"> to submit your form without using Javascript. It would work in your case but it's just another way to tackle your issue.
In my answer i removed your form tags and triggered the action on button click. There will be no redirect to the page but you can set a redirect inside the js if it is important to you, on success function of the ajax that i added. At the moment i just throw an alert message when it works successfully.
Everything is ok in my code but jQuery does not affect the code at all. I have ascss.css and other file that I have include and all of them work but this animation (fadeIn) does not
<head>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$document.ready(function(){//this code does not run
$(".btn").submit(function(){
$(".find").fadeIn(3000);
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="searchFile.php">
<table>
<tr><br>
<td >id :</td>
<td><input name="id" type="text" maxlength="40" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input name="search" type="submit" value="search" class="btn"/></td>
</tr>
</table>
</form>
<?php
if(isset($_POST['id']) and !empty($_POST['id']) and strlen($_POST['id'])==10)
{
require_once("staticfileread.php");
$s=staticfileread::search($_POST['id']);
echo "<br><br><div class='find'>$s</div>";
}
?>
</body>
</html>
First: $document is undeclared, so you'll throw a reference error.
$document.ready(someFunction) should be $(document).ready(someFunction), or the short hand: $(someFunction).
Second: Submit events fire on forms not submit buttons.
Third: Even if the event handler was called, it is entirely possible that the form would finish submitting and a new page load before the content you were fading in had appeared.
Fourth: You only show $(".find") after the new page has loaded anyway, and it appears to be visible by default so there is nothing for it to fade in from.
$document.ready(function() {
// Should be:
$(document).ready(function() {
When that is said; You can shorten the .ready function down to:
jQuery(function($) {
// Same as $(document).ready(function() {});
});
Also note that you properly want to change:
$(".btn").submit(function() { ...
// Buttons doesn't emit a submit event, but forms do:
$("#form1").submit(function() { ...
There are two problems with your code:
$document should be $(document)
The submit() listener can only be bound to <form> elements. It should be $("#form1").submit().
in your code jquery code need to start like
$(document).ready(function() {
// need to write your code here
});
check it once..
I have found a very nice jQuery script that helps me to get values from checkboxes sent to the URL as an array. This works perfectly, but I need the page to refresh after each selection, but by doing this, the checkboxes uncheck in Google Chrome (works fine in FF). The URL keeps fine, but the checkboxes all uncheck.
Is there any way in jQuery to keep the checked checkboxes checked after a refresh? Normally for me, when wanting a checkbox to be checked after a post or refresh, I can use an if-statement within the checkbox that i.e. says if($_GET[selected] == $value){ echo "checked"; }
You can test the code here: http://mazey.dk/bato/temp.php
The code looks like this:
<?
$actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[PHP_SELF]";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Konfigurator</title>
<link rel="stylesheet" href="main.css" />
<style type="text/css">
body,td,th {
font-family: Tahoma, "Titillium Web", sans-serif;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="flowers">
<?
$hent_access = mysql_query("SELECT * FROM bato_produkter WHERE typen = 2");
while($hent_access_data = mysql_fetch_array($hent_access)){
$erstat2 = str_replace('BATO','bata',$hent_access_data[navn]);
?>
<div class="flowers">
<label>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td><img src="images/<?=$hent_access_data[vnr]?>.jpg" width="150" class="apply_image" /></td>
</tr>
<tr>
<td class="product_list_header"><?=$erstat2?></td>
</tr>
<tr>
<td class="product_list_header">kr. <?=$hent_access_data[pris]?></td>
</tr>
<tr>
<td class="product_list_header"><input type="checkbox" name="selected[]" value="<?=$hent_access_data[vnr]?>" /></td>
</tr>
</table>
</label>
</div>
<?
}
?>
</div>
<script>
$('input[type="checkbox"]').on('change', function(e){
var data = [],
loc = $('<a>', {href:window.location})[0];
$('input[type="checkbox"]').each(function(i){
if(this.checked){
data.push(this.name+'='+this.value);
}
});
data = data.join('&');
$.post('<?=$actual_link?>', data);
if(history.pushState){
history.pushState(null, null, loc.pathname+'?cart=<?=$_GET[cart]?>&'+data);
location.reload();
}
});
</script>
</body>
</html>
---- EDIT ----
After reading the comments and researching for a while, I am now trying to do it all through jQuery and AJAX calls, as I can read would be the most correct to do (and I get to learn something entirely new). So this is what I've got so far:
<form action="" method="post">
<?
$hent_access = mysql_query("SELECT * FROM bato_produkter WHERE typen = 2");
while($hent_access_data = mysql_fetch_array($hent_access)){
$erstat2 = str_replace('BATO','bata',$hent_access_data[navn]);
?>
<label>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td><img src="images/<?=$hent_access_data[vnr]?>.jpg" width="150" class="apply_image" /></td>
</tr>
<tr>
<td class="product_list_header"><?=$erstat2?></td>
</tr>
<tr>
<td class="product_list_header">kr. <?=$hent_access_data[pris]?></td>
</tr>
<tr>
<td class="product_list_header"><input type="checkbox" name="selected[]" value="<?=$hent_access_data[vnr]?>" /></td>
</tr>
</table>
</label>
<?
}
?>
</form>
<script>
var data = $("form").serialize();
var checked = []
$("input[name='selected[]']:checked").each(function ()
{
$.ajax({
url: "hello.php",
type: "POST",
async: true,
cache: false,
data: data,
success: function(data){
alert(data)
}
});
});
</script>
The hello.php file looks like this:
<?php
include('../settings.inc.php');
foreach ($_POST[selected] as $value) {
$list_valg = mysql_query("SELECT * FROM bato_produkter WHERE vnr = '$value'");
$list_valg_data = mysql_fetch_array($list_valg);
$pris += $list_valg_data[pris];
$space_used += $list_valg_data[funktion];
}
echo $pris." - Space used ".$space_used."<br/>Total Space available ".$vogn_space;
?>
Now I've gotten the alert to show me the result, but only when I refresh the page manually (CTRL+R), and furthermore it loads an alert-box for every checkbox checked.
What I am trying to accomplish right now, is for the alert box to show the results from hello.php when checking a checkbox, but only once with all the checkboxes accumulated.
----- EDIT -----
Everything now works like I wanted it to, so that's absolutely perfect!
As an extension I have one more thing:
If you look at the site - http://mazey.dk/bato/temp.php
When you have picked the first item with the radio button the checkboxes show. When you check a checkbox you can see in the upper left hand corner the status of the selection and also the space availible. For the products with the checkboxes they all require a certain amount of space. Visually it is displayed in the last part of the text (1/3, 2/3 or 1/1) but it is also stored in a table row for every product (stored as integers; 1,2,3).
Can you lead me on the way in how to accomplish the products + checkboxes to be hidden if the products space exceeds the space available?
Thanks a bunch!
You are iterating through the selected boxes on page load instead of on the change event.
You have 2 options, a submit button or post every time a checkbox is clicked.
You mentioned you wanted to wait until all checkboxes are done being checked, but the script will never know that the user is done clicking checkboxes unless you have a submit button. However, in this case you don't want a submit button according to your question.
The following will post the selected values upon clicking the checkboxes on or off. The event will be fired each time a checkbox is manipulated and your returned data can be used to manipulate a table or it can return HTML. In this example its returning the data as HTML from hello.php which then places that response in a div element with the id of "result"
<form action="" method="post">
**** ADDED FOR NEW QUESTION ****
<input type="hidden" id="totalSpaces" value="12">
<?
$hent_access = mysql_query("SELECT * FROM bato_produkter WHERE typen = 2");
while($hent_access_data = mysql_fetch_array($hent_access)) {
$erstat2 = str_replace('BATO','bata',$hent_access_data[navn]);
?>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td><img src="images/<?=$hent_access_data[vnr]?>.jpg" width="150" class="apply_image" /></td>
</tr>
<tr>
<td class="product_list_header"><?=$erstat2?></td>
</tr>
<tr>
<td class="product_list_header">kr. <?=$hent_access_data[pris]?></td>
</tr>
<tr>
*** EDITED FOR NEW QUESTION ***
<td class="product_list_header"><input type="checkbox" name="selected[]" value="<?=$hent_access_data[vnr]?>" data-spaces="<?=$hent_access_data['pris']?>" /></td>
</tr>
</table>
<?
}
?>
</form>
<div id="result"></div>
<script>
*** ADDED FOR NEW QUESTION ***
var totalSpaces = $('#totalSpaces').val();
var usedSpaces = 0;
// triggered when user clicks a checkbox
$('input[name="selected[]"]').on('change',function () {
*** ADDED FOR NEW QUESTION ***
currentSpaces = parseInt($(this).data('spaces');
if ($(this).is(':checked')) usedSpaces += currentSpaces;
else usedSpaces -= currentSpaces;
if (usedSpaces > totalSpaces) {
alert('Will not fit');
return false;
}
// grabs the selected checkbox values
var data = $("form").serialize();
// Sends the data via POST to hello.php
$.ajax({
url: "hello.php",
type: "POST",
dataType: 'html',
async: true,
cache: false,
data: data,
success: function(data) {
*** ADDED FOR NEW QUESTION ***
if (usedSpaces == totalSpaces) {
alert ('All spaces used');
$('input[name="selected[]"]').not(':checked').prop('disabled',true);
}
else {
$('input[name="selected[]"]').prop('disabled',false);
}
$('#result').html(data);
}
});
});
</script>
Please see the edits marked ADDED or EDITED
Okay, so I've been having a problem for the past four days, and a couple hours ago, I think I may have solved part of it (fancybox example #5, on their site, seems to be something that I want), however, I cannot get any part of it to work.
<? if($_GET['page'] != "startTime"){ ?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="/./fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="/./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#startTime").fancybox({
'padding' : 0,
'scrolling' : 'no',
'titleShow' : false,
'onClosed' : function() {
$("#login_error").hide();}
})
});
$("#startTimeForm").bind("submit", function() {
if ($("#year").val().length < 4) {
$("#login_error").show();
$.fancybox.resize();
return false;
}
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "downTime.php?page=ajax",
data : $(this).serializeArray(),
success : function(data) {
$.fancybox(data);
}
});
return false;
});
</script>
<? } ?>
<? if($_GET['page'] == "ajax"){
var_dump($_POST); } ?>
<? if($_GET['page'] == "startTime"){?>
<div style="width:250px" class="new">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="new">
<tr>
<form id="startTimeForm" method=post>
<p id="login_error">Please, enter data</p>
<tr>
<td>Enter Year</td>
<td><input class="czas" id="sec" name="year" type="text" size="5" maxlength="5" value="00" /></td></tr>
<tr>
<td colspan="2" align="center"><br /><input class="czas" type="submit" name="newTime" value="Set Start Time" /></td></tr>
</form>
I also had used a javascript function, below, and I'd eventually like that to work in the code above, but I cannot get the above to work properly. It just does nothing. Firebug also reports no errors.
<script>
function closeFB() {
<? $unix = mktime(0, 0, 0, 1, 1, $_POST['year']); ?>
$("#startTimeDiv").html("<div id='message'></div>");
$("#message").html("<p>Contact Form Submitted!</p>")
.append("<p>We will be in touch soon.<br><? echo $unix; ?></p>");
$.fancybox.close();
}
</script>
So, any help would be appreciated. Please tell me what I'm doing wrong.
The demonstration here worked to solve the problem. It created another problem, but that is for another question. I believe that was your demo, JFK, so thank you.
$.ajax({
type : "POST",
cache : false,
url : "downTime.php?page=ajax",
data : $(this).serializeArray(),
success : function(data) {
Instead of:
$.fancybox(data);
Try
$("#fancyboxdiv").fancybox(data);
}
});
Where fancyboxdiv is the name of your element that hosts the fancybox.
You will change the other functions to
$("#fancyboxdiv").fancybox().close()
etc..
Most JQuery UI components require a element to work off of as its parent and it will usually modify that element adding/removing elements to it and changing CSS to give appearance that is needed
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getsuggestion()
{
var seltxt=$('#selstate').val();
//alert(seltxt);
$.ajax({
type: "POST",
url: "getstate.php",
data:{state: seltxt },
dataType: 'json',
success: function(data){
//alert(data['test']);
if(data['test']==0)
{
$("#suggestion").text("");
alert("No suggestion");
}
$.each(data,function(key,value)
{
//alert(key);
if(key!="test")
{
str=str+value+",";
$("#suggestion").text(str);
}
});
},
error: function(error,txtStatus) { alert(txtStatus);}
});
}
</script>
</head>
<body>
<form name=f1 method=post>
<table>
<tr>
<td>Select State:</td>
<td><input type=text id=selstate onkeyup="getsuggestion();">
</td>
</tr>
<tr> <td></td>
<td><div id="suggestion"></div>
</td>
</tr>
</table>
</form>
</body>
</head>
</html>
Hi,I want to make a suggestion list.For that I've used text box for getting input from the user.But now I want the values, stored in database,to be retrieved in the form of list.Here I am getting values in text the format.How do I conver text box into list?Or what should I do to append list to the text box?
You can use autocomplete feature of jQuery UI.You can download from http://jqueryui.com/download
You should use something like jQuery UI-Autocomplete: http://jqueryui.com/demos/autocomplete/
It provides all the stuff needed to do as you ask and also the demos required for you to learn how to do it yourself.