Passing more than one value to another page

Question

I currently have textfields in which I set a value, as soon as I press the change button this function gets triggered:

function change1(){
   var myNewTitle = document.getElementById('myTextField1').value;
   if( myNewTitle.length==0 ){
       alert('Write Some real Text please.');
   return;
   }
  document.getElementById("myLink").href="convert.php?var1=" + myNewTitle ;
   var titles = document.getElementsByClassName('title1');
   Array.prototype.forEach.call(titles,title => {
    title.innerHTML = myNewTitle;
   });
}

Here is an example of the textfield:

  Voornaam: <h3 class="title1">Kevin</h3>
  <input type="text" id="myTextField1" />
  <input type="submit" id="byBtn" value="Change" onclick="change1()"/><br/>

Passing the value like this seems to work perfectly fine but the problem is I have some other textfields and more change functions. But how do I pass multiple values from multiple textfields like the one I just showed?

So let's say textfield 1 is attached to function change1, I have textfield 2 that's attached to almost the same function change 2. How do I make it so I pass another value from textfield 2 so that both values from textfield 1 and 2 get passed to the other page.

Edit: I've tried it like so but this does not work, but this is an idea of how I wish it would work.

function change1(){
   var myNewTitle = document.getElementById('myTextField1').value;
   if( myNewTitle.length==0 ){
       alert('Write Some real Text please.');
   return;
   }
  document.getElementById("myLink").href="convert.php?var1=" + myNewTitle +"&var2=" +  myNewTitle2;
   var titles = document.getElementsByClassName('title1');
   Array.prototype.forEach.call(titles,title => {
    title.innerHTML = myNewTitle;
   });
}
function change2(){
   var myNewTitle2 = document.getElementById('myTextField2').value;
   if( myNewTitle.length==0 ){
       alert('Write Some real Text please.');
   return;
   }
   document.getElementById("myLink").href="convert.php?var1=" + myNewTitle +"&var2=" +  myNewTitle2;
   var titles = document.getElementsByClassName('title2');
   Array.prototype.forEach.call(titles,title => {
    title.innerHTML = myNewTitle2;
   });
}

The page I href to, I decided to put it in because of that reason. I could remove it if necessary. — Kevin Bosman, Jun 13 '17 at 12:02
it should be removed if there's no relevance, since others such as myself look at the php thread. — Funk Forty Niner, Jun 13 '17 at 12:03

score 1 · Answer 1 · answered Jun 13 '17 at 11:55

1

try this:

document.getElementById("myLink").href="convert.php?var1=" + myNewTitle +"&var2=" +  myNewTitle;

& operator is used to pass values on url

answered Jun 13 '17 at 11:55

Praveen P K

198
12

I updated my post with an example of what I tried but doesn't seem to work for me. Could you check that and help me? – Kevin Bosman Jun 13 '17 at 12:07
@KevinBosman, is that necessary to have each text box with each change function. – Praveen P K Jun 13 '17 at 12:17
Unfortunately yes, currently it is necessary. I'd like to see it different myself aswell.. You could always suggest a piece of code without different functions. – Kevin Bosman Jun 13 '17 at 12:21
@KevinBosman, i dont understand. do you get `myNewTitle2` on change1() call. if not, how can you pass that? – Praveen P K Jun 13 '17 at 12:33
I thought it didn't matter and it can just stay empty.. and only gets set on change2(). I don't get it on change1().. it's supposed to be set in change2(). – Kevin Bosman Jun 13 '17 at 12:36
I have actually figured out a way based off your answer. Keep var2 empty in change 1, and keep var1 empty in change2. Use myNewtitle for both. This way it passes both values. – Kevin Bosman Jun 13 '17 at 12:40

Andrew · Answer 2 · 2017-06-13T12:27:51.013

0

Bit crude but can you just combine all the inputs into one string and then split that string by "&_&" at the receiver? See code below

var myString = "";
function change1(what){
 var myNewTitle = document.getElementById(what).value;
 myString += "&_&"
 myString += myNewTitle;
 alert("var1="+myString);
}

<head>
<title>Untitled Document</title>

</head>

<body>
<input type="text" id="myTextField1" />
<input type="submit" id="byBtn" value="Change" onclick="change1('myTextField1')"/><br/>
</body>

EDIT: just seen your original post edits.

The above code will work if you use explode() in PHP. See http://php.net/manual/en/function.explode.php

Edit 2:

document.getElementById("myLink").innerhtml = '<a href="convert.php?var1=' + 
myString + '">click here</a>';

edited Jun 13 '17 at 12:27

answered Jun 13 '17 at 12:13

Andrew

39
8

Not really what I was hoping for in this case, It's a project and requires to be done in some kind of way that I've put above in my edit. Is this possible? I've already figured out how to do it with one value but more than one is a problem for me. – Kevin Bosman Jun 13 '17 at 12:15
this looks good but as I'm fairly new to this, could you perhaps show an example with my code? If not I'll try to figure it out myself. – Kevin Bosman Jun 13 '17 at 12:19
Instead of the msgbox you could just user the container.innerhtml of where the link is then recreate the link entirely based on myString. – Andrew Jun 13 '17 at 12:21

score 0 · Answer 3 · answered Jun 13 '17 at 12:41

0

You can use localStorage() for pass multiple values in other pages instead of pass value in URL.

Page 1

function change1(){
  localStorage.setItem("Txt1", document.getElementById('myTextField1').value);
  localStorage.setItem("Txt2", document.getElementById('myTextField2').value);
  localStorage.setItem("Txt3", document.getElementById('myTextField3').value);
  localStorage.setItem("Txt4", document.getElementById('myTextField4').value);
}

Page 2

alert(localStorage.getItem("Txt1"));

answered Jun 13 '17 at 12:41

Hardik Leuwa

3,282
3
14
28

This might be really handy to optimize my code later, thanks! – Kevin Bosman Jun 13 '17 at 12:41
If your Textbox value length is not limited then it will be risky because URL length is limited for different browsers – Hardik Leuwa Jun 13 '17 at 12:52
https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers – Hardik Leuwa Jun 13 '17 at 12:53

Passing more than one value to another page

3 Answers3