The code is running fine, but the if condition is not working, displays NA everytime the submit button is clicked.
Please find below the HTML and Javascript code.
Please check.
The HTML part-
<!DOCTYPE html>
<html>
<body>
<label style="color:blue;margin-left:30px;">Category:</label>
<input type="text" list="cat" />
<datalist id="cat">
<option value="Air Conditioner">
<option value="Chimney & Hoods">
</datalist>
<br><br>
<label style="color:blue;margin-left:30px;">Brand:</label>
<input type="text" list="brand" />
<datalist id="brand">
<option value="abc">
<option value="pqr">
<option value="xyz">
<option value="aaa">
<option value="bbb">
</datalist>
<br><br>
<button onclick="change()">Submit</button>
<br><br>
<label>Segmentation:</label>
<input type="text" id="segmentation" name="" value=""><br><br>
</body>
</html>
The Javascript part-
<script>
/*the javascript function not working correctly*/
function change() {
if (((document.getElementById("cat").value =='Air Conditioner') && ((document.getElementById("brand").value == 'abc')||(document.getElementById("brand").value =='pqr')))
|| ((document.getElementById("cat").value =='Chimney & Hoods') && ((document.getElementById("brand").value =='Glen')|| (document.getElementById("brand").value =='aaa')|| (document.getElementById("brand").value =='pqr'))))
{
document.getElementById("segmentation").value = 'Service';
} /*this condition not working*/
else {
document.getElementById("segmentation").value = 'NA';
}
}
Use `<input>` element's id to get the value of `<datalist>` element.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
/*the javascript function not working correctly*/
function change() {
if (((document.getElementById("cat1").value =='Air Conditioner') && ((document.getElementById("brandName").value == 'abc')||
(document.getElementById("brandName").value =='pqr')))
|| ((document.getElementById("cat1").value =='Chimney & Hoods') && ((document.getElementById("brandName").value =='Glen')||
(document.getElementById("brandName").value =='aaa')||
(document.getElementById("brandName").value =='pqr'))))
{
document.getElementById("segmentation").value = 'Service';
}
else {
document.getElementById("segmentation").value = 'NA';
}
}
</script>
</head>
<body>
<label style="color:blue;margin-left:30px;">Category:</label>
<input type="text" list="cat" id="cat1" />
<datalist id="cat">
<option value="Air Conditioner">
<option value="Chimney & Hoods">
</datalist>
<br><br>
<label style="color:blue;margin-left:30px;">Brand:</label>
<input type="text" list="brand" id="brandName"/>
<datalist id="brand">
<option value="abc">
<option value="pqr">
<option value="xyz">
<option value="aaa">
<option value="bbb">
</datalist>
<br><br>
<button onclick="change()">Submit</button>
<br><br>
<label>Segmentation:</label>
<input type="text" id="segmentation" name="" value=""><br><br>
</body>
</html>
</body>
</html>
Related
How about, I have a <select> tag which is filled with the BD.
What I want to do is that when selecting the desired option, that the <select> values are assigned to different <input> tags.
Currently I select some of the options, I get the value and the text of the option. I want to have them as 2 different options.
In my example I have this <select>
<option value = "1"> Pizza1 Pizza2 </ option>
My question is how to separate the text of the option so that Pizza 1 is in one option and Pizza2 is in a different option.
So that something like this:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">
<option value="1">Pizza1 Pizza2</option>
<option value="2">Hamburger1 Hamburger2</option>
<option value="3">Bacon1 Bacon2</option>
</select>
<br/>
<input type="text" name="food" id="food" value="" />
<br/>
<input type="text" name="food2" id="food2" value="" />
</form
</body>
</html>
<script type="text/javascript">
var showValue = function(x){
document.getElementById('food').value=x;
}
var showValue2 = function(x){
document.getElementById('food2').value=x;
}
</script>
Just put them in different option values as follows:
<option value="1">Pizza1</option>
<option value="2">Pizza2</option>
I hope I got what you mean. To make them different options, you just have to put them into different option tags, like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">
<option value="1">Pizza1</option>
<option value="2">Pizza2</option>
<option value="3">Hamburger1 Hamburger2</option>
<option value="4">Bacon1 Bacon2</option>
</select>
<br/>
<input type="text" name="food" id="food" value="" />
<br/>
<input type="text" name="food2" id="food2" value="" />
</form
</body>
</html>
<script type="text/javascript">
var showValue = function(x){
document.getElementById('food').value=x;
}
var showValue2 = function(x){
document.getElementById('food2').value=x;
}
</script>
I'd like to have a dynamic result as consequence of a drop-down choice in my website. I have the following example with cars. Buying a volvo should result in car costs ar 1000 for example. I'd like to have this real time, depending on the dropdown choice that is made.
Could you help me with this? I think it must be some kinde of javascript, but I can't figure out how to do this.
<!DOCTYPE html>
<html>
<body>
<style>
#choice {
float: right;
}
</style>
<form action="action_page.php">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
<div id="choice">
Car costs are: Result of choice
</div>
</body>
</html>
Thank you!
This should work just fine.
<html ng-app>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
function Car($scope) {
$scope.car = {
'Volvo': {
'Volvo-2000': ['Volvo-2000'],
'Volvo-3000': ['Volvo-3000']
},
'Saab': {
'Saab-2000': ['Saab-2000'],
'Saab-3000': ['Saab-3000']
},
'Fiat': {
'Fiat-2000': ['Fiat-2000'],
'Fiat-3000': ['Fiat-3000']
},
'Audi': {
'AUDI-2000': ['AUDI-2000'],
'AUDI-3000': ['AUDI-3000']
}
};
}
</script>
</head>
<body>
<div ng-controller="Car">
<div>
Car:
<select id="car" ng-model="price" ng-options="car for (car, price) in car">
<option value=''>Select</option>
</select>
</div>
<div>
Price: <select id="price" ng-disabled="!car" ng-model="price" ng-options="car for (car,price) in price"><option value=''>Select</option></select>
</div>
</div>
</body>
</html>
Fiddle
EDIT:
Sorry for the misconception, this should be just fine.
<!DOCTYPE html>
<html>
<body>
<style>
#choice{ float:right;}
</style>
<script>
var changeInput = function (val){
var input = document.getElementById("choice");
input.value = val;
}
</script>
<form action="action_page.php">
<select name="cars" onchange = 'changeInput(this.value);'>
<option value="volvo 121">Volvo</option>
<option value="saab 121">Saab</option>
<option value="fiat 121">Fiat</option>
<option value="audi 121">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
<div>
Car cost:
<form>
<input type = "text" id = "choice" value = "" style="float: left;">
</form>
</div>
</body>
</html>
2nd Fiddle
I'm having trouble trying to add the value part of the dropdown list to the end of my url as each value is different for the dropdown list.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<script type="text/javascript">
change(val) {
document.staff1.action="http://tl28serv/task7.php?staffID=" + val;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
</html>
You are missing the function keyword. Also you need to call the function change() on onchange event. Do it like this:
<script type="text/javascript">
function change(th) { //Added function keyword
document.getElementById("StaffName").action="http://tl28serv/task7.php?staffID=" + th.value;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1" onchange="change(this)"> <!--Called change() here-->
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
Demo. Check console.
If you want to handle changed uri on server side and do nothing with it on client side, you don't have to do anything. just send data to server.
If you use GET method, your id appears on uri string.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<form id="StaffName" action="http://tl28serv/task7.php" method="get">
<select id="staffID">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
first of all you are trying to set action on select box, that is not correct, you have to set action on form. I think this should work.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<script type="text/javascript">
function change(val) {
document.StaffName.action="http://tl28serv/task7.php?staffID=" + val;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1" onSelect="change(this.value)">
<option value="12" >Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
</html>
You don't need JavaScript to achieve this.
Here is how you do it with HTML
Change your form method to GET, instead of POST.
Change form action to http://tl28serv/task7.php
Add name attribute to select, with value staffID
Of course, there exists a Javascript solution as well.
Here is how you achieve it:
<body>
<form id="StaffName" action="http://tl28serv/task7.php" method="post">
<select id="staff1">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
// move script
<script type="text/javascript">
var staff = document.getElementById('staff1');
// attach "change" EventListener to #staff1
staff.addEventListener('change', function() {
document.getElementById('StaffName').action="http://tl28serv/task7.php?staffID=" + this.value;
});
</script>
</body>
I need your help,
How can I additionally add function to the existing javascript code, such that when a new value provided in the field1 and is not listed in the select box, that the code will:
Check if the (field1) value is already listed in the select box, if it is, then select its value in (field2) and;
If the value provided in the field1 is not listed in the select box (field2) then add the new value from (field1) and select it in (field2)
Here's a fiddle: http://jsfiddle.net/s66qg6xp/
The code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
document.getElementById('field2').value = document.getElementById('field1').value
}
</script>
</head>
<body>
<input type="text" id="field1">
<br>
<select id="field2">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>
<br>
<input type="button" value="test" onclick="test()">
</body>
</html>
All in JS:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var alreadyInList = [];
var allOptions = document.getElementsByTagName('option');
// populate already in list
for(var i = 0; i < allOptions.length; i++) {
alreadyInList[i] = allOptions[i].value;
}
var input = document.getElementById('field1').value;
for(var i = 0; i < allOptions.length; i++) {
if(alreadyInList.indexOf(input) > -1) {
// element is already in the list
} else {
alreadyInList.push(input);
var option = document.createElement('option');
option.value = input;
option.text = input;
document.getElementById('field2').appendChild(option);
}
}
}
</script>
</head>
<body>
<input type="text" id="field1">
<br>
<select id="field2">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>
<br>
<input type="button" value="test" onclick="test()">
</body>
</html>
Or you can do it with jQuery:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
function test() {
var NewOption=document.getElementById("field1").value;
var options=$("#field2").children().filter(function (){return $(this).text()==NewOption});
if (options.length==0){
document.getElementById("field2").innerHTML=document.getElementById("field2").innerHTML+"<option value='"+NewOption+"'>"+NewOption+"</option>";
}
document.getElementById('field2').value = document.getElementById('field1').value;
}
</script>
</head>
<body>
<input type="text" id="field1">
<br>
<select id="field2">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>
<br>
<input type="button" value="test" onclick="test()">
</body>
I need an form with possibility to add new row consisting SELECT and INPUT. This works for me, but when I submit form no variable from SELECT is posted.
My HTML code:
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<button id='add'>Add</button>
<form action="test.php" method="get">
<div class='container'>
<select>
<option name='service[]' value=1>HDD Recovery</option>
<option name='service[]' value=2>PC Clean</option>
<option name='service[]' value=3>Other</option>
</select>
Description<input type='text' name='desc[]'>
Price<input type='text' name='price[]'>
</div>
<input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var removeButton = "<button id='remove'>Remove</button>";
$('#add').click(function() {
$('div.container:last').after($('div.container:first').clone());
$('div.container:last').append(removeButton);
$('div.container:last input').each(function(){
this.value = '';
});
});
$('#remove').live('click', function() {
$(this).closest('div.container').remove();
});
});
</script>
<br>
</html>
How can i fix this ?
you have to name the select, not the options it holds.
<select name="service[]">
<option value="1">HDD Recovery</option>
<option value=2>PC Clean</option>
<option value=3>Other</option>
</select>
use
<select name='service[]'>
instead of giving name to option
<option name='service[]' value=1>HDD Recovery</option>