I'm calling my function in my HTML, and even though the function originates in the same file I'm receiving an error stating that the function is undefined. I cleared the browser cache, but with no luck.
I tried calling the function in a click event in the same <script>, but the click event wasn't recognized at all:
$("#addFileButton").on("click", function() {
uploadFile();
console.log("click")
})
This is what my code looks like now:
<!-- HTML -->
<input id="getFile" type="file" multiple="multiple"/><br />
<input id="addFileButton" type="button" value="upload" onclick="uploadFile();" />
<!-- etc -->
</div>
<script>
function uploadFile() {
// code
}
</script>
JSFiddle link: https://jsfiddle.net/Tsardines/Lrcgfjhq/5/
I have validated, It is working fine.
see here - jsbin.com/nuzuqomoku/edit?html,js,console,output
Add a click event through jquery and then call the uploadFile method inside it
<html>
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- HTML -->
<input id="getFile" type="file" multiple="multiple"/><br />
<input id="addFileButton" type="button" value="upload" />
<!-- etc -->
</div>
<script>
$(document).ready(function(){
function uploadFile(){
alert('File Uploaded');
}
$("#addFileButton").on("click", function() {
uploadFile();
console.log("click")
});
});
</script>
</body>
</html>
If this is the code:
<!-- HTML -->
<input id="getFile" type="file" multiple="multiple"/><br />
<input id="addFileButton" type="button" value="upload" onclick="uploadFile();" />
<!-- etc -->
</div>
<script>
function uploadFile() {
// code
}
</script>
I don't see a problem with this code. Please make sure that you save and load the right file. You might just forget to load the right file. ^_^
Related
(I'm new to HTML/JS). I'm trying to clean up my HTML file to bear-bone markup and put all logic in a .js file, including the CDN inclusions. I'm aware of How to include CDN in javascript file (*.js)?
In the HTML below, I tried to move the 2 'src' lines at the bottom, to form_validation.js, also shown below. But when I do that, the Semantic UI form validation stops working and I get error messages that .form is not a function etc. That addCDN() call in the JS file doesn't do it.
I imagine this has to do with me not understanding the order in which these things are processed by the browser... I would greatly appreciate some education.
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<style>.container {margin: 15em;}</style>
</head>
<body>
<div class="container">
<form class="ui form">
<p>Give this a try:</p>
<div class="field">
<label>Name</label>
<input placeholder="Your Name?" name="name" type="text">
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
</form>
</div>
<!-- get these guys out-a-here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<!-- ..... -->
<script src="form_validation.js"></script>
</body>
</html>
/*
* form_validation.js
* Uses Semantic UI validation JSON
*/
function addCDN(){
// Can be removed? Ideally not in the HTML file...
var jq = document.createElement('script');
jq.setAttribute('src',
'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'
);
document.head.appendChild(jq);
var sui = document.createElement('script');
sui.setAttribute('src',
'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js'
);
document.head.appendChild(sui);
}
$(document).ready(function(){
addCDN(); // this doesn't seem to happen :(
$('.ui.form').form({
fields: {name : ['minLength[6]', 'empty']}
});
});```
Below is the HTML. I load in the cdn hosted lib for PapaParse in the header. But when I run my JavaScript file and it runs the function where I call Papa.unparse(data); It throws an error saying that Papa is not defined. So
I am a bit confused on what the exact issue here is because I clearly have loaded it into the html and before my JavaScript scripts are loaded as well.
Help is much appreciated.
Edit: I have fixed the issue. The problem was the cdn itself. I assume the links are broken or the file is not on their server. It may also be that specific version, I suspect this is most likely the cause. Tested same version with cdnjs still does not work. Weird.
<script src="https://fastcdn.org/Papa-Parse/4.1.2/papaparse.min.js"></script>
This version and cdn seems to work. Thanks!
function makeThatExcelFilePapa(data, title) {
var csv = Papa.unparse(data);
return csv;
}
// Make sure the DOM is loaded before trying to add listeners
window.onload = function () {
// Set dropdown list for Brand to be empty on start
document.getElementById("dealerSearchForm").elements["brand"].selectedIndex = -1;
// Call submit method when submit button is clicked
var submitButton = this.document.getElementById("submitButton");
$(submitButton).on('click', getFormData);
$(exportToExcel).on('click', callJSONConverter);
}
var items;
function callJSONConverter() {
//JSONToCSVConvertor(JSON.stringify(items), "Results for " + dealerName, true);
makeThatExcelFilePapa(items, "Results for " + dealerName);
return false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dealer Tab</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script type="test/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.0/papaparse.min.js"></script>
<link rel="stylesheet" href='cnh_dealer_tab.css'>
</head>
<body>
<div class="form-style">
<h3>Find Dealer:</h3>
<form id="dealerSearchForm" method="POST" action="cnh_dealer_tab.html">
Brand:
<select name="Brand" id="brand" required>
<option value="NHAG">NHAG</option>
<option value="NHCE">NHCE</option>
<option value="CSCE">CSCE</option>
<option value="CSAG">CSAG</option>
</select>
<div id="goRight">
SAP Code:
<input type="text" id="sapCode" name="SAPCode" required>
</div>
<br>
<br> Dealer:
<input type="text" id="dealer" value="" readonly>
<br>
<br>
<button id="submitButton">Submit</button>
<input type="reset" name="reset">
<button id="goToCountyTab">Go to County Tab</button>
<button id="exportToExcel">Export to Excel</button>
</form>
</div>
<div id="jsGrid" class="form-style">
<span class="grid">
<script type="text/javascript" src='cnh_grid_data'></script>
<script type="text/javascript" src='cnh_ssm_assignments'></script>
</span>
</div>
</body>
</html>
Thanks.
Try doing:
$(document).ready(function() {
function makeThatExcelFilePapa(data, title) {
var csv = Papa.unparse(data);
return csv;
}
});
And, as others have pointed out, don't load the Papa library twice.
here is my function which is put into its own file(Javascript/submitDate.js):
document.onload = function(){
function submitDate(){
var time = new Date();
var nowDate =time.toISOString().slice(0,-14);
document.getElementById("dateShow").value=nowDate;
}
submitDate();
}();
This ran fine before I joined the page with my index.(When I put all my javascript and page layout into one file)
Here is the page(projectMain.html) of the code:
<html>
<div id="container">
<header>
<h3>Entries close on the 10th of March</h3>
</header>
<section>
<aside onload="submitDate();">
Last submitted:
</br>
<input type="date" id="dateShow" readonly>
</aside>
</section>
No errors pop up and it just shows the date layout box as: mm/dd/yyyy
EDIT:
The folder has a capital J.
Edit 2.0:
Link to what is shown. Underneath the "last submitted" is the date function that is not working. : http://prntscr.com/60ie8k
Edit 3.0:
Here is my Index:
<html>
<head>
<title>Sample Template</title>
<link rel="stylesheet" language="text/css" href="CSS/stylesheet.css"/>
<script language="javascript" src="Javascript/AJAX.js"></script>
</head>
<body onload="javascript:changePage('home');">
<h1>Little Big Planet</h1>
<div class="menu">
<a onclick="javascript:changePage('home');">Home</a>
<a onclick="javascript:changePage('powerups');">Power Ups</a>
<a onclick="javascript:changePage('bots');">Sackbots</a>
<a onclick="javascript:changePage('costumes');">Costumes</a>
<a onclick="javascript:changePage('projectMain');">Form</a>
</div>
<br />
<div id="content">
</div>
<script type="text/javascript" src="Javascript/submitDate.js"></script>
</body>
</html>
The aside element doesn't have an onload attribute (or load event). Only elements that load external content (e.g. <img>) and the document itself (where the attribute lives on the <body> element) do.
Use a <script> element instead.
<aside>
Last submitted:
</br>
<input type="date" id="dateShow" readonly>
</aside>
<script>
submitDate();
</script>
Additionally, you say that the file lives at "javascript/submitDate.js" but you are loading src="Javascript/submitDate.js". The function won't be available to call if you are using a case-sensitive file system (as the URL will 404).
You have a capitol 'j' in JavaScript in your HTML.
<script type="text/javascript" src="Javascript/submitDate.js"></script>
Try loading the js when the document is loaded
JS file:
document.onload = function(){
function submitDate(){
var time = new Date();
var nowDate =time.toISOString().slice(0,-14);
document.getElementById("dateShow").value=nowDate;
}
submitDate();
}();
The aside in your html
<aside>
Last submitted:
</br>
<input type="date" id="dateShow" readonly>
</aside>
Link to js file in the bottom of your body
<script type="text/javascript" src="pathtojsfile"></script>
Here is a working Fiddle
My pop up form is working very well in JSFIDDLE, but not working in my server. The following code:
I don't forget to put in <head>:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="assets/js/loginPopUp/jquery_popup.js"></script>
<script src="assets/js/loginPopUp/jquery_popup.css"></script>
</head>
HTML:
<ul id="topRight-link">
<li> Register </li>
<li id="popUp-login"><img src="">Login</li>
</ul>
<div id="login-PopUp-box">
<form class="form" action="#" id="login">
<h3>Login Form</h3>
<label>Username : </label>
<input type="text" id="username" placeholder="john.wick#yahoo.com"/>
<label>password : </label>
<input type="text" id="password" placeholder="************"/>
<input type="button" id="loginbtn" value="Login"/>
<input type="button" id="cancel" value="Cancel"/>
</form>
</div>
CSS:
#login-PopUp-box {
display:none;
}
Lastly, Script is here:
<script type="text/javascript">
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
</script>
And here is JSFIDDLE.
The code in both server and jsfiddle are totally the same. I tried to view source page in the browser, and the files for <head> are staying there. But it's not working in my server. Am I missing something?
JSfiddle is adding JS with onload - so that should work -
$( document ).ready(function() {
console.log( "ready!" );
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
});
Write your function as below
<script type="text/javascript">
$(function(){
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
});
</script>
Just put this code below. Replace your $("#login-PopUp-box").css("display", "block");
$("#login-PopUp-box").show()
I am trying to disable a submit button, and have it be enabled when a checkbox is ticked. Simple example works on jsfiddle
http://jsfiddle.net/8YBu5/522/
But not when trying it in my template (with bootstrap etc).
My template has the checkbox
<input type="checkbox" id="checky">terms and conditions
Then the button
<input type="submit" value="Submit" id="submit" class="btn btn-success btn-lg btn-block">Submit</button>
Then the javascript. Does the javascript need to be at the top or something?
<script type="text/javascript">
$('#submit').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
$('#submit').removeAttr('disabled');
}
else {
$('#submit').attr("disabled","disabled");
}
});
</script>
Anyone see where I'm going wrong?
Thanks
UPDATE
Thanks for all the suggestions, I've now tried adding the $(document).ready(function() { to the start of my script and changed .attr to .prop , still not working. Little more info: The button isn't disabled from the start, so maybe I'm not referencing the button properly in the function?
UPDATE2
I've tried adding an alert to see if my javascript is being run, but the alert doesn't show, what could this mean?
<script type="text/javascript">
$(document).ready(function() {
alert("Welcome");
$('submit').prop("disabled", true);
$('checky').click(function(){
if($(this).attr('checked') == true){
$('submit').prop("disabled", false);
}
else {
$('submit').prop("disabled", true);
}
});
});
UPDATE3 The javascript is now running, I've added two alerts, to see what is executing.
//<![CDATA[
$(window).load(function(){
$('#postme').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
alert( "w" );
$('#postme').removeAttr("disabled");
}
else {
alert( "e" );
$('#postme').attr("disabled","disabled");
}
});
});//]]>
When I click the checkbox on or off, I get the e alert, telling me the if statement is always false. Any ideas why?
UPDATE4
The snippet works, just not in my page, alert 2 is always executed, never alert 1
Title
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row padding">
<div class="col-md-12">
<h1></h1>
</div>
</div>
<div class="row padding">
<form id="new_form" action="/page/" method="POST" >
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<div class="col-md-12">
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Creator submission form</h3>
</div>
<div class="panel-body">
<div class="col-md-12">
</div>
</div>
</div>
<br>
<input type="checkbox" id="checky1">
<input type="submit" id="postme1" value="submit">
</form>
</div>
<div class="row padding">
<div class="col-md-12">
</div>
</div>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme1').attr("disabled","disabled");
$('#checky1').click(function(){
if($(this).attr('checked') == true){
$('#postme1').removeAttr('disabled');
}
else {
$('#postme1').attr("disabled","disabled");
}
});
});//]]>
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
<div class="container">
<footer>
<hr>
</footer>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme1').attr("disabled","disabled");
$('#checky1').click(function(){
if($(this).attr('checked') == true){
alert("1");
$('#postme1').removeAttr('disabled');
}
else {
alert("2");
$('#postme1').attr("disabled","disabled");
}
});
});//]]>
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
Your javascript code should be
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
$('#postme').removeAttr('disabled');
}
else {
$('#postme').attr("disabled","disabled");
}
});
});//]]>
</script>
</head>
<body>
<input type="checkbox" id="checky">terms and conditions
<input type="submit" id="postme" value="submit">
</body>
</html>
This snippet is working fine for me.
Update
Use this as click event handler of the checkbox
$('#checky').click(function(){
if($(this).prop('checked')){
$('#postme').removeAttr('disabled');
}
else {
$('#postme').attr("disabled","disabled");
}
});
JSFiddle is a lovely resource. One of the lovely things it does is provide the wrapper for JQuery for you!
Have a little read of this:
Launching Code on Document Ready
To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an onload function:
window.onload = function() {
alert( "welcome" );
}
Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:
$( document ).ready(function() {
// Your code here.
});
Make sure your include your <script> after the rest of your html. Or you can wrap it in:
$(document).ready(function() {
// your code here
});
Also you should use .change instead of .click, in case the user uses the keyboard to check the checkbox.