change variable value with a dropdown menu

Question

I have created a pagination system, that shows 15 colums from a database. now I want to add a drop down menu with other values, so I can change the pagination variable to 50 or 100.

I have done a javascript, but it wont work as I want to ;) It only read the last value I give the script, And nothing happends when I change the dropdown.

Some of the script

$per_page = 15; // Shows how many colums it shows per page

My javascript

<script type="text/javascript"> 
function addit(){ 
    if(document.getElementById("add").value=="<?php $per_page = 15; ?>") 
    { 
        document.getElementById("amount").value="10" 
    } 
    if(document.getElementById("add")."<?php $per_page = 25; ?>") 
    { 
        document.getElementById("amount").value="25" 
    } 
    if(document.getElementById("add").value=="<?php $per_page = 50; ?>") 
    { 
        document.getElementById("amount").value="50" 
    } 
} 
</script>

And the form

<form action=" " method="get"> 
<select style="width: 60px; font-size: 17px;" name="add" id="add" onChange="addit()">
<option value="X"> views</option> 
<option value="10">10</option> 
<option value="25">25</option> 
<option value="50">50</option> 
</select> 
</td> 
</tr> 

</tbody> 
</table> 
</form>

Any tips ?

thanks

First off if(document.getElementById("add")."<?php $per_page = 25; ?>") is not valid code — TheZ
– TheZ, Commented Jul 11, 2012 at 15:43
Secondly if(document.getElementById("add").value=="<?php $per_page = 15; ?>") doesn't make a lot of sense to me.... — Havelock
– Havelock, Commented Jul 11, 2012 at 15:44
Thirdly, store the return of getElementById instead of calling it so often, you can even store the .value part. Fourthly, all of those conditionals are running even if a previous one has been found to be true, use else if or if that's all the function does just return after a find. — TheZ
– TheZ, Commented Jul 11, 2012 at 15:46

pixelistik · Accepted Answer · 2012-07-11 16:01:04Z

1

You need to understand the different points where PHP Javascript are executed. PHP builds a HTML page on the server and then sends it to the browser, where any Javascript is executed.

Let's look at one line of your code:

if(document.getElementById("add").value=="<?php $per_page = 15; ?>")

The server will execute the PHP part. But $per_page = 15 does not output anything to the HTML result. So if you look at the result in the Browser (use "View Source"), it will look like this:

if(document.getElementById("add").value=="")

All three if statements in you Javascript will look like this, all the same.

Rethink your code from here. If the amount of elements per page is determined in the PHP part, you need to reload the page, somehow passing this parameter to the server, to tell it how many elements to put into the page.

answered Jul 11, 2012 at 16:01

pixelistik

7,8603 gold badges34 silver badges43 bronze badges

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

Comments

jeroen · Accepted Answer · 2012-07-11 16:00:06Z

0

PHP has already finished processing at the moment the page is sent to the browser, so you php assignments in your javascript will not do anything except assign a number before the page is sent to the browser.

What you need to do is:

post the value of the changed javascript variable and your pagination variables back to the server / submit the form
regenerate the page using the new value
optionally use ajax to refresh only part of your page instead of doing a complete reload.

edited Jul 11, 2012 at 16:00

answered Jul 11, 2012 at 15:46

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

5 Comments

TheZ Over a year ago

Echo statements in javascript? I see none.

TheZ Over a year ago

Umm, yes it does, it changes a lot. He is setting the value of an element to a new value (if the conditionals made sense) and he says he created the pagination system so maybe that is all it needs to work properly. (I have my doubts about that last part)

jeroen Over a year ago

@TheZ No it doesn't, no php code is run when the javascript function is called as php is already processed server side and javascript client-side. If you look at the source code of the page / the javascript, you will see nothing there.

Dymond Over a year ago

Well the pagination part is working like a charm, But its changing the value part that bothering me. But I will try with the else if and store the value part.

jeroen Over a year ago

@Felipe Otarola You need to replace your complete addit function with a simple form submit (including the pagination variables), optionally using ajax.

Havelock · Accepted Answer · 2012-07-11 16:17:21Z

0

I would suggest your JS function does load the (same?) page with a GET parameter attached, to pass the items per page value. Maybe something like:

function addit(){
    var itemsPerPage = document.getElementById("add").value;
    location.href = 'url of your page' + '?ipp=' + itemsPerPage;
}

Then in your php part, catch the $_GET['ipp'] and use it to render your page according to the viewer's wish.

And then you can get rid of the <form>.

edited Jul 11, 2012 at 16:17

answered Jul 11, 2012 at 15:53

Havelock

7,0044 gold badges37 silver badges42 bronze badges

Comments

DavChana · Accepted Answer · 2012-07-11 16:19:44Z

I dont think there is any need for Javascript here. You can just try:

Form:

<form action="process.php" method="get"> 
   <select style="width: 60px; font-size: 17px;" name="add">
        <option value="X" disabled>Views</option>
        <option value="10">10</option> 
        <option value="25">25</option> 
        <option value="50">50</option> 
    </select> 
</form>

Process.php could be:

$per_page = $_GET['add'];

//Code to display $per_page number of items..

For sure the PHP variable assigning on Client-side is not going to work ever. Because PHP can not be executed on Client-side. It has already finished executing and outputted the HTML at this point. Or you could use some Javascript Get query building & redirect.

Collectives™ on Stack Overflow

change variable value with a dropdown menu

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related