Trouble passing a value from HTML5 SELECT object to JS script - javascript

I have a basic web page with an HTML5 SELECT object that has 3 elements populated in it via js/jQuery. I want to take the value selected, and pass the value to a js file that runs a perl script.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
<script type="text/javascript" src="js/RunPerlScript.js" charset="utf-8"></script>
</head>
<body>
<header>
<h1></h1>
</header>
<form name="myForm" method="GET" action="">
<select id="cdLDAP" onchange="run_script_func(this.textvar
<option/>
</select>
</form>
</body>
</html>
JS File:
var selection = #cdLDAP.text
function run_script_func(val){
window.alert=val;
}
Based on my PHP admin console I know the script isn't executing. My Perl script does work as expected, if I run it by itself, so I know it is not that aspect of my code.
Am I using the onchage="" element correctly? and/or is it how the RunPerlScript.js file is structured?

You've only got one
<option />
in your example. For the change event to fire you probably need something to actually change. Try adding another option.

Got the message box to work. The message box was being used to test the script was being called onchange
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
<script type="text/javascript" src="js/RunPerlScript.js" charset="utf-8"></script>
</head>
<body>
<header>
<h1></h1>
</header>
<form name="myForm" method="GET" action="">
<select id="cdLDAP" onchange="run_script_func(this.value)">
<option/>
</select>
</form>
</body>
</html>
And this is the JS File:
function run_script_func(val){
alert(val)
}

Related

VS Code: HTML file not pulling functions from attached javascript

Doing some basic practice/testing for a project I'm working on and can't get my html file to access the functions written in the attached javascript file. I feel like there's something super basic that I'm missing but I can't put my finger on it.
I pulled the basic button from here: Creating an ON/OFF button with javascript
And I tried the solutions here: HTML file not pulling information from javascript file
My html:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>
My js:
function turn(){
currentvalue = document.getElementById('turn').value;
if(currentvalue == "X"){
document.getElementById("turn").value="O";
}
else{
document.getElementById("turn").value="X";
}
}
The function itself works when embedded in a script tag within <body> but not when pulled from the attached javascript file. What am I missing?
function turn(){
currentvalue = document.getElementById('turn').value;
if(currentvalue == "X"){
document.getElementById("turn").value="O";
}
else{
document.getElementById("turn").value="X";
}
}
<!DOCTYPE html>
<head>
<script type="text/javascript" src="app.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>
You need to add defer atrribute.
You should use <script> tag in body.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<input type="button" value="X" id="turn" onclick="turn();" />
<script src="app.js"></script>
</body>
</html>
For summary: Modern approach to old approach
You can use module which are defered by default <script type="module" src="/app.js"></script>
You can use defer to make sure your js is executed after page has load i.e <script src=app.js" defer></script>
You can put your <script> tag before </body> body tag closing
For more details, you can look at this excellent answer.

Javascript into html isn't working?

I am very, very new to html, but I am trying to try out a widget made by NCBO BioPortal. The widget is a javascript file that allows the admin to restrict a form field to certain terms pulled from an external vocabulary. Thanks for any insight you can give as to why it isn't working!
Here's the link for the widget: http://bioportal.bioontology.org/javascripts/widgets/form_complete.js
Here's what it's supposed to do:
-Look-ahead so that you don't need to type the whole term
-Controlled vocabulary provides consistency of the way different users use the term
Here's my HTML, written by following the guidelines on this page:
https://www.bioontology.org/wiki/index.php/NCBO_Widgets#Term-selection_field_on_a_form
<html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script>
<meta charset="utf-8">
<title> NCBO Widget tester </title>
</head>
<body>
<body style="background-color:3a64a8">
<h1> NCBO Widget Tester </h1>
<p>Term Selection in a field</p>
<form action="/action_page.php">
Term tagger:<br>
<input type="text" name="term" class="bp_form_complete-all-name" size="100"/><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I'm not sure but looks like your script is running before page is loaded.
You need to put your script bellow your html code in body or add defer to your <script> tag.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" defer></script>
<script type="text/javascript"
src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js " defer></script>

How to use Notify.js with button?

Ive downloaded Notify.js'files and put them in root of webpage. im trying to test it but i didn't get anything when click on button
<html>
<head>
<title>Untitled</title>
<script src="notify.js"></script>
</head>
<body>
<input name="notif" type="button" value="Shoow notif" onclick="$(".elem-demo").notify("Hello Box");">
</body>
</html>
Whats the problem?
This is your answer and working:
<html>
<head>
<title>Untitled</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="notify.js"></script>
</head>
<body>
<input name="notif" type="button" value="Shoow notif" onclick="$('.elem-demo').notify('Hello Box');"/>
<div class="elem-demo">a Box</div>
</body>
</html>
1-You forgot to include jquery to your file.
2-You should create an element that has a elem-demo class
3-Your javascript had a problem! You can't use double-quotation and it's child has double-quotation too.
here is your code example, and then my code:
onclick="$(".elem-demo").notify("Hello Box");" //Your code
onclick="$('.elem-demo').notify('Hello Box');" //My code

Including query function to HTML from external file (using Dropbox to test locally)

I am attempting to add some simple jQuery through an external file. I would like the code to remain in the external .js file. I'm using Dropbox so I can test my site locally, and I am almost certain JavaScript works through this method, but I don't know about the jQuery library. I can't seem to get any feedback through trial and error. Here is the simple form of the code I'm attempting.
The HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel='stylesheet' type='text/css' href='style.css'/>
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
</head>
<body>
<div id='container'>
<div class='menu'>
<h2>Title of menu/h2>
</div>
<div class='panel'>
<p>
Some text here
</p>
</div>
</div>
</body
This is the entire .js file so far. Does this need to be defined as a function and then added into the HTML? Is it a scope issue?
$(document).ready(function(){
$('.menu').click(function(){
$('.panel').slideToggle('slow')
})
})
You load your file before the library your file is using. Change the two <script> lines so that jQuery is loaded first:
Change
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
You need to add your code after the jQuery inclusion..
So swap these lines
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
That is because your code uses jQuery, so you need to load jQuery before you can use the $.

Social Bookmarking using ShareThis : javascript error 'SHARETHIS is undefined'

I am getting "SHARETHIS is undefined" in a page where I used ShareThis social bookmarking utility. Here is my code
<HTML>
<HEAD>
<TITLE>Demo</TITLE>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher:'f5b1585e-488a-403c-8b7e-ade3efab880a'});</script>
</HEAD>
<BODY>
<span class='st_sharethis' displayText='ShareThis'></span>
<script type="text/javascript">
SHARETHIS.addEntry({
url:'http://www.google.com'
}, {button:true} );
</script>
</BODY>
</HTML>
Can anyone please tell me what could be the problem and how to resolve?
Thanks,
Amit Patel
I inspected the DOM using Firebug. No variable named SHARETHIS. However, there is a variable named stWidget which has a function addEntry. I replaced SHARETHIS with stWidget and there were no errors. I dont know the correct behavior of the widget, but there is no error.
EDIT: Changed the code to share google.com instead of current url.
<HTML>
<HEAD>
<TITLE>Demo</TITLE>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher:'f5b1585e-488a-403c-8b7e-ade3efab880a'});</script>
</HEAD>
<BODY>
<span class='st_sharethis' st_url="http://www.google.com" st_title="Google" displayText="Share This"></span>
</BODY>
</HTML>

Categories

Resources