Have created a basic form, three drop down lists and a button. im tryn to multiply the three values in the down lists. i have to pass the data up to the function. i have ran the code just keep getting 0 as the result?? I don't think I'm passing the data from from up to the function correctly?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<script>
function multiply(number1, number2, number3)
{
var firstnum=0;
var secondnum=0;
var thirdnum=0;
var answer;
firstnum=parseInt(number1);
secondnum=parseInt(number2);
thirdnum==parseInt(number3);
answer=(firstnum*secondnum*thirdnum);
alert(answer)
}
</script>
<form name="Example1">
Number 1:
<select id="num1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br/>
Number 2:
<select id="num2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br/>
Number 2:
<select id="num3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br/>
<input type=button value="muliply" onclick="multiply(num1.value, num2.value, num3.value)" />
</form>
</body>
</html>
Your problem is:
thirdnum==parseInt(number3); is a comparison, not an assignment, so thirdnum will always be 0.
Since you are multiplying by thirdnum, and anything × 0 is 0, you will always get 0 as the output.
Change == to =.
This would have been picked up if you had QAed your code with JS Hint.
Your bad practises which you should fix are:
num1.value assumes global JS variables will be created for every element with an id. Don't assume that, use document.getElementById
parseInt(number1) doesn't have a radix. Always specify the number system you are using (normally base 10) so it isn't inferred from the data for unexpected results: parseInt(number1, 10);
<form name="Example1">, the name attribute on forms is a legacy from before the id attribute had come around properly. Use id to identify elements for client side code.
onclick attributes do a poor job of separating concerns. Use addEventListener (or a library such as YUI or jQuery if you need to support old versions of IE).
OK u keep getting 0 as result because of this
thirdnum==parseInt(number3);
in your multiply function
Change it to
thirdnum=parseInt(number3);
And you should be good to go
Here is a demo
Related
I found two threads which answer my question of what code to use. However I have been searching here and the rest of the internet for something to demonstrate how to get the script to run. I have almost no experience with JavaScript which is probably why I can't get this.
Threads:
How to avoid the need for ctrl-click in a multi-select box using Javascript?
Selecting multiple from an html select element without using ctrl key
The code that I wish to use is
<script>
$(document).ready(function(){
$('select').mousedown(function(e){
e.preventDefault();
var select = this;
var scroll = select.scrollTop;
e.target.selected = !e.target.selected;
setTimeout(function(){select.scrollTop = scroll;}, 0);
$(select).focus();
});
$('select').mousemove(function(e){
e.preventDefault();
});
});
</script>
However I have no idea on how to get it to work with a multiple select dropdown menu. The example drop down that I have been using to try and figure out how to get this to work is:
<form id="AddProductForm" name="AddProductForm" method="POST">
<select id = "practice" name="practice" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
I don't understand how to get the script to run so that when I click on one of the options I don't need to hold ctrl down to select multiple.
Any help will much appreciated. Thanks!!
EDIT:
I have been looking at the two links and I have a page with the code on it but when I run it I still have to hold ctrl to be able to select multiple options.
The javascript code must be AFTER the select tag. Copy-paste next code in a HTML file and open it in your browser:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<select id="practice" name="practice" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<script type = "text/javascript">
$(document).ready(function(){
$('select').mousedown(function(e){
e.preventDefault();
var select = this;
var scroll = select.scrollTop;
e.target.selected = !e.target.selected;
setTimeout(function(){select.scrollTop = scroll;}, 0);
$(select).focus();
});
$('select').mousemove(function(e){
e.preventDefault();
});
});
</script>
</body>
</html>
I'm working on a semantic web application and I'm using Sgvizler. I'm not using a database, fuseki, php or something like that. I would like to let the user select certain value and use that value in a SPARQL query. The user can select a value from a drop down menu and then click the search button to return that value. I'm using the jQuery attr() method to change the data-sgvizler-query attribute into the desired query. I got this code so far:
<body>
<form>
<select id="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<input type="button" id="searchbutton" value="Search"/>
</form>
<script>
$(document).ready(function(){
$("#searchbutton").click(function(){
$("#sgvzl_example").attr("data-sgvizler-query","SELECT * WHERE {myprefix:" + $('#values').val() + " ?b ?c}");
});
});
$(document).ready(sgvizler.containerDrawAll);
</script>
<div id="sgvzl_example"
data-sgvizler-query="SELECT * WHERE { myprefix:1 ?b ?c}"
data-sgvizler-chart="google.visualization.Table"
data-sgvizler-log="2"
style="width:800px; height:600px;"
></div>
</body>
Unfortunately this is not working. The data-sgvizler-query attribute won't change. I made sure all my prefixes, sparql endpoint etc. are correct. Is there a way to solve this?
Basically, I have two fields, one a selection (drop down) list and the other an input textbox, both different question's.
My question is, if I choose only one value in the selection list (first question), the textbox (second question) must be 6 characters or numbers in length. Otherwise, the other values chosen in the selection list can be 10 characters long in the textbox.
How can I write this in Javascript form without the use of regex and within ?
I have written parts of this script but I would like to see how others can write it. My sole problem is to get the rest of the other values to be 10 characters long.
I'd also like to add that the first question does not need to be a selection list. I made it this way for the html to be more presentable and organised.
This is my script (so far):
function imposeMaxLength(object, limit) {
var num = document.getElementById("Number").value;
if (num == "3") {
document.getElementById("Type").value {
return (object.value.length <= limit);
}
}
}
HTML:
<label for="number">Number:</label>
<select size="1" id="Number">
<option disabled>...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>Type:<input type="text" id="Type" onkeypress="return imposeMaxLength(this,6);"><br>
<input type="button" value="submit"/>
Please help.
i think you need this
<script>
$('#Number').on('change', function () {
var value=this.value;
if(value==1)
{
$("#Type").attr('maxlength','6');
}
else
{
$("#Type").attr('maxlength','10');
}
});
</script>
This sets the maxlength to the required value whenever the Select element changes. So if you do select multiple values, then the maxlength will change to 10, otherwise, if only 1 item is selected it will have a maxlength of 6.
<div>
<select size="1" id="Number" multiple>
<option disabled>...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div>
<input type="text" id="Type" />
</div>
<div>
<input type="button" value="submit"/>
$("#Number").on('change', function() {
var selects = $(this).find('option:selected');
if(selects.length > 1) {
$("#Type").attr('maxlength', 10);
} else {
$("#Type").attr('maxlength', 6);
}
});
Demo
u may simply use the property maxlength:
html
<input type="text" id="Type" maxlength="1"/><!-- default value in select -->
<select onchange="imposeMaxLength(this.value);">
js
<script>
function imposeMaxLength(max) {
document.getElementById("Type").maxlength = max;
}
</script>
I'm working on a project internally that is rather over my head in terms of coding. I've been teaching myself as I go to build a website resource for employees as a proof of concept for a larger project, and I have virtually no experience with JavaScript.
I'm trying to allow people to use a form to enter/select values for variables vara, varb, and varc. After entering that info, I want them to be able to look through a list of items that I'm allowing them to filter, and when they find the one they want they click on a button that combines the variables in a query string with some additional text in between them and goes to that website.
The URL with the query string would need to look like:
http://www.websiteurl.com/website.aspx?T=12345&J=8&p=vara&d=varb%20varc
I have this so far, but I'm pretty confused about combining the info. The hard part I'm finding is that each item that the person might pick from the list will have a different T=# value.
<script>
var vara = document.getElementById("PPL");
var varb = document.getElementById("DT");
var varc = document.getElementById("TM");
</script>
This is the HTML form I have set up in the body of the page:
<FORM onkeypress="return event.keyCode != 13;">
<Select TYPE="TEXT" NAME="PPL">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</Select>
<INPUT id="DT" TYPE="TEXT">
<SELECT id="TM" TYPE="TEXT">
<option selected="selected" value="8:00 PM">8:00 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
</Select>
</FORM>
Below the form I have a table of items, and each of those needs to have a link tied to a graphic that when they click it will take the first part of the URL that is specific to that item, and combine it with the variables in the format listed above, and then open the new webpage in a new tab. I've seen some posts around concatenating variables to make a URL, but I haven't been able to figure it out exactly, and they all seem to create the URL as function in the script.
EDIT: I've figured out a link that opens the page and appears to have strung together the elements correctly, but I can seen in the destination URL that I'm getting null values for the variables I tried to define with the form.
<a href="#" onclick="window.open('http://www.websiteurl.com/website.aspx?T=12345&J=8&p='+vara+'&d='+varb+'%20'+varc);return false;">
Edit (11/28/2013): I tried changing the code approach a bit and used the below function, with the below HTML line to call it up. It works to pull up the right page on the website I'm referencing, and the number I'm passing to the function is working correctly, but the other variables still show us as "undefined" in the completed URL.
function OTCheck(IDnum)
{
u = 'http://www.website.com/websites.aspx?T='+IDnum+'&J=8&p='+vara+'&d='+var+'%20'+varc
return u
}
The item I'm linking from is in a table (hence the tags):
<td>Link</td>
document.getElementById() gets just the element, not value inside it. Fix:
var vara = document.getElementById("PPL").value;
var varb = document.getElementById("DT").value;
var varc = document.getElementById("TM").value;
document.getElementById("link").onclick = function() {
window.open('http://www.websiteurl.com/website.aspx?T=12345&J=8&p='+vara+'&d='+varb+'%20'+varc);
return false;
}
Then change your html to this:
<form onkeypress="return event.keyCode != 13;">
<select id="PPL">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<input id="DT" type="text" />
<select id="TM" type="text">
<option selected="selected" value="8:00 PM">8:00 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
</select>
</form>
This is link
Now it should work.
What I am trying to accomplish is the following...
HTML
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link href="css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
</head>
<body>
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child" id="dateselector_child" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>
<script type="text/javascript" src="js/datejs.js"></script>
<script type="text/javascript">
$(function () {
$("#dateselector_parent").selectbox();
$("#dateselector_child").selectbox();
});
</script>
</body>
This creates two select boxes, I want one box to display content according to what the user chooses on the other one. For example, if the user chooses, 2010 or 2011 or 2012, I want to display Jan-Dec as options on the second one. If the user chooses, Predefined Dates, I want to display Current Month, Month to Date, and Last 7 Days. The javascript plugin I'm using allows the user to define the onChange, onOpen, and onClose methods. I have been doing some research and it appears that AJAX is involved in trying to accomplish this, but since I don't know one bit of PHP I would like to know if it's possible to accomplish this with jQuery. (I have attempted to solve this problem with no luck of course, I am not looking for someone to do it for me, I just want to be pointed in the right direction, whether I can accomplish this with jQuery or if it's necessary to use AJAX since I haven't seen an example online with only jQuery).
Any help will be appreciated
I hope the following work for your requirement. Having 3 child dropdowns (no divs) 1. --Select--, 2. Jan-Dec 3.Other options
$().ready(function () {
var selectedOnLoad = $('#dateselector_parent').val();
setChild(selectedOnLoad);
$('#dateselector_parent').change(function () {
var selectedValue = $('#dateselector_parent').val();
setChild(selectedValue);
});
});
function setChild(value){
//Have your three child selector names as follows in your markup as well and assuming they are not in divs
var arr = [ "dateselector_child_", "dateselector_child_1", "dateselector_child_2"];
jQuery.each(arr, function() {
if(this == "dateselector_child_" + value){
$("#" + this).show();
}else{
$("#" + this).hide();
}
});
}
UPDATE: Adding markup for the above script
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child_" id="dateselector_child_" tabindex="2">
<option value="">--Select Date--</option>
</select>
<select name="dateselector_child_1" id="dateselector_child_1" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
</select>
<select name="dateselector_child_2" id="dateselector_child_2" tabindex="2">
<option value="">--Select Date--</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
Check the setChild(value) function. Parent's selected value is passing to that function when page is ready (just after loading) and also when user change the selection. Parent's selected value could be "","1","2". Next the foreach loop finds the name of the child that needs to show and others are hidden. if user select ---Select--- option of the parent then that function will show "dateselector_child_" and others two hidden.
Hope it's clear now....
Just a startingpoint!
$("#dateselector_parent").change(function() {
$('#dateselector_child').val($(this).find("option:selected").index());
});
Demo
AJAX, expands to Asynchronous JavaScript And XML. It involves writing an XMLHTTPRequest to retrieve the contents from a server.
If you can store your logic (what to display when a certain option is chosen) in a few lines of code, you can embed it in JavaScript or jQuery.
So, in your case, it is not necessary to use AJAX. You can accomplish this with a bit of code in JavaScript.
"Creating a 2 level interdependent select list" might help.