how to check uniqueness of a username in MySQL database via JSON? - mysql

I have this next page, on which a user can create a new account. My question now is how can i make sure the user inserts a username that doesn't already exist in my MySQL database. The page is available on http://webs.hogent.be/kevinbaeyens/gebruiker.html
the code of this page is:
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nieuwe gebruiker | Sociale buurt</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="onzebuurt.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
window.onload = function() {
document.getElementById("Username").focus();
};
function formulierValideren() {
if (document.getElementById('Username').value == '' || document.getElementById('Username').value == null)
{
alert ('Gebruikersnaam is verplicht.');
document.getElementById('Username').style.borderColor = "red";
return false;
}
else if (document.getElementById('Wachtwoord').value == '' || document.getElementById('Wachtwoord').value == null)
{
alert ('Wachtwoord is verplicht.');
document.getElementById('Wachtwoord').style.borderColor = "red";
return false;
}
else if (document.getElementById('Wachtwoord2').value == '' || document.getElementById('Wachtwoord2').value == null)
{
alert ('Bevestig wachtwoord.');
document.getElementById('Wachtwoord2').style.borderColor = "red";
return false;
}
else if (document.getElementById('Wachtwoord2').value != document.getElementById('Wachtwoord').value)
{
alert ('Wachtwoorden komen niet overeen.');
document.getElementById('Wachtwoord2').style.borderColor = "red";
return false;
}
else
{
var url = "http://localhost:8080/OnzeBuurt2/resources/gebruikers";
var reminder = {};
reminder.naam = jQuery.trim($("#Username").val());
reminder.wachtwoord = jQuery.trim($("#Wachtwoord").val());
var request = new XMLHttpRequest();
request.open("POST", url);
request.onload = function() {
if (request.status === 201) {
reminder.id = request.getResponseHeader("Location").split("/").pop();
} else {
console.log("Error creating reminder: " + request.status + " " + request.responseText);
}
};
request.setRequestHeader("Content-Type", "application/json");
request.send(JSON.stringify(reminder));
var msg = "Registratie succesvol. Klik op OK om u aan te melden op de site.";
if(confirm(msg)){
setTimeout(function() {window.location.href = "http://localhost:8080/OnzeBuurt2/"})
}
}
//end if
}//end function
</script>
</head>
<body class="body2">
<div class="gridContainer clearfix">
<div class="header2">
<center>
Nieuwe gebruiker
</center>
</div>
<div id="formulier2">
<form method="post" name="form" action="">
<p class="labels"><center>Gebruikersnaam *</center></p><input id="Username" type="text" name="Username" placeholder="Gebruikersnaam" size="50">
<p class="labels"><center>Wachtwoord *</center></p><input id="Wachtwoord" type="password" name="Wachtwoord" placeholder="Wachtwoord" size="50">
<p class="labels"><center>Bevestig wachtwoord *</center></p><input id="Wachtwoord2" type="password" name="Bevestig wachtwoord" placeholder="Bevestig wachtwoord" size="50">
<br />
<center><img id="return" name="jsbutton" src="return.png" alt="Terug" /></center>
<br />
<center><input id="bevestig" type="image" src="Bevestig.png" width="200" height="50" border="0" alt="SUBMIT!" onclick="formulierValideren()"></center>
<br />
</form>
</div>
</div>
</body>
</html>
Some notes you need to know:
1) since it's an assignment for school, I can't use PHP.
2) The primary key in my database table 'Gebruiker' is 'ID', the field of 'username' is the field which has to be unique
thanks in advance!

Related

Django liveserver displays as plain text

I ran my server with python manage.py runserver and for some reason it started displaying as plain text. When I run it as a live server it comes out normal. I have no idea what I changed that messed it up. Seems like a longshot but if anyone has encountered the same problem please let me know.
For some reason, when I run it in the django liveserver, it is all wrapped in a pre tag
Here is the full html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{% load static %}
<link rel="stylesheet" href="{% static 'pictures.css' %}">
<link rel="stylesheet" href="{% static 'my_albums.css' %}">
<link rel="stylesheet" href="{% static 'other.css' %}">
<link rel="stylesheet" href="{% static 'text.css' %}">
<link rel="stylesheet" href="{% static 'header_stuff2.css' %}">
<script>
let album_list = []
function display_albums(){
document.getElementById('album_table').innerHTML = ''
table_header = document.createElement('tr')
table_album_header = document.createElement('th')
table_artist_header = document.createElement('th')
table_date_header = document.createElement('th')
table_score_header = document.createElement('th')
table_album_header.innerText = 'Album'
table_artist_header.innerText = 'Artist'
table_date_header.innerText = 'Date'
table_score_header.innerText = 'Score'
let album_location = document.getElementById('album_table')
album_location.appendChild(table_header)
table_header.appendChild(table_album_header)
table_header.appendChild(table_artist_header)
table_header.appendChild(table_date_header)
table_header.appendChild(table_score_header)
album_list.forEach(function (album){
table_row = document.createElement('tr')
album_collumn = document.createElement('td')
artist_collumn = document.createElement('td')
date_collumn = document.createElement('td')
score_collumn = document.createElement('td')
delete_button_button = document.createElement('button')
delete_button_button.innerText = "Delete"
delete_button_button.id = album.id
delete_button_button.onclick = delete_album;
score_box = document.createElement('select')
score_box.innerText = "Score"
score_box.id = album.album_name + '' + '_select'
score_box.onclick = validate(album.album_name + '' + '_select')
score_option_default = document.createElement('option')
album_collumn.innerText = album.album_name
artist_collumn.innerText = album.artist
date_collumn.innerText = album.release_date
let album_location = document.getElementById('album_table')
album_location.appendChild(table_row)
table_row.appendChild(album_collumn)
table_row.appendChild(artist_collumn)
table_row.appendChild(date_collumn)
table_row.appendChild(score_collumn)
table_row.appendChild(delete_button_button)
score_collumn.appendChild(score_box)
score_box.appendChild(score_option_default)
option_counter = 0
while(option_counter != 11){
sc_o1 = document.createElement('option')
sc_o1.innerText = option_counter
sc_o1.value = option_counter
option_counter++
score_box.appendChild(sc_o1)
sc_o1.id = album.album_name + '' + option_counter.toString()
}
})
}
function validate(select_id){
var selected_select = document.getElementById(select_id)
console.log(select_id)
var selected_value = selected_select.options[selected_select.selectedIndex].value
alert(selected_value+''+'gang')
}
function update_score(){
album_list.forEach(function (album){
var select_thing = document.getElementById(album.album_name+''+'_select')
album.score = selected_select.options[selected_select.selectedIndex].value
})
}
document.addEventListener('DOMContentLoaded', () => {
document
.getElementById('flavours')
.addEventListener('input', handleSelect);
document.getElementById('thing').addEventListener('input', handleData);
});
function handleSelect(ev) {
let select = ev.target; //document.getElementById('flavours');
console.log(select.value);
let choices = [];
// for (let i = 0; i < select.selectedOptions.length; i++) {
// choices.push(select.selectedOptions[i].value);
// }
choices = [].map.call(select.selectedOptions, (option) => option.value);
console.log(choices);
}
function handleData(ev) {
let theInput = ev.target;
console.log(theInput.value, typeof theInput.value);
}
/*album_collumn = table_row.createElement('td')
artist_collumn = table_row.createElement('td')
date_collumn = table_row.createElement('td')
album_collumn.innerText = album.album_name
artist_collumn.innerText = album.artist
date_collumn.innerText = album.release_date
*/
function add_albums(){
album_name = document.getElementById('addedInput').value
album_list.push({
album_name: album_name,
artist: "Aidan Stone",
release_date: 2022,
score: NaN,
id: album_name
});
display_albums();
update_score();
}
function delete_album(event){
const delete_button = event.target
const idToDelete = delete_button.id
album_list = album_list.filter(function (album){
if (album.id === idToDelete){
return false
}
else{
return true
}
})
display_albums();
}
</script>
</head>
<body style="
height:3000px;
">
<header class="header">
<div class="search_bar_section">
<form class="search_bar" >
<div ><input class="search_bar_cool" type="text" placeholder="Search"></div>
<img class="search_bar_button" src="pictures/search_bar.jpg">
<!-- When I make it a button it fucks up the shape? -->
</form>
</div>
<div class="header_section">
<div class="nav_stuff">
<li><span>Home</span></li>
<li><span>Add Albums</span></li>
<li><span>About Me</span></li>
<li><span>Other idk</span></li>
<li><span>Other idk</span></li>
</div>
</div>
<div class="profile_section">
<img class="pfp" src="pictures/gkmc.jpg">
</div>
</header>
<body>
<div>
<table border="10" width="100" class="album_table" id="album_table">
<tr>
<th>Album</th>
<th>Artist</th>
<th>Average Score</th>
<th>Score</th>
</tr>
</table>
</div>
<div class="form">
<input type="text" placeholder="Search" id="addedInput",class = "Searchbar">
<button type="button" id="addBtn" onclick="add_albums()"></button>
</div>
<body>

You are not closing html tag. Please use the body tag once. Keep coding standard

How to change textbox background color to red using button and event listener

This is what i've tried.
If I try to use onclick inline js it works but I want to make it work using event listener
function fnameCheck(){
var fname = document.getElementById('fname');
if(fname=""){
alert('Please enter first name');
document.querySelector('#fname').style.backgroundColor = "red";
return false;
}
if(fname.length<=2){
alert('First name cannot be less than 2 character!');
document.querySelector('#fname').style.backgroundColor = "red";
return false;
}
}
document.getElementById('fnameBtn').addEventListener("click",fnameCheck);

Does it solve your query
I just added value attribute to
var fname = document.getElementById('fname').value;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<input type="text" name="" id="fname">
<button id="fnameBtn">Check</button>
<script type="text/javascript">
function fnameCheck(){
var fname = document.getElementById('fname').value;
console.log(fname);
if(fname == ""){
alert('Please enter first name');
document.querySelector('#fname').style.backgroundColor = "red";
return false;
}
else if(fname.length <= 2){
console.log(fname.length);
alert('First name cannot be less than 2 character!');
document.querySelector('#fname').style.backgroundColor = "red";
return false;
}else {
alert('Fname is satisfied');
document.querySelector('#fname').style.backgroundColor = "green";
return false;
}
}
document.getElementById('fnameBtn').addEventListener("click",fnameCheck);
</script>
</body>
</html>

Connecting to Shopify API with Apps Script

I am working on connecting to the Shopify API however the way it is structured for access is apikey:password#storename.myshopify.com
Apps script however will not allow you to use a URL with the login credentials for the UrlFetchApp.fetch function 12345:67890#storename.myshopify.com and I seem unable to pass the information through successfully via the basic headers.
function shopify_connect() {
var url = "https://storename.myshopify.com/admin/products.json/GET";
var apikey = '12345';
var password = '67890';
var headers = {
"User-Agent" :"info#website.com",
"Authentication" : 'Basic ' + Utilities.base64Encode(apikey + ':' + password)
}
var options = {
"headers": headers,
}
var response = UrlFetchApp.fetch(url, options);
}
When I log the output from response, it appears that I am getting to the login HTML however never passing beyond that.
Any help in clarifying this access method would be greatly appreciated.
Logger Response:
[19-01-01 12:09:54:516 EST] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shopify » Please log in</title>
<meta name="referrer" content="never" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="icon" sizes="192x192" href="//cdn.shopify.com/s/assets/touch-icons/touch-icon-192x192-840b11274adbc510a1db23976759bd31ceee84ddbb36478d494a3a2cf19b5ae6.png" />
<link rel="shortcut icon" type="image/x-icon" href="//cdn.shopify.com/s/assets/favicon-4425e7970f1327bc362265f54e8c9c6a4e96385b3987760637977078e28ffe92.png" />
<link rel="apple-touch-startup-image" href="//cdn.shopify.com/s/assets/touch-icons/mobile-startup-564eed49b6c483b80796f529e05b4bf1d54e9cd9beeb0bb89b10d3c6a2282ea6.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="//cdn.shopify.com/s/assets/touch-icons/icon-114x114-precomposed-79d1c57f01b233f016319dc4048d90524e9ce252c058a306ef9db2216ab26911.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="//cdn.shopify.com/s/assets/touch-icons/icon-72x72-precomposed-584c35aa679456ab4e2f1cd971191498d7fecf7321b4ded8bae5c5a2c51176e3.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="//cdn.shopify.com/s/assets/touch-icons/icon-57x57-precomposed-49c0927bd56de30bc28439aed87097b7c8e41f2bb4f00661f01a00729c2a1b77.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=0" />
<link rel="stylesheet" media="screen" href="//cdn.shopify.com/s/assets/dialog-fresh-66526625df0ed5b32afd82a4e7ae3a843a721051c14cdf0f5add5ea1e7988b07.css" crossorigin="anonymous" data-turbolinks-track="true" integrity="sha256-ZlJmJd8O1bMq/YKk5646hDpyEFHBTN8PWt1eoeeYiwc=" />
</head>
<body class="page-auth-login fresh-ui">
<div id="container">
<noscript class="no-js">
In order to use the Shopify admin you need to enable Javascript. <a target="_blank" href="https://www.enable-javascript.com/">Learn how to enable Javascript</a>.
</noscript>
<main role="main" id="dialog-alternate">
<div class="login-form">
<h1 class="dialog-heading">Runeworks Development</h1>
<h2 class="dialog-subheading">Log in to manage your store</h2>
<form class="lookup-form" action="/admin/auth/login" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="o+iwLU/BJDawX3A5Pnpa9S0MCn7CIdhzXoPqXvJoiizZp6sK4FRsLRo6IIAUUAJI5mUgIoFyOpSNqswZJfKRdg==" />
<div id="email-login">
<div class="clearfix">
<div class="login-container">
<div class="lform dialog-form">
<div class="require-cookies">
<div class="ui-banner ui-banner--status-critical ui-banner--within-page">
<div class="ui-banner__ribbon"><svg class="next-icon next-icon--size-20 next-icon--no-nudge" aria-hidden="true" focusable="false"> <use xlink:href="#error-major" /> </svg></div><div class="ui-banner__content-container"><div class="ui-banner__heading"><h2 class="ui-heading">Please enable cookies in your browser preferences to continue.</h2></div></div></div> </div>
</div>
<div id="sign-in-form" class="lform dialog-form">
<input type="hidden" name="redirect" value="" id="redirect" />
<input type="hidden" name="step" value="lookup" />
<div id="login">
<div class="input-group">
<div class="next-input-wrapper"><label class="next-label" for="Login">Email</label><input type="email" name="login" id="Login" spellcheck="false" autofocus="autofocus" required="required" class="next-input" /></div>
<div class="next-input-wrapper"><label class="next-label helper--visually-hidden" for="Password">Password</label><input type="password" name="password" id="Password" class="next-input hidden-password" tabindex="-1" placeholder="Password" spellcheck="false" /></div>
</div>
</div> <!-- /#login -->
<button class="ui-button ui-button--primary ui-button--full-width dialog-submit" type="submit" name="commit" id="EmailConfirm">Continue</button>
</div> <!-- /#sign-in-form -->
<div id="remember-me" class="remember-me">
<input type="hidden" name="remember" id="remember_checkbox_default" value="0" />
<div class="next-input-wrapper"><label class="next-label next-label--switch" for="remember_checkbox">Keep me logged in</label><input type="checkbox" name="remember" id="remember_checkbox" value="1" class="next-checkbox" checked="checked" /><span class="next-checkbox--styled"><svg class="next-icon next-icon--size-10 checkmark" aria-hidden="true" focusable="false"> <use xlink:href="#next-checkmark-thick" /> </svg></span></div>
</div>
</div>
</div>
</div>
<div id="other-login">
</div>
</form>
<script type="text/javascript">
if (typeof window.analytics !== 'undefined') {
window.analytics.trackForm($('[action="/admin/auth/login"]')[0], 'login', {
category: 'login',
subdomain: "runeworks-development.myshopify.com"
});
}
if (!navigator.cookieEnabled) {
$('.require-cookies').show();
}
var showContinueButton = document.querySelector('.email-login a');
if (showContinueButton instanceof HTMLElement) {
showContinueButton.addEventListener('click', showLoginWithEmailBox.bind(this, true));
}
function showLoginWithEmailBox(show) {
var continueButton = document.querySelector('.dialog-submit');
var display = show ? '' : 'none';
document.getElementById('login').style.display = display;
if (continueButton instanceof HTMLElement) {
continueButton.style.display = display;
}
if (showContinueButton instanceof HTMLElement) {
showContinueButton.style.display = show ? 'none' : '';
}
}
(function (){
var ssoEnabled = false;
if (ssoEnabled) {
showLoginWithEmailBox(false)
}
})();
</script>
</div>
</main>
<footer role="contentinfo" id="footer">
<a target="_blank" class="ico ico-shopify-bag" href="//www.shopify.com">
<span class="helper--visually-hidden">Shopify.com</span>
</a> </footer>
</div>
<script src="//cdn.shopify.com/s/assets/admin/admin_jquery-1f0f820501c3b7fcb70379d8fa17d2fcfdb3722abc2a5eeedac0f05bfef7705c.js" crossorigin="anonymous" integrity="sha256-Hw+CBQHDt/y3A3nY+hfS/P2zciq8Kl7u2sDwW/73cFw="></script>
<script src="//cdn.shopify.com/s/assets/admin/auth-af2f48596342908db2529c61a0cfcb59fa7feff59591946bdd8caad81b7abc64.js" crossorigin="anonymous" integrity="sha256-ry9IWWNCkI2yUpxhoM/LWfp/7/WVkZRr3Yyq2Bt6vGQ="></script>
<script>var _gaq = _gaq || [];_gaq.push(["_setAccount","UA-82702-18"]);_gaq.push(["_addDevId","o5cUG"]);_gaq.push(["_setAllowLinker",true]);_gaq.push(["_setDomainName",".myshopify.com"]);_gaq.push(["_setAllowHash",false]);_gaq.push(["_trackPageview","\/admin\/auth\/login"]);</script>
<script id="TrekkieLoader" type="text/javascript">
(function(){
var config = {"Trekkie":{"appName":"admin","development":false,"embedMode":"parent","defaultAttributes":{"shopId":16037216320,"requestIsFromShopify":false}},"Clickstream":{"appName":"admin"},"Performance":{"navigationTimingApiMeasurementsEnabled":true,"navigationTimingApiMeasurementsSampleRate":0.25},"Session Attribution":{},"LastShop":{}};
var trekkie_version = '2017.09.05.1';
var analytics = window.analytics = window.analytics || [];
if (analytics.integrations) {
return;
}
analytics.methods = [
'identify',
'page',
'ready',
'track',
'trackForm',
'trackLink'
];
analytics.factory = function(method) {
return function() {
var args = Array.prototype.slice.call(arguments);
args.unshift(method);
analytics.push(args);
return analytics;
};
};
for (var i = 0; i < analytics.methods.length; i++) {
var key = analytics.methods[i];
analytics[key] = analytics.factory(key);
}
analyt

So after working with it further, taking another look at the example Cooper referenced, I was able to get the connection to process correctly.
Here is the code in the event that someone else has the same issue in the future:
function shopify_connection_test() {
var api_key = '<enter api key here';
var api_pass = '<enter api password here>';
var store_url = 'https://storename.myshopify.com/admin/products.json';
var product = {
"product": {
"title": "Burton Custom Freestyle 151",
"body_html": "<strong>Good snowboard!</strong>",
"vendor": "Burton",
"product_type": "Snowboard",
"tags": "Barnes & Noble, John's Fav, \"Big Air\""
}
}
var payload = JSON.stringify(product);
var headers = {
"Content-Type" : "application/json",
"Authorization": "Basic " + Utilities.base64Encode(api_key + ":" + api_pass)
};
var params = {
"method" : "POST",
"headers" : headers,
"contentType" : "application/json",
"payload" : payload
}
var response = UrlFetchApp.fetch(store_url, params)
Logger.log(response.getContentText())
}
This specifically uploads a product, I didn't want to exclude any information. The references in the Shopify API documentation should be enough for anyone looking to change its overall functionality.

I had a similar problem where Shopify would return a (401) unauthorized {"errors":"[API] Invalid API key or access token (unrecognized login or wrong password)"} when using UrlFetchApp on GAS, even though the request was working perfectly with Postman.
Runeworks Gaming solution worked, the trick is to pass the authorization into a "headers" object, nested in the "params" of the url fetch app.
I have used UrlFetchApp on many other occasions by putting the "Authorization" header directly into the params, but apparently, this won't work with Shopify.
Working:
var SHOP_ID = "Your shop ID";
var API_KEY = "Your API key";
var API_PASSWORD = "Your API password";
var encoded = Utilities.base64Encode(API_KEY + ':' + API_PASSWORD);
var headers = {
"Content-Type" : "application/json",
"Authorization": "Basic " + encoded
};
var options = {
"contentType" : "application/json",
'method' : 'GET',
'headers' : headers, // This is the important part
'followRedirects' : false,
};
var response = UrlFetchApp.fetch("https://" + SHOP_ID + ".myshopify.com/admin/api/2019-04/orders.json?status=any",options);
var RESPONSE_CODE = response.getResponseCode();
var CONTENT_JSON = JSON.parse(response.getContentText());

HTML Drag and Drop and Struts

I've been trying to implement the new "Drag and Drop" file and upload feature, using the code from SitePoint.com. I am using Struts Framework as well. FormFile made my uploads easier, I could just hit on "choose" and click away. But, I just can't seem to get it to work the DnD with Struts. The ActionForm validates and reports that the file size is 0! Here's the code from SitePoint.com (js):
(function() {
// getElementById
function $id(id) {
return document.getElementById(id);
}
// output information
function Output(msg) {
var m = $id("messages");
m.innerHTML = msg + m.innerHTML;
}
// file drag hover
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
// file selection
function FileSelectHandler(e) {
// cancel event and hover styling
FileDragHover(e);
// fetch FileList object
var files = e.target.files || e.dataTransfer.files;
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
ParseFile(f);
UploadFile(f);
}
}
// output file information
function ParseFile(file) {
Output(
"<p>File information: <strong>" + file.name +
"</strong> type: <strong>" + file.type +
"</strong> size: <strong>" + file.size +
"</strong> bytes</p>"
);
// display an image
if (file.type.indexOf("image") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
Output(
"<p><strong>" + file.name + ":</strong><br />" +
'<img src="' + e.target.result + '" /></p>'
);
}
reader.readAsDataURL(file);
}
// display text
if (file.type.indexOf("text") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
Output(
"<p><strong>" + file.name + ":</strong></p><pre>" +
e.target.result.replace(/</g, "<").replace(/>/g, ">") +
"</pre>"
);
}
reader.readAsText(file);
}
else{
var reader=new FileReader();
reader.readAsDataURL(file);
}
}
// upload JPEG files
function UploadFile(file) {
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// create progress bar
var o = $id("progress");
var progress = o.appendChild(document.createElement("p"));
progress.appendChild(document.createTextNode("upload " + file.name));
// progress bar
xhr.upload.addEventListener("progress", function(e) {
var pc = parseInt(100 - (e.loaded / e.total * 100));
progress.style.backgroundPosition = pc + "% 0";
}, false);
// file received/failed
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
progress.className = (xhr.status == 200 ? "success" : "failure");
}
};
// start upload
xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);
}
}
// initialize
function Init() {
var fileselect = $id("fileselect"),
filedrag = $id("filedrag"),
submitbutton = $id("submitbutton");
// file select
fileselect.addEventListener("change", FileSelectHandler, false);
// is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// file drop
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
filedrag.style.display = "block";
}
}
// call initialization file
if (window.File && window.FileList && window.FileReader) {
Init();
}
})();
The jsp (just messing around):
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Upload File</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<form id="upload" action="../Repositore/upload_file.do" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>File Upload Form</legend>
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="20000000" />
<div>
<label for="fileselect">File to upload:</label>
<input type="file" id="fileselect" name="file" multiple="multiple" />
<div id="filedrag">or drop files here</div>
</div>
<div>
<table border='0' cellpadding='2'>
<tr><td><label for="ftags">Tags:</label></td><td> <input type='text' id="ftags" name='tags'/></td><td>(Separate by commas)</td></tr>
<tr><td><label for="desc">Description:</label></td><td> <textarea name="description" id="desc" rows="5" cols="30"></textarea></td></tr>
<tr><td><input type="checkbox" name="comment">Yes</input></td></tr>
</div>
<div id="submitbutton">
<button type="submit">Upload file</button>
</div>
</fieldset>
</form>
<div id="progress"></div>
<div id="messages">
<p>Status:</p>
</div>
<script src="js/filedrag.js" type="text/javascript"></script>
What could be wrong? Help?

How to get values from dynamically created(ajax) textboxes in jsp?

here is my code
index.html:
<html>
<head>
<script language="javascript">
var xmlHttp;
var f=1;
var t = "text";
function showState()
{
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert ("Browser does not support XMLHTTP Request");
return
}
var url="additem.jsp";
xmlHttp.onreadystatechange = stateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChange(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById(t).innerHTML=xmlHttp.responseText;
t = "text"+f.toString();
f=f+1;
}
}
</script></head>
<body>
<center>
<form action=AddProd1.jsp method=post>
Enter Catagory <td><BLOCKQUOTE></BLOCKQUOTE><BLOCKQUOTE><center><input type=text name=catagory></BLOCKQUOTE></td>
</center>
<br><br>
<div id='text'></div><br>
<input type=submit value=Submit>
</form>
<input type=submit value=new onclick="showState();">
</body></html>
additem.jsp:
<jsp:useBean id="ob" class="te.tes" scope="session" />
<%!
String value = "";
String t = "" ;
String v="";
%>
<%
v=ob.Increase();
value = "product" + v;
t = "text" + v;
%>
<html>
<input type=text name=product value="<%=value%>">
<div id='<%=t%>'></div><br>
</html>
AddProd1.jsp:
<% int i;
String [] value = request.getParameterValues("product")
for(i=0;i<value.length;i++)
out.println(value[i]);
%>
I am getting exception in "value.length" in AddProd1.jsp no matter what i try....I even tried to get one value by only putting request.getParameter("product")...But i get null value in return ....what am i doing wrong??? Thanx in advace..