I created a couple inputs and one drop down that feed into a javascript command to create custom sentences. Whatever the user inputs or selects is added to a sentence framework. When the user selects submit, the sentence is created. It is quite simple. I am running into trouble adding multiple inputs from one drop down to the sentence.
If the user selects "navigation" in addition to "usb ports" within the drop down, only navigation is added to the sentence. How can I change my code so that all selections from the drop down are added to the sentence? For example if "navigation" and "usb ports" is selected, the sentence would read: "It has these options: navigation and usb ports."
Also, note that I am using the Chosen plugin.
Thanks so much for your help.
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<style type="text/css">
table,td,th {margin-left: auto;margin-right: auto}
.display {display: flex;align-items: center;justify-content: center;}
p {text-align: center;}
textarea {display: block;margin-left:auto;margin-right: auto;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
});
})
</script>
<script type="text/javascript">
function sentence() {
document.getElementById("s1").value = "";// reset
document.getElementById("s1").style.display = "block";
document.getElementById("r1").style.display = "block";
if (document.getElementById("z1").value == "") {
alert("Year, Make, and Model are needed");
document.getElementById("z1").focus();
}
else if (document.getElementById("z2").value == "") {
alert("Mileage is needed");
}
else if (document.getElementById("z3").value == "") {
alert("Exterior color is needed");
}
else {
const input1 = document.getElementById("z1").value;
const input2 = document.getElementById("z2").value;
const input3 = document.getElementById("z3").value;
const input4 = document.getElementById("z4").value;
document.getElementById("s1").value =
"Up for sale is a " + input1 + " with " + input2 + " miles. It is finished in "
+ input3 + ". It has these options: " +input4+ "."
}
}
function reset() {
document.getElementById("s1").value = "";
}
function hide() {
document.getElementById("s1").style.display = "none";
document.getElementById("r1").style.display = "none";
}
</script>
</head>
<body onload="hide()">
<table>
<tr>
<td>
<input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100">
</td>
<td>
<input type="text" id="z2" placeholder="Mileage" name="name" maxlength="100">
</td>
<td>
<input type="text" id="z3" placeholder="Exterior Color" name="name" maxlength="100">
</td>
<td>
<select data-placeholder="Options" name="options" id="z4" multiple class="chosen-select">
<option value=""></option>
<option value="navigation">Navigation</option>
<option value="aux">Aux</option>
<option value="usb ports">USB Ports</option>
<option value="heated seats">Heated Seats</option>
</select>
</td>
</tr>
<tr>
</table>
<br>
<div class="display">
<button onclick="sentence()"> Submit </button>
</div>
<hr>
<br>
<textarea rows="10" cols="100" id="s1"></textarea>
<br>
<div class="display">
<button onclick="reset()" id="r1">Reset</button>
</div>
</body>
</html>
You need to loop the selections to get all of them e.g.
const input1 = document.getElementById("z1").value;
const input2 = document.getElementById("z2").value;
const input3 = document.getElementById("z3").value;
var input4 = '';
for(var i=0; i< document.getElementById("z4").options.length; i++) {
if(document.getElementById("z4").options[i].selected) {
if(input4 === '') {
input4 = document.getElementById("z4").options[i].value;
} else {
input4 += ' and ' + document.getElementById("z4").options[i].value;
}
}
}
I've done an example here with a basic for loop using javascript. You could make this more efficient, but it demonstrates the idea...
Related
I'm trying to create a list based off of 2 input fields. The first input will be a name and the second an integer.
What I'm trying to achieve is having the name displayed multiplied by the amount of the input integer. I have got the name to display based off the input, but have been unable to have it displayed multiple times based on the input integer.
Here's an example image of what I'm looking to achieve
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
document.getElementById("name").value = ""; // clear the value
}
</script>
</html>
Fiddle: https://jsfiddle.net/grnct2yz/
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="number" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
for(let i = 0; i < document.getElementById("count").value; i++) {
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
}
document.getElementById("name").value = ""; // clear the value
}
</script>
</html>
I have added a loop and changed the input type to number so we are sure that it's going to insert a number in the loop. Is this what you wanted?
What the code I added does is cycling a number of times equal to the number inputted and then executing the code you wrote.
for loops work this way:
you set an initial statement that is executed at the beginning of the loop, only once (let i = 0 sets a new iterable variable i),
then you set a condition that is checked before every iteration of the loop to make it run (i < document.getElementById("count").value checks that it executes up to and not more than X times, where X is the number inputted),
then you set an operation to be executed at the end of each loop (i++ increments the value of i by one).
Here is another way of doing it:
const name=document.getElementById("name"),
count=document.getElementById("count"),
list=document.getElementById("list");
document.getElementById("add").onclick = function() {
list.insertAdjacentHTML("beforeend",[...Array(+count.value)].map(s=>`<div>${name.value}</div>`).join(""))
name.value = ""; // clear the value
}
<input type="text" value="Michael" id="name" /><br>
<input type="text" value="5" id="count" /><br>
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
Just your Improved code based on your needs we can achieve this in many ways.
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
var count = document.getElementById("count").value;
if (parseInt(count) != 'NaN') {
var list = document.getElementById("list");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
count = parseInt(count);
for (var i = 0; i < count; i++) {
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
}
}
}
</script>
</body>
</html>
Please Don't make it duplicate i have a code please refer that and let me where i'm doing wrong Hello guys i have program which deals with the multi select list where I have implemented such functionality where user can Add or Remove item from left side list to right side list ("<" and ">").This Totally works fine Again i have added a Table which contains the right side (selected list values) for this code is :
HTML: In this "sourceHeaderFields" contains the list where we are selecting list adding to the "sourceHeaderFields"
<h2><strong>Select features from Seed data:</strong> </h2>
<select id="sourceHeaderFields" name="sourceHeaderFields" multiple="multiple"
style="width:210Px;height:150px;margin-left: 100px;">
</select>
<select id="sourceHeaderFields" name="targetHeaderFields" multiple="multiple"
style="width:210Px; height:150px">
</select>
<br>
<input type="button" id="leftall" value="<<" style="margin-left: 250px;"/>
<input type="button" id="left" value="<" />
<input type="button" id="right" value=">" />
<input type="button" id="rightall" value=">>" />
<br />
<br></br>
<h2> <strong> Default Values for the Selected Headers: </strong> </h2>
<table id="defaultValuesTable">
</table>
JS
$(function () {
function moveItems(origin, dest) {
$(origin).find(':selected').appendTo(dest);
}
$('#left').click(function () {
selectedValue1 = $('#targetHeaderFields').remove(':selected').val()
//console.log(selectedValue1);
moveItems('#targetHeaderFields', '#sourceHeaderFields');
$("#defaultValuesTable").remove().append("<tr id='"+selectedValue+"'><td>"
+selectedValue+"</td><td><input type='text'></tr>");
});
$('#right').on('click', function () {
selectedValue = $('#sourceHeaderFields').find(':selected').val()
console.log(selectedValue);
moveItems('#sourceHeaderFields', '#targetHeaderFields');
debugger;
//Populate the table with the field
$("#defaultValuesTable").append("<tr id='"+selectedValue+"'><td>"
+selectedValue+"</td><td><input type='text'></tr>");
});
Multilist works fine but problem is this line:for table list****Please go this for live code working: https://jsfiddle.net/8jbp47zq/ not sure how to paste a csv file to get the list
$("#defaultValuesTable").remove().append("<tr id='"+selectedValue+"'><td>"
+selectedValue+"</td><td><input type='text'></tr>");
Here when i'm adding anything its adding a text bar for the table with accoresponding list name but when i'm removing its not removing one by one at once its remove all...i want to remove the table list one by one not at once for that i have tried many way:
//$("#defaultValuesTable").remove(id="+selectedValue1+");
and
//$("#defaultValuesTable").children("tr").remove();
and
//$("#defaultValuesTable").remove().append(id="+selectedValue1+");
none of these worked please help..If you guys need more info please tell me ill give...I have added a pic of web UI please refer that...thnx
There was an issue with the remove process. I've updated the code.
//A drop-down list
$(document).ready(function() {
for (var i = 1970; i <= 2018; i++) {
var fromYearSelect = document.getElementById("fromYear");
var toYearSelect = document.getElementById("toYear");
var option = document.createElement("OPTION");
fromYearSelect.options.add(option);
option.text = i;
option.value = i;
var option2 = document.createElement("OPTION");
toYearSelect.options.add(option2);
option2.text = i;
option2.value = i;
}
});
$(function() {
function moveItems(origin, dest) {
$(origin).find(':selected').appendTo(dest);
}
function moveAllItems(origin, dest) {
$(origin).children().appendTo(dest);
}
$('#left').click(function() {
debugger;
selectedValue1 = $('#targetHeaderFields').remove(':selected').val()
//console.log(selectedValue1);
moveItems('#targetHeaderFields', '#sourceHeaderFields');
debugger; // fixed below line.
$('#'+selectedValue1, "#defaultValuesTable").remove();
//$("#defaultValuesTable").children("tr").remove();
//$("#defaultValuesTable").remove().append(id="+selectedValue1+");
// $("#defaultValuesTable").remove().append("<tr id='" + selectedValue + "'><td>" +
// selectedValue + "</td><td><input type='text'></tr>");
});
$('#right').on('click', function() {
selectedValue = $('#sourceHeaderFields').find(':selected').val()
console.log(selectedValue);
moveItems('#sourceHeaderFields', '#targetHeaderFields');
debugger;
//Populate the table with the field
$("#defaultValuesTable").append("<tr id='" + selectedValue + "'><td>" +
selectedValue + "</td><td><input type='text'></tr>");
});
$('#leftall').on('click', function() {
moveAllItems('#targetHeaderFields', '#sourceHeaderFields');
});
$('#rightall').on('click', function() {
moveAllItems('#sourceHeaderFields', '#targetHeaderFields');
});
$('#populateHeaderFields').on('click', function() {
alert("Inside populate list");
var files = ('#source_fileName').files;
alert("Files Count - " + files);
});
$('#upload-form').on('change', function(evt) {
//alert('File content changed');
debugger;
var filesCount = evt.target.files.length;
for (i = 0; i < filesCount; i++) {
var file = evt.target.files[i];
if (file) {
var reader = new FileReader();
/*
reader.onload = function(e) {
var contents = e.target.result;
var ct = reader.result;
var words = ct.split(' ');
}
reader.readAsText(file);
*/
// Read our file to an ArrayBuffer
reader.readAsArrayBuffer(file);
// Handler for onloadend event. Triggered each time the reading operation is completed (success or failure)
reader.onloadend = function(evt) {
// Get the Array Buffer
var data = evt.target.result;
// Grab our byte length
var byteLength = data.byteLength;
// Convert to conventional array, so we can iterate though it
var ui8a = new Uint8Array(data, 0);
// Used to store each character that makes up CSV header
var headerString = '';
// Iterate through each character in our Array
for (var i = 0; i < byteLength; i++) {
// Get the character for the current iteration
var char = String.fromCharCode(ui8a[i]);
// Check if the char is a new line
if (char.match(/[^\r\n]+/g) !== null) {
// Not a new line so lets append it to our header string and keep processing
headerString += char;
} else {
// We found a new line character, stop processing
break;
}
}
//Iterate through the list and populate the select element..
$.each(headerString.split(","), function(i, e) {
$("#sourceHeaderFields").append($("<option>", {
text: e,
value: e
}));
});
// if len(headerString)!= 1{
// alert("headerString Donot match");
// }else{
console.log(headerString);
console.log("Next Read");
};
} else {
alert("Failed to load file");
}
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> upload </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://bootswatch.com/4/solar/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<div class="mx-auto" style="width:500px;">
<h1>Large Data Generation</h1>
</div>
</div>
<form id="upload-form" action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">
<div id="file-selector">
<p>
<strong>Source File: </strong>
<input id="source_fileName" type="file" name="source_fileName" accept="csv/*" multiple style="
margin-left: 10px;" />
</p>
</div>
<br>
<strong>Location Type:</strong>
<input type="radio" name="target" value="BrowserDownload" checked>Browse Local
<input type="radio" name="target" value="dumpToS3"> S3 Remote
<br> </br>
<h2><strong>Select features from Seed data:</strong> </h2>
<select id="sourceHeaderFields" name="sourceHeaderFields" multiple="multiple" style="width:210Px;height:150px;margin-left: 100px;">
<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>
<select id="targetHeaderFields" name="targetHeaderFields" multiple="multiple" style="width:210Px; height:150px">
</select>
<br>
<input type="button" id="leftall" value="<<" style="margin-left: 250px;" />
<input type="button" id="left" value="<" />
<input type="button" id="right" value=">" />
<input type="button" id="rightall" value=">>" />
<br />
<br></br>
<h2><strong>Default Values for the Selected Headers:</strong></h2>
<table id="defaultValuesTable">
</table>
<br>
<div>
<br>
</div>
<div id="div_records">
<strong>Record Count: </strong>
<input id="records" type="text" name="records" value="1000" style="margin-left: 5px;">
<br> <br> <br>
<strong>From Year: </strong>
<select id="fromYear" name="fromYear" style="margin-left: 30px;"></select>
<strong style="margin-left:20px">To Year: </strong>
<select id="toYear" name="toYear" style="margin-left: 5px;"></select>
<br></br>
</div>
<br></br>
<input type="submit" value="Generate Data" id="upload-button">
</form>
</div>
</body>
Remove multiple/all rows one by one from a table with delay use below code.
var i=0;
$('#defaultValuesTable tr').each(function() {
var dly=200;
$(this).delay(i*dly).queue(function(){
$(this).remove();
});
i++;
});
Change value of dly to increase/decrease delay
I created a couple inputs that feed into a JavaScript command to create custom sentences. Whatever the user inputs or selects is added to a sentence framework. When the user selects submit, the sentence is created in a textarea.
I want to add a timer to my app that starts when the user starts typing in the first input field and stops when the user hits submit. This timer would be visible to the user. How would I go about creating that?
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<style type="text/css">
table,td,th {margin-left: auto;margin-right: auto}
.display {display: flex;align-items: center;justify-content: center;}
p {text-align: center;}
textarea {display: block;margin-left:auto;margin-right: auto;}
.chosen-select {width:200px}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
function sentence() {
document.getElementById("s1").value = "";// reset
document.getElementById("s1").style.display = "block";
document.getElementById("r1").style.display = "block";
if (document.getElementById("z1").value == "") {
alert("Year, Make, and Model are needed");
document.getElementById("z1").focus();
}
else {
const input1 = document.getElementById("z1").value;
var input3 = $('#z3').val();
console.log(input3);
var input3Formatted = "";
if(input3.length==1){
// Only one value...
input3Formatted = input3[0];
}
if(input3.length==2){
// Two values... Just add and "and"
input3Formatted = input3[0]+" and "+input3[1];
}
if(input3.length>2){
// more than 2 values...
for(i=0;i<input3.length-1;i++){
input3Formatted += input3[i]+", ";
}
input3Formatted += "and "+input3[input3.length-1];
}
const input5 = "It has minor curb rash on the "+input3Formatted+"."
const input7 = document.getElementById("z5").value;
document.getElementById("s1").value =
"This is my " +input1+ ". It is in good condition.The vehicle's rims have curb rash. "+input5+" The "+input1+"'s color is "+input7+"."
}
}
function reset() {
document.getElementById("s1").value = "";
}
</script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
})
});
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100" >
</td>
<td>
<select data-placeholder="Minor Curb Rash" name="minorrash" multiple class="chosen-select" id="z3">
<option value=""></option>
<option value="front left rim">Front Left Rim</option>
<option value="back left rim">Back Left Rim</option>
<option value="front right rim">Front Right Rim</option>
<option value="back right rim">Back Right Rim</option>
</select>
</td>
<td>
<input type="text" id="z5" placeholder="Color" name="name" maxlength="100">
</td>
</tr>
</table>
<br>
<div class="display">
<button onclick="sentence()"> Submit </button>
</div>
<hr>
<br>
<textarea rows="10" cols="100" id="s1"></textarea>
<br>
<p></p>
<div class="display">
<button onclick="reset()" id="r1">Reset</button>
</div>
</body>
</html>
Add a div to your HTML to display the number of elapsed seconds.
On keydown into your input, trigger a setTimeout() with a callback that updates the elapsed, and on submit use clearTimeout() to stop the timer.
For more, see: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
So i have a program where it starts off with one input field, and if you press the plus button it adds new input field. I also have it so it gives the new input field a different id. I would prefer it so when i press calculate, it saves the values of all the input fields data into an array. I have tried using a for loop with .val(), but that didnt work.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title></title>
</head>
<body>
<!-- ************where the input fields are*******-->
<div id="append">
<p style="display:inline-block; margin-bottom:0px;">
<input type='text' class='minutes' id="minute1"/>
<input type='text' class='vidseconds' id="second1"/>
</p>
<div id="plusnminus">
<button id="plus">+</button>
<button id="minus">-</button>
</div>
</div>
<!-- when this is pressed i want it to save the input fields data-->
<p id="calculate">Calculate</p>
</body>
</html>
//JavaScript
$(document).ready(function(){
var mins = [];
//where it add the new input field
var idnum = 1;
$("#plus").click(function(){
idnum+=1;
var input = "<p><input type='text' class='minutes' id='minute"+idnum+"' /><input type='text' class='vidseconds' id='second"+idnum+"'/></p>";
$(input).appendTo("#append");
});
// to remove an input field
$("#minus").click(function(){
if(idnum >= 2){
$("#minute" + idnum+ ", #second" + idnum).remove();
idnum-=1;
}
});
// i want it to put all of the data from the input fields in an array in that click function
$("#calculate").click(function(){
});
});
/*StyleSheet */
#append {
display: inline-block;
}
#plusnminus {
display: inline-block;
}
button {
border-style: none;
background-color: #C0C0C0;
width: 24px;
height: 24px;
}
Everything is inline because i'm trying to keep it a single file. I have placed comments however for readability.
You can use $.map(), selectors #append input[id^=minute], #append input[id^second] to get all input elements that are descendants of #append element; return an array containing two arrays of values, utilize destructuring assignment to set variable identifiers; for example, minutes, seconds, for arrays corresponding to .value of element where id begins with "minute" or "second"
$(document).ready(function() {
var mins = [];
//where it add the new input field
var idnum = 1;
$("#plus").click(function() {
idnum += 1;
var input = "<p><input type='text' class='minutes' id='minute"
+ idnum
+ "' /><input type='text' class='vidseconds' id='second"
+ idnum
+ "'/></p>";
$(input).appendTo("#append");
});
// to remove an input field
$("#minus").click(function() {
if (idnum >= 2) {
$("#minute" + idnum + ", #second" + idnum).remove();
idnum -= 1;
}
});
// i want it to put all of the data
// from the input fields in an array
// in that click function
$("#calculate").click(function() {
var [minutes, seconds] = $.map([$("#append input[id^=minute]")
, $("#append input[id^=second]")]
, function(el) {
return [$.map(el, function(elem) {
return elem.value;
})]
});
// do stuff with `minutes`, `seconds` variables
console.log("minutes:", minutes, "seconds:", seconds);
});
});
#append {
display: inline-block;
}
#plusnminus {
display: inline-block;
}
button {
border-style: none;
background-color: #C0C0C0;
width: 24px;
height: 24px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title></title>
</head>
<body>
<!-- ************where the input fields are*******-->
<div id="append">
<p style="display:inline-block; margin-bottom:0px;">
<input type='text' class='minutes' id="minute1" />
<input type='text' class='vidseconds' id="second1" />
</p>
<div id="plusnminus">
<button id="plus">+</button>
<button id="minus">-</button>
</div>
</div>
<!-- when this is pressed i want it to save the input fields data-->
<p id="calculate">Calculate</p>
</body>
</html>
You can alternatively substitute Array.from() for $.map()
var [minutes, seconds] = Array.from([$("#append input[id^=minute]")
, $("#append input[id^=second]")]
, function(el) {
return Array.from(el, function(elem) {
return elem.value;
});
});
If you wrap your input fields in a form, you can use .serialize() or .serializeArray() to serialize the whole form at once.
$(function() {
$('#my-button').on('click', function() {
var values = $('#my-form').serializeArray();
console.log(values);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
<input type="text" name="input1" value="first field"><br/>
<input type="text" name="input2" value="second field"><br/>
<input type="text" name="input3" value="third field"><br/>
</form>
<button id="my-button">Get All Values</button>
So I have this code and it does not seem to work. The thing I want it to do is to call the "together" from the function "go" in the function "second". What am i doing wrong?
The program was initially supposed to take what is in the input-text and add it with the ".com" or the ".no"(depending on what u checked) and redirect to that page. But I only want to call the "together" in the "second" function. Is there any better way to do it?
<!doctype html>
<html>
<head>
<title>A Basic Form</title>
<link rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="button" id="submit" name="submit" value="Submit" onclick="go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for="no">.no</label><br />
<input type="radio" id="com" name="end" value=".com">
<label for="com">.com</label>
</div>
</fieldset>
<script type="text/javascript">
var end = "";
var input = document.getElementById("input").value;
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
}
second(together);
function second(together){
alert(together);
}
</script>
</body>
</html>
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
} // remove this
second(together);
} // add this