How can I use dropzone without using the class in the form.
I basically want to have a div inside a form and call class="dropzone" in that div. But it doesn't seems to work.
Here is my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
var myDropzone = new Dropzone("div#myId", { url: "file-upload"})
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
</html>
Initiate .ready event when DOM ready and use like this.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var myDropzone = new Dropzone("div#myId", { url: "file-upload"});
});
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
</html>
your url parameter is not pointing to any valid php file. I believe your code should be thus
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
var myDropzone = new Dropzone("div#myId", { url: "upload.php"}) //according to your forms action
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
Related
When text is written into the input box and then the button is clicked, I want the text (value) to be added to the array I have created for it (the array is called 'subject'). The text (value) from the input box is not being added... why?
var subject = [];
function addSubjects() {
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Prueva tu Suerte</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="" action="index.html" method="post">
<input type="text" id="namesInputter" value="">
<button onclick="addSubjects()">Add Player</button>
</form>
<span id='S'></span>
<span id='V'></span>
<span id='O'></span>
<span id='P'></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js"></script>
</body>
</html>
Actually, You code is working. The input value is appending to the array. But the Issue is, You are using form. So when you click the button, It will submit the form right after add the value to array. So page will refresh and the array will become empty.
Just remove form tag, if you don't want to submit data.
var subject = [];
function addSubjects() {
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Prueva tu Suerte</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="namesInputter" value="">
<button onclick="addSubjects()">Add Player</button>
<span id='S'></span>
<span id='V'></span>
<span id='O'></span>
<span id='P'></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js"></script>
</body>
</html>
If you want to use form submit with jQuery, you can use like this:
Html
<form>
<input type="text" id="namesInputter" value="">
<button type="submit">Add Player</button>
</form>
JavaScript
var subject = [];
function addSubjects(e) {
}
$("form").submit(function(e){
e.preventDefault();
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
});
This my code.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="~/Style/fullcalendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="~/Scripts/Custom/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/Custom/moment.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
})
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Doing with asp.net MVC project.It nothing show.What happen and what need more in my code?I just follow do with FullCalendar Basic Usage .Thanks.
To insert HTML code using javascript dynamically, we use innerHTML after a tag is selected. Simple, but for me is not working. I've seen some links on SO and internet to do that.
My code is the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Javascript experiments</title>
<link rel="stylesheet" type="text/css" href="assets/app_item.css"/>
<!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script-->
<script language="javascript" type="text/javascript">
function insert_items(how_much){
for(var i=0; i < how_much; i++){
var div_cont = document.getElementById("my_container");
console.log(div_cont);
div_cont.innerHtml = "<div class='desc_container'><span class='desc'>Some text</span></div>";
}
}
</script>
</head>
<body>
<header>
<h3>Inserting code dynamically in webpage.</h3>
</header>
<p>By pressing the button, it will insert items in webpage</p>
<label>How much:</label>
<input type="text" id="how_much"/>
<input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)"/>
<div id="my_container"></div>
</body>
</html>
When I press the button, nothing occurs. Dynamic content isn't added on the page. I tested on Firefox and Chrome. Even the simplest div_cont.innerHtml = 'asdasd' won't work.
This code is so simple but isn't working. Is there a specific reason for this behavior?
Pay attention to your capitalization of .innerHTML:
div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>";
It should be div_cont.innerHTML = 'asdasd'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript experiments</title>
<link rel="stylesheet" type="text/css" href="assets/app_item.css" />
<!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script-->
<script language="javascript" type="text/javascript">
function insert_items(how_much) {
for (var i = 0; i < how_much; i++) {
var div_cont = document.getElementById("my_container");
console.log(div_cont);
div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>";
}
}
</script>
</head>
<body>
<header>
<h3>Inserting code dynamically in webpage.</h3>
</header>
<p>By pressing the button, it will insert items in webpage</p>
<label>How much:</label>
<input type="text" id="how_much" />
<input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)" />
<div id="my_container"></div>
</body>
</html>
I am very new to phonegap as well as javascript and I'm trying to make a simple Contact Adder application but for some reason nothing happens when I try to add a contact. No alerts even appear. By the way, I am using an android emulator within eclipse to test my application. Can someone tell me what I am doing wrong? Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Add Contacts</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady()
{
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
<body onload = "deviceIsReady()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
This code working for me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="jquery.mobile-1.3.2.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script src="jquery.mobile-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<title>Add Contacts</title>
<script>
function loaded(){
document.addEventListener("deviceready", deviceIsReady, false);
}
function deviceIsReady()
{
document.getElementById("save").addEventListener("click", addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
</head>
<body onload = "loaded()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
I tried in eclipse with android sdk, and I get the alerts on the emulator and after I add a new contact I sow it on the contacts. Before you try this code watch out for the script and style link. (rewrite it, or download the newest)
Your script tag is in-between the head and body tags. Try moving it into the body tag.
Your window load event also probably won't work. Just remove it, and simply attach the device ready event, so your script looks like this:
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady() {
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact() {
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
just remove the
<body onload = "deviceIsReady()">
and make a simple
<body>
you also need to put your
<script>
in head or body, but not between them!
you need to catch the event ondevice ready, but not on bodylaod. so try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady(){
alert("READY!");
}
</script>
</head>
<body>
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
it should works (for me, it works!). if not, check the manifest, maybe you do something wrong with it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var textBox = $('#mdatepicker');
var icon = $('#myButton');
var mydatepicker = textBox.datepicker();
icon.click(function () {
mydatepicker.datepicker("show");
});
});
</script>;
<form id="form1" runat="server">
<input type="text" id="mdatepicker" value="date" />
<input type="button" id="myButton" value="PopUp"/>
</form>
</body>
</html>
Is there anything missing in this html snippet .??
datepicker is not getting populated, ErrorConsole showing error that-
'textBox.datepicker is not a function'
in below code;
var mydatepicker = var mydatepicker = textBox.datepicker();
Can someone help please.?
Thats my working copy of your code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var textBox = $('#mdatepicker');
var icon = $('#myButton');
var mydatepicker = textBox.datepicker();
icon.click(function () {
mydatepicker.datepicker("show");
});
});
</script>;
<form id="form1" runat="server">
<input type="text" id="mdatepicker" value="date" />
<input type="button" id="myButton" value="PopUp"/>
</form>
Is datepicker not a function from the jQuery-UI library?
If so, then you need to include a script reference to the jQuery-UI Library.
EDITS
No You need to add a script reference to the jQuery-UI library and jQuery-UI Css file
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="src of desired theme" />
Are you giving full refrences to js files. Including jquery and datepicker's .js files.
The issue is in this:
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
I can not see any js files regarding datepicker in your head tag where you've included all js refrences.
There must be some file like:
<script type="text/javascript" src="Scripts/datepicker.js"></script>
or something like that, which you are missing to include.
Hope this helps.
if you use jquery datepicker, the 'myButton' object is not necessary, datepicker will handle it for use, see the code:
<html>
<head><title>jQuery Open on button</title>
<link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />
</head>
<body>
<form>
<input id="date" type="textbox"/>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#date").datepicker({ showOn: 'button', buttonText: "select" });
});
</script>
</body>
</html>