fill javascript variable when button is clicked

Question

For building pagination in combination with an api, when I press the next button, I want the value next to get assigned to a javascript variable so it can be sent to a PHP script. I have this so far but I am not very familiar with Javascript:

nextpage = document.getElementById('nextpage').onclick = document.getElementById('nextpage').value;

if(!nextpage==0){
    link =link+"&nextpage="+nextpage;
}

This way the Javascript variable gets posted into the url so the PHP script on the other hand can pick it up like this. For other variables I use:

mantinee = document.zoekform.mantinee.value;

if(!mantinee==0){
    link =link+"&mantinee="+mantinee;
}

If I do this, then it is directly posted to the url so the PHP script always thinks it needs to skip to the next page which isn't my intention. The buttons on its side calls ajaxgetinfo() when clicked.

query.php

if(isset($_POST['nextpage']))
{
  $nextpage = $_POST['nextpage'];
}

Here is all the javascript that gets every variable and passes them through. this is where the nextpage also needs to run

function vorige(){
sort = 'vorige';
ajaxGetInfo(sort);
}

function ajaxGetInfo(sort) { var ajaxRequest; // De variable wat Ajax mogelijk maakt

try{
    // Chrome, Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}

link="query.php?";

datumreeks='';
if(document.zoekform.zo.checked==true){datumreeks="zondag";}
if(document.zoekform.ma.checked==true){datumreeks=datumreeks+"maandag-";}
if(document.zoekform.di.checked==true){datumreeks=datumreeks+"dinsdag-";}
if(document.zoekform.wo.checked==true){datumreeks=datumreeks+"woensdag-";}
if(document.zoekform.don.checked==true){datumreeks=datumreeks+"donderdag-";}
if(document.zoekform.vr.checked==true){datumreeks=datumreeks+"vrijdag-";}
if(document.zoekform.za.checked==true){datumreeks=datumreeks+"zaterdag-";}
link = link+"&datumreeks="+datumreeks;

datepicker = document.zoekform.datepicker.value;
if(!datepicker==0){link =link+"&datepicker="+datepicker;}

datepicker2 = document.zoekform.datepicker2.value;
if(!datepicker2==0){link =link+"&datepicker2="+datepicker2;}

zaal = document.zoekform.zaal.value;
if(!zaal==0){link =link+"&zaal="+zaal;}

genre = document.zoekform.genre.value;
if(!genre==0){link =link+"&genre="+genre;}

profiel = document.zoekform.profiel.value;
if(!profiel==0){link =link+"&profiel="+profiel;}

internationaal = document.zoekform.internationaal.value;
if(!internationaal==0){link =link+"&internationaal="+internationaal;}

prijslaag = document.zoekform.prijslaag.value;
if(!prijslaag==0){link =link+"&prijslaag="+prijslaag;}

prijshoog = document.zoekform.prijshoog.value;
if(!prijshoog==0){link =link+"&prijshoog="+prijshoog;}

mantinee = document.zoekform.mantinee.value;
if(!mantinee==0){link =link+"&mantinee="+mantinee;}

document.getElementById('nextpage').onclick = function(e){
  ajaxRequest.open("POST", link, true);
  if (nextpage) ajaxRequest.send("nextpage=yes");
}

ajaxRequest.open("GET", link, true);
ajaxRequest.send(null);
document.getElementById("info").innerHTML = '<div align=center><i class="material-icons w3-spin w3-jumbo">refresh</i></br>Blijft dit staan? <a href="" onclick="ajaxGetInfo()">Klik hier.</a></div>';


ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        document.getElementById("info").innerHTML = ajaxRequest.responseText;
    }
  }
}

How can I make it so that the Javascript variable (nextpage) remains empty until the button (name="nextpage" with value="nextpage") is pressed? When it is pressed, the javascript variable nextpage should contain "nextpage"

markt · Accepted Answer · 2016-05-03 09:53:47Z

2

POST your variables instead of using GET:

document.getElementById('nextpage').onclick = function(e){

  ajaxRequest.open("POST", link, true);
  if (nextpage) ajaxRequest.send("nextpage=yes");
  document.getElementById("info").innerHTML = '<div align=center><i class="material-icons w3-spin w3-jumbo">refresh</i></br>Blijft dit staan? <a href="" onclick="ajaxGetInfo()">Klik hier.</a></div>';


  ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
      document.getElementById("info").innerHTML = ajaxRequest.responseText;
    }
  }
}

edited May 3, 2016 at 9:53

answered May 2, 2016 at 22:52

markt

9037 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Mark Over a year ago

but there will be no button to click on? and a submit refreshes the page. I builded the site with tabs so a refresh is not an option

Mark Over a year ago

also the value of nextpage should only be filled when pressed other wise it needs to have a different value which that will be is random because if the value is empty the script will not run

markt Over a year ago

You said in your question that there would be a 'next' button? I don't understand your issue since you have edited the question.

Mark Over a year ago

well on index.php, where that js is, are multiple filters such as date ect. they are defined in the js above. with this js an API is called which limits on 100 records but leaves a link to the next 100 records which is defined on query.php. when button "nextpage" is clicked an if statement runs and parses the URL. So when the button gets pressed nextpage="yes" needs to be posted in the URL so query.php can pick it up and run the if statement

markt Over a year ago

I see - in that case, instead of appending query variables to your url, you need to use post with your ajax request. w3schools.com/ajax/ajax_xmlhttprequest_send.asp - see POST request and put &nextpage=yes into the send function.

|

rmacnell · Accepted Answer · 2016-05-02 23:01:57Z

0

your problem is nextpage = [...] if i get your question right.

try it this way:

document.getElementById('nextpage').onclick = function(e){
    //do your request etc
}

here is an example: https://jsfiddle.net/nmLeetgu/

answered May 2, 2016 at 23:01

rmacnell

114 bronze badges

2 Comments

Mark Over a year ago

this almost does the trick exept for the fact that the page isnt loading anymore. i have posted the full javascript in the original post

Mark Over a year ago

i managed to get it posting to the link. but the innerhtml doesnt reload when the button is clicked for al other values it reloads exept this one

Collectives™ on Stack Overflow

fill javascript variable when button is clicked

2 Answers 2

12 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related