CODEWITHSUNDEEP
javascriptphpjqueryvariablesonclick
Mark
Mark

Reputation: 55

fill javascript variable when button is clicked

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"

Upvotes: 0

Views: 178

Answers (2)

markt
markt

Reputation: 903

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;
    }
  }
}

Upvotes: 2

rmacnell
rmacnell

Reputation: 11

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/

Upvotes: 0

Related Questions