Get option name attribute value to input - javascript

I want to get the name attribute value to an input(#currency_sym).
HTML:
<select id="cur_rate" onchange="changeFunc();">
{{#each currencies}}
<option name="{{this.symbol}}">{{this.currency}}</option>
{{/each}}
</select>
<input type="text" id="currency_sym">
Javascript function:
function changeFunc() {
$('#currency_sym').val($(".currateopt").attr("name"));
}
When I tried selecting various options values. But it always shows only one symbol. What is the problem there?

To get the name of the selected option, change your function as follows:
function changeFunc() {
$('#currency_sym').val($("#cur_rate").find("option:selected").attr("name"));
}

You can use option:selected to target the selected option from the passed element:
Demo:
function changeFunc(el) {
$('#currency_sym').val($(el).find('option:selected').attr("name"));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="curratesec" id="cur_rate" onchange="changeFunc(this);">
<option selected disabled>--Select Currency--</option>
<option class="currateopt" id="id1" value="1"
name="symbol1">Dollar</option>
<option class="currateopt" id="id2" value="2"
name="symbol2">Pound</option>
<input type="text" id="currency_sym" name="currency_sym">
</select>

You can try
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="test.js"></script>
</head>
<body>
<button type="button" id="test" name="test" onclick="myFunction(this);">Click Me!</button>
</body>
</html>
test.js
function myFunction(obj){
alert(obj.name)
}
OR
var obj = document.getElementById("test");
alert(obj.name);
Regards

Related

How to append already created html form into table using javascript dropdown?

I have created a dropdown which has values from 1 to 6(need to add more).
In that html i have created a blank table and a form .
what i am tryin to do is ..when i select value 1 from dropdown , i want form of id 1 should be appended to table
and when i select value 2 form with the value of 2 should be appended not any other
Till now what is happening when i select the drop form added to html table but it is not visible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border ="1" align='center'>
<tr>
<td>
<select id="colors" onchange="changedesc()">
<option value="1">Desc1</option>
<option value="2">Desc2</option>
<option value="3" >Desc3</option>
<option value="4">Desc4</option>
<option value="5">Desc5</option>
<option value="6" >Desc6</option>
</select>
</td>
</tr>
</table>
<table id ="addform">
<!-- to be inserted here the div-->
</table>
<form id=1 style="visibility: hidden;">
<input type="text">
<textarea>abc</textarea>
</form>
<form id=2 style="visibility: hidden;">
<input type="text">
<input type="checkbo">
</form>
</div>
<script>
function changedesc(){
var eID = document.getElementById("colors");
var colorVal = eID.options[eID.selectedIndex].value
if (colorVal=="1"){
var frm = document.getElementById(1);
frm.removeAttribute("style");
var ff = document.getElementById("addform")
ff.appendChild(frm);
}
if (colorVal=="2"){
var frm = document.getElementById(2);
frm.removeAttribute("style");
var ff = document.getElementById("addform")
ff.appendChild(frm);
//how to remove previuos one
}
}
</script>
</body>
</html>
Few point to mention here:
in your snippet there is a closing </div> tag, this would lead to invalid HTML.
you have a table with one cell that holds a select button, I suggest that you use <div> since table is made to be used for displaying data that meant to be viewed as a table.
you have another table with no <tr>, <td>, and appending the form tag to id, not having <tr>, <td> tags will be invalid HTML and cause the HTML to not render.
the hidden forms use id attribute of 1 and 2 although its parsed and recongniszed by the browser I suggest that you use a more meaningful ids.
one last thing as a suggestion is to use the display/visibility/opacity attributes to toggle show/hide the forms instead of appending them here.
Here is a snippet with a working HTML from your snippet:
function changedesc(){
var eID = document.getElementById("colors");
var colorVal = eID.options[eID.selectedIndex].value
if (colorVal=="1"){
var frm = document.getElementById(1).cloneNode(true);
console.log(frm);
frm.id="new-form1"
frm.removeAttribute("style");
var ff = document.getElementById("form-td");
ff.innerHTML = "";
ff.appendChild(frm);
}
if (colorVal=="2"){
var frm = document.getElementById(2).cloneNode(true);
frm.id="new-form2"
frm.removeAttribute("style");
var ff = document.getElementById("form-td")
ff.innerHTML = "";
ff.appendChild(frm);
//how to remove previuos one
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border ="1" align='center'>
<tr>
<td>
<select id="colors" onchange="changedesc()">
<option value="1">Desc1</option>
<option value="2">Desc2</option>
<option value="3" >Desc3</option>
<option value="4">Desc4</option>
<option value="5">Desc5</option>
<option value="6" >Desc6</option>
</select>
</td>
</tr>
</table>
<table id ="addform">
<tr>
<td id="form-td"></td>
</tr>
<!-- to be inserted here the div-->
</table>
<form id=1 style="visibility: hidden;">
<input type="text">
<textarea>abc</textarea>
</form>
<form id=2 style="visibility: hidden;">
<input type="text">
<input type="checkbo">
</form>
<script>
</script>
</body>
</html>

Open window which user select language

Here is a short form for selecting language for a webpage, There are two languages one is marathi and another is english actually what I want is like: when a user select english language and submit the form english.html page should open and
when user select marathi language marathi.html page should open.
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<form>
<center>
<p id="p1">
Language:<select>
<option id="English" >English</option>
<option id="Marathi" >Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open" >
</center>
</form>
</html>
You can use this as a reference, considering english.html and marathi.html as your targeting pages, you can change them accordingly
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<script>
$('#button').click(function() {
var selected = $('#language option:selected');
window.location.href = selected + ".html"
})
</script>
</head>
<body>
<form>
<center>
<p id="p1">
Language:
<select id="language">
<option id="English">English</option>
<option id="Marathi">Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open">
</center>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I think its obviously, but please do not repeat it at production:
<input type="submit" id="button" onclick="window.locaton.href='lol/'+$('select').val()+'.html'" value="Open" >
Here is easy way;
<select name="forma" onchange="location = this.value;">
<option value="english.html">English</option>
<option value="marathi.html">Marathi</option>
</select>
if you want to create this using simple Javascript then use location.href = "yourPageAddress";
here is the sample code i have written for the same:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript">
function MyFunction(){
var getValue = document.getElementById("language");
//console.log(getValue);
var getIndexValue = getValue.options[getValue.selectedIndex].value;
//console.log(getValue.selectedIndex);
//console.log(getIndexValue);
if(getValue.selectedIndex == 1){
//console.log("English")
location.href = "http://www.google.com";
}
else if(getValue.selectedIndex == 2){
//console.log("Marathi");
location.href = "http://www.yahoo.com";
}
else{
console.log("Wrong Option Selected.");
}
}
</script>
</head>
<body>
Language:
<select name="language" id="language">
<option>Select..</option>
<option value="https://www.google.com" id="english">English</option>
<option value="https://www.yahoo.com" id="marathi">Marathi</option>
</select>
<br>
<button name="submit" id="submit" onclick="MyFunction()">Submit</button>
</body>
</html>
This is just the one way where you can redirect the user to selected page, there are many different ways also to execute the same operation.
You may find some console.log statement marked comment, which was just used for debugging purpose.

Jquery Index reporting wrong index

Html:
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="radioButtonSet">
<input type="radio" id="radio-value" name="dataChange" value="value" checked="checked" ><label for="radio-value">Value</label>
<input type="radio" id="radio-percentage" name="dataChange" value="percent" ><label for="radio-percentage">Percentage</label>
</div>
</body>
</html>
Javascript:
$("input[type=radio][name=dataChange]").on("change", function(){
console.log($("input[type=radio][name=dataChange]").filter(":checked").index())
});
I expect the indices to be 0 and 1, but they are 0 and 2. Why?
Demo: http://jsbin.com/xifutarumu/edit?html,js,console,output
From the docs: "If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements."
<div id="radioButtonSet">
<input type="radio" id="radio-value" name="dataChange" value="value" checked="checked" >
<label for="radio-value">Value</label>
<input type="radio" id="radio-percentage" name="dataChange" value="percent" >
<label for="radio-percentage">Percentage</label>
</div>
The radio-percentage input is the third of its siblings, and therefore has an index of two.
Passing this as the context for index() seems to produce the desired results. shrug
$("input").index(this);
See http://jsbin.com/wuzoxocura/1/edit?html,js,console,output
It is showing correctly index as
0:first input
1:label just after 1 input
2:second input

Jquery snippet does not executes in JSP

I have a dynamic web project in eclipse. I have a JSP and a html file.
In my JSP file , I include a html file that has jquery snippet inside script tag.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
</script>
</head>
<body>
<form>
<div>
Are you in school? <select id="in_school">
<option selected="selected">Please choose</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="in_school_yes" class="in_school_input" style="display: none;">
What grade are you in? <input type="text" name="grade" />
</div>
<div id="in_school_no" class="in_school_input" style="display: none;">
What year did you graduate? <input type="text" name="graduation_year" />
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
My JSP page is :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello World - JSP tutorial</title>
</head>
<body>
<%#include file="htmldata.html" %>
</body>
</html>
When I run this program I only see the form but when I choose the dropdown, nothing happens . It does not prompts me the other questions based on dropdownvalue. Inshort I see that jquery part is never executed.
The expected output is Expected_Demo.
Can anyone tell me where am I going wrong ?
Thanks !
There is nothing wrong with your jsp code.
1- You are have not included jQuery script in html.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2- You have placed javascript before your html. Here is full code:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form>
<div>
Are you in school? <select id="in_school">
<option selected="selected">Please choose</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="in_school_yes" class="in_school_input" style="display: none;">
What grade are you in? <input type="text" name="grade" />
</div>
<div id="in_school_no" class="in_school_input" style="display: none;">
What year did you graduate? <input type="text" name="graduation_year" />
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
<script type="text/javascript">
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
</script>
</body>
</html>
Include jquery in your html before <script> that is using it:
Here's a link for cdn :
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
You can chose to download it and include from your own application path
Also, you need to wait until your html loads:
<script type="text/javascript">
$(document).ready(function(){
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
});
</script>

HTML form select option triggers text field

I'm trying to get a text field to appear when the user selects a certain option in a form select. I found exactly what I need at http://jsfiddle.net/0ak3b3z1/
However, when I copy this exact code into an html document, it doesn't work. Can anyone tell me where I'm going wrong.
Here is the HTML code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
$('#industry').on('change',function(){
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val()=="SaaS");
});
</script>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
</body>
</html>
Need to include jQuery. Plus you must place the javascript at end (after DOM elements are defined).
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$('#industry').on('change', function () {
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val() == "SaaS");
});
</script>
</body>
</html>
The dollar sign is used with the jquery library, and you're not including this library.
So just add jquery library before the js code.
Just Include this code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You need to include this line in your code.
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'> </script>

Categories