Develop Reference

How to transfer multiple textbox value from one webpage to another web page in multiple textbox in html

i want to transfer the input value from these textbox to another web page textbox in html
there are two files
this is the first web page
javscript code
function to transfer file to another web page
function transferdata() {
var inputTest = document.getElementById('FROM').value;
var inputTest1 = document.getElementById('TO').value;
var inputTest2 = document.getElementById('jdate').value;
if (inputTest=="") {
window.open('report_pengambilan_singgle.html','','height=650,width=1200');
}
else {
window.open('trial25.html?name=' + inputTest,'','height=650,width=1200');
}
}
html code
this is the body of the code
<form >
<label ><H2>SOURCE</h2></label><br>
<input type="text" id="FROM" name="FROM" ><BR>
<label ><H2>DESTINATION</H2></label><BR>
<input type="text" id="TO" name="TO" ><BR>
<h2> Date of Journey<input type = "date" name = "jdate" id = "jdate"></h2>
<br>
</form>
second file this the another file which will recive the data
javscript code
// Recive data from destination.html
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById("source1").value = data.name;
document.getElementById("date").value = data.name;
document.getElementById("dest").value = data.name;
}
html code
this is the body of the another web page code
<form>
<h3> Source <input type = "text" name = "source1" id = "source1" /> </h3>
<h3> Destination <input type = "text" name = "dest" id = "dest" /> </h3>
<h3> Booking Date <input type = "date" name = "date1" id = "date1" /> </h3>
</form>
this the input field in which i want to recive data from first web page input field

In javascript how to get value in variable from input textboxes with id having incremented integer

Amongst n input text boxes having ids with an incremented integer. Example
first textbox is text_box_1_name and 10th is text_box_10_name.
I need to get the value from these textboxes using a for loop.
function exportCSV(filename)
{
var csv = [];
var number_of_names = document.getElementById("text_no_of_names").value;
csv.push(number_of_names)
var temp = document.getElementById("text_box_2_name")
// Value is available in temp var if id is written directly
for (var i = 0 ; i < number_of_names ; i++) {
var temp =document.getElementById("text_box_"+i+"name").value
// How to increment such id
csv.push(temp)
}
downloadCSV(csv.join("\n"), filename); // Function ahead to download csv
}

use querySelectorAll to select the inputs which id's start with text_box and loop through them with .forEach():
function exportCSV(filename)
{
var csv = [];
[...document.querySelectorAll('input[id^="text_box"]')].forEach(function(e){
csv.push(e.value);
});
downloadCSV(csv.join("\n"), filename); // Function ahead to download csv
}
here's an example of that :
function exportCSV()
{
var csv = [];
[...document.querySelectorAll('input[id^="text_box"]')].forEach(function(e){
csv.push(e.value);
});
console.log(csv.join(",")); // Function ahead to download csv
}
exportCSV();
<input type="text" id="text_box_1" value="first"/>
<input type="text" id="text_box_2" value="second" />
<input type="text" id="another_text_box" value="third" />
<input type="text" id="another_text_box_2" value="fourth" />
<input type="text" id="text_box_3" value="fifth" />
<input type="text" id="text_box_4" value="sixth" />

var textBoxArr = document.getElementsByTagName("input");
for(i=0; i<textBoxArr.length; i++) {
//store textbox value here;
alert("value is: "+textBoxArr[i].value);
}
The above code snippet will iterate through all input type = "text" and get corresponding value ; which we can as: csv.push(textBoxArr[i].value) no need to work based on ID

Javascript html not displaying input

Whenever I run this code on my webpage, I am unable to get the buttons to perform an event upon being clicked. Nothing happens. I am wanting to display the user input for full name, date of birth and gender into the textbox whenever the user clicks display. If the user clicks next, the current data should be saved to the correct array and when the user clicks clear the current innput in the text boxes and the data in the array should be deleted. What do I need to adjust to make this happen?
<html>
<head>
<script language = "javascript">
var full_name;
var dob;
var gender;
var nameList = new Array();
var dateList = new Array();
var genderList = new Array();
function displayMembers() {
var str = " ";
var listLength = nameList.length;
for(var i = 0; i < listLength; i++) {
document.memberForm.textArea.nameList[i];
document.memberForm.textArea.dateList[i];
document.memberForm.textArea.genderList[i];
}
}
function saveMember() {
nametemp = document.getElementByName("full_name");
nameList.push(nametemp[0].value);
datetemp = document.getElementByName("dob");
dateList.push(datetemp[0].value;
gendertemp = document.getElementByName("gender");
genderList.push(gendertemp[0].value);
}
function clearList() {
nameList= [];
dateList = [];
genderList = [];
}
</script>
<title>INTERNET TECHNOLOGIES CLUB MEMBER LIST </title>
<title>INTERNET TECHNOLOGIES CLUB MEMBER LIST </title>
</head>
<body>
<form name = "memberForm">
<h1>
INTERNET TECHNOLOGIES CLUB MEMBER LIST
</h1>
Full Name: <input type = "text" name = "full_name" value = ""/>
Date of Birth: <input type = "text" name ="dob" value = ""/>
<br>
Gender: <input type = "text" name = "gender" value = ""/>
<br>
<textarea name = "textBox" rows = "10" cols = "70">
</textarea>
<br>
<input type = "button" value = "NEXT" onclick = document.memberForm.
saveMember()"></button>
<input type = "button" value = "DISPLAY" onclick =document.memeberForm.textBox.write.Full Name Date of Birth Gender "displayMembers()">
</button>
</form>
</body>
</html>

There are probably more problems I'm not seeing but here you have an unterminated string.
Change it to
<input type="button" value="NEXT" onclick="document.memberForm.saveMember()"></button>

how to pass calculated values using javascript

the following values are to calculate the user entered values, these are calculated and passed to the text field,
if(computer && monitor && tv && laptop && cell)
{ // getting the text field the values and calculated
var valueCom = document.getElementById("computer").value ;
var valueMon = document.getElementById("monitor").value ;
var valueTv = document.getElementById("tv").value ;
var valueLap = document.getElementById("laptop").value ;
var valueCel = document.getElementById("cell").value;
var finalCom = valueCom * 0.1818937134 ;
var finalMon = valueMon * 0.056842 ;
var finalTv = valueTv * 0.056842 ;
var finalLap = valueLap * 0.090947 ;
var finalCel = valueCel * 0.045473 ;
var totalTonnes = finalCom + finalMon + finalTv + finalLap + finalCel;
var totalCarbon = totalTonnes * 1 ;
var totalTree = totalTonnes * 17.1969 ;
var totalPetrol = totalTonnes * 286.396 ;
var totalPlastic = totalTonnes * 646.421 ;
// pass this above four values to the textfield
}
<input type="text" name="carbon" >
<input type="text" name="tree" >
<input type="text" name="petrol" >
<input type="text" name="plastic" >
// field to pass values here
how to pass this values using java script to the text field. can anyone help me please

you want to add id to text field,
<input type="text" name="carbon" id="carbon">
<input type="text" name="tree" id="tree">
<input type="text" name="petrol" id="petrol">
<input type="text" name="plastic" id="plastic">
then after javascript,
document.getElementById("carbon").value=totalCarbon;
document.getElementById("tree").value=totalTree;
document.getElementById("petrol").value=totalPetrol;
document.getElementById("plastic").value=totalPlastic;
and also you can use to value set by name,
document.getElementsByName("plastic")[0].value = totalPlastic;
......
or,
document.getElementById("plastic").setAttribute('value',totalCarbon);
.....

Assign your resultant text field with id="result" or anything. Then, you can put your result as $(#result).val(yourCalcultedResult);

set the value property
document.getElementById("carbon").value = totalCarbon;
document.getElementById("tree").value = totalTree;
document.getElementById("petrol").value = totalPetrol;
document.getElementById("plastic").value = totalPlastic;
and set the ids to the respective elements
<input type="text" name="carbon" id="carbon" >
<input type="text" name="tree" id="tree" >
<input type="text" name="petrol" id="petrol" >
<input type="text" name="plastic" id="plastic" >
Or if you still want to use names only, then make it
document.getElementsByName("carbon")[0].value = totalCarbon;
document.getElementsByName("tree")[0].value = totalTree;
document.getElementsByName("petrol")[0].value = totalPetrol;
document.getElementsByName("plastic")[0].value = totalPlastic;

document.getElementsByName("carbon")[0].value = totalCarbon;
document.getElementsByName("tree")[0].value = totalTree;
document.getElementsByName("petrol")[0].value = totalPetrol;
document.getElementsByName("plastic")[0].value = totalPlastic;

If your controls are in a form, like:
<form>
<input type="text" name="carbon">
<input type="text" name="tree">
<input type="text" name="petrol">
<input type="text" name="plastic">
...
</form>
then you can get a reference to the form and access them as named properties of the form, e.g.
var form = document.forms[0];
form.carbon.value = totalCarbon;
form.tree.value = totalTree;
...
Just make sure you don't give form controls a name that is the same as a form property, like submit or name, as these will shadow the form's default properties of the same name (so you can't call form.submit() or access the form's name, if it has one).

//globally i declared carbon, tree, petrol, plastic
document.getElementById("carbon").value = carbon ;
document.getElementById("tree").value = tree ;
document.getElementById("petrol").value = petrol ;
document.getElementById("plastic").value = plastic ;

Count values from <input type="text"

Hello i want to count the ids inside a input type="text"
the values return as this 1,4,6 etc
<input type="hidden" class="selected_ids" value="selected_ids" name="selected_ids[]" multiple="yes" id="selected_ids" />

here the only javascript version :
var testme = function() {
var myInput = document.getElementById('selected_ids');
var myValue = myInput.value;
var myCount = myValue.split(',').length;
document.body.innerHTML += '<br>myValue = ' + myValue + ' | myCount = ' + myCount;
}
<input type="text" class="selected_ids" value="1,4,6" name="selected_ids[]" multiple="yes" id="selected_ids" />
<button onclick='testme()'>test me</button>

You can use split function. for example :
var curval = document.getElementById('selected_ids').value;
var curval_arr = curval.split(',');
var cnt = curval_arr.length;

First, your input type needs to be text and not hidden. It's not possible to enter values in a hidden text box.
So your text box should be :-
<input type="text" class="selected_ids" value="selected_ids" name="selected_ids[]" multiple="yes" id="selected_ids" />
Now suppose the user enters 1,4,6 into the text box(make sure the numbers are separated by a comma). Then on the PHP side you can access as follows.
<?php
$array = explode(',', $_POST['selected_ids']); //this array consists all the elements.
//To get length, do :-
count($array);
?>