I am writing a PHP/MySQL system. On one form I have a number of data entry elements including a check box (called 'conflict'). If someone checks this box then I want a section to appear that show a text box ('notes').
I have never used jquery before and so am trying a simple example which just doesn't work for me as, instead of seeing the text box only when I check the checkbox, I see it all of the time.
The code I am using is shown below and both jquery.js and dependson.js are in the same folder as the page.
Can anybody help please? (Sorry this is such a basic question!)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dependson.js"></script>
</head>
<script>
$('#myText').dependsOn({
// The selector for the depenency
'#myCheck': {
// The dependency qualifiers
enabled: true,
checked: true
}
});
</script>
<form id="myForm">
<label for="myCheck">Check Me</label>
<input type="checkbox" id="myCheck">
<label for="myText">Input</label>
<input type="text" id="myText" value="">
</form>
<body>
</body>
</html>
Related
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>
I'm using some ready HTML for color picker.
When I add it in HTML, It works.
But when I add from javascript (after clicking button) as innerHTML It doesn't works.
As I saw, when HTML is starting some listeners (or maybe other things) are adding automathicaly.
What Can I do?
code JSP:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<%--color picker --%>
<script type="text/javascript" src="jscolor.js"></script>
<script type="text/javascript">
function add() {
document.body.innerHTML += "<input id=\"zaz1\" size=\"5\" class=\"color\" value=\"000000\"> ";
}
</script>
</head>
<body>
<input id="zaz" size="5" class="color" value="000000">
<p onclick="add()">add</p>
</body>
</html>
Okay i understand why this doesn't work.
You need the images that was contained in the jscolor zip.
So put jscolor.js, your htlm files, and all given images in the same folder.
When you have that kind of error look at your console in the developper tools of your browser, my browser specifically told me what files were missing.
I am learning Javascript. Please point me in the right direction! Also if you think my code is not efficient that is ok to tell me to.
I have this home page that takes the user's full name and I want to pass into the javascript and save it as a variable. The javascript returns an url back to the first page and then it gets redirected.
Here is the HTML I have:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/indexstyle.css" />
</head>
<body>
<form name="form1" method="GET" action="create.js">
<p>Please type your name:</p>
<input type="text" id="username" class="textbox" name="username" required = "" placeholder="Type Your First and Last Name" autofocus><br>
<input type="submit" value="Join" class="orangebutton"><br>
</form>
</body>
</html>
The javascript has a variable that is named username = "".
I appreciate any help and direction pointing.
I am getting no date picker in my web page but in fiddle it is coming, what i am missing?
http://jsfiddle.net/cBwEK/
It is coming fine in fiddle but i am getting nothing in my web page. I
have written below scripts
The whole source code is here: http://www.monkeyphysics.com/mootools/script/2/datepicker
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="datepicker.js"></script>
<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/css" src="datepicker.css"></script>
<script type="text/javascript">
new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true
});
</script>
</head>
<body>
<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date picker' />
</body>
</html>
You need to run your JavaScript code after the relevant elements exist in the DOM. Just move the script to the end of the page. Also, if the date picker script relies on MooTools, you need to put the datepicker include after the MooTools include. E.g.:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<!-- FIRST CHANGE HERE, swapping the order of the script elements -->
<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/javascript" src="datepicker.js"></script>
<link type="text/css" rel="stylesheet" href="datepicker.css">
</head>
<body>
<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date picker' />
<!-- SECOND CHANGE HERE, moving your script to *after* the elements it operates on -->
<script type="text/javascript">
new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true
});
</script>
</body>
</html>
Live copy | source
There I've just moved your script, but you might move all the scripts down there as the YUI people suggest.
The reason it works in jsFiddle is that you have the fiddle set to load the JavaScript code from the onload event, which happens very late in the process; the DOM elements are there by then.
Try to load the the DatePicker Initialization after the page load.
A good programmer always use View Source
If you would have seen Fiddle you would see:
<script type='text/javascript'>
window.addEvent('load', function() {
new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true
});
});
</script>
That's because the HTML elements are not loaded and your scripts don't see them.
hey there.
is there a way that if a user selects a radio button the rest of the form will fill out automatically?
most of the form is drop down menu's if that makes a difference.
thx
You could do this by making a function that fills out the form fields for you. Then setting that function to the onclick of the radio button. I have put together a quick and dirty example that does just this for you.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script language="javascript">
function radioClick()
{
document.getElementById("txtField1").value = "Whatever you want!";
}
</script>
<body>
<input name="" type="radio" value="" onclick="radioClick()" />
<input id="txtField1"name="" type="text" />
</body>
</html>
Not working in Firefox! Just noticed that sorry, I'll figure it out in a sec!
Hey guys. Sorry I forgot that innerHtml was not supported by firefox. You can simply switch it to .value and it works in both.