CODEWITHSUNDEEP
phpjavascriptajax
Ricky Mason
Ricky Mason

Reputation: 1828

dynamically retrieving button value using javascript

I am trying to create a dynamic 'page' listing for threads/comments using AJAX.

in PHP, I look over results and limit the database query to '$page, $page+10'

Now, all I need to do is figure out how to send what page the user wants to view to the PHP.

here is the code that generates the different page buttons:

var htmlpage = "<div class='pages'><ul>"
for (i=1 ; i < pages+1 ; i++)
{
    htmlpage += "<li><input type='submit' id='page"+i+"' value='"+i+"' onclick='updatefilters(document.getElementById('page1').value);' /></li>"
}
htmlpage += "<div>"    
htmlpage += "</ul>";

*this is being done through javascript with data returned through JSON/AJAX call.

document.getElementById('page1').value is giving me a

syntax error[Break On This Error] updatefilters(document.getElementById(

error. I've tried different formatting, and just ended on this. I just don't know javascript well enough to figure out the problem.

I need to send the value of the submit button to the updatefilters() function. Any suggestions on how to do it?

Thanks

Upvotes: 2

Views: 302

Answers (4)

Ricky Mason
Ricky Mason

Reputation: 1828

I got my answer by using the this.value

It might seem obvious, especially through reading the above answers/comments, but its important to point out that this.value is the javascript code that returns the value of whichever element is clicked on. 

        var htmlpage = "<div class='pages'><ul>"
        for (i=1 ; i < pages+1 ; i++)
            {
                if (data['page']==i) {
                    htmlpage += "<li><input type='submit' id='selected' value='"+ i +"'/></li>"
                } else {
                    htmlpage += "<li><input type='submit' id='page' value='"+ i +"' onclick='updatefilters(this.value);' /></li>"
                }
            }
        htmlpage

Upvotes: 0

Barkermn01
Barkermn01

Reputation: 6822

Please don't use document.getElementById to refference the object your in, your code should be 

htmlpage += "<li><input type='submit' id='page"+i+"' value='"+i+"' onclick='updatefilters(this.value);' /></li>";

just an explanation into this every thing in HTML has a JavaScript Object E.G your li is a HTMLLiElement so your onclick event is a method of that object so when you use this it points to the object your currently in. same as it would with a normal JavaScript Object.

this also make it easier for php to echo calls where your using the value of the object as you are it prevents Quote Escaping

if you want a complete solution that not as messy as above. and using proper why of doing it:

var divPage = $(document.createElement("div"));
divPage.attr('class', 'pages');
var ulPage = $(document.createElement("ul"));
for (i=1 ; i < pages+1 ; i++)
{
     var liElement = $(document.createElement("li"));
     var inputElement = $(document.createElement("input"));
     input.attr('type', 'submit');
     input.attr('id', 'page'+i);
     input.val(i);
     input.click(function(){
          updateFilters($(this).val());
     });
     liElement.append(inputElement);
     ulPage.append(liElement)
}
divPage.append(ulPage);

Then just call $("ElementIdYouAddingTo").append(divPage);

I will say i have commented on users using DOM in jQuery the document.createElement is the only exception as its quicker than other methods as tested by a user on Stack Overflow

Upvotes: 0

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

jQuery answer: since you asked/.

$(document).ready(function() {
    $(document).on('click', '.submitPage', function() {
        updatefilters($(this).val());
    });
});

slight change to your generation code (was mis-matching the div and ul end BTW) I added the submitPage class. IF you don't like that use the following selector above instead:

$(document).on('click','.pages>ul>li>input',function(){

NOW the change in generation code:

var htmlpage = "<div class='pages'><ul>";
var mystart = "<li><input type='submit' class='submitPage' id='page";
var mymid = "' value='";
var myend = "' /></li>";

for (i = 1; i < pages + 1; i++) {
    htmlpage += mystart + i + mymid + i + myend;
}
htmlpage += "</ul></div>"

Upvotes: 1

user1299518
user1299518

Reputation:

try this:

htmlpage += "<li><input type='submit' id='page"+i+"' value='"+i+"' onclick='updatefilters(document.getElementById(\'page1\').value);' /></li>";

EDITED:

about jquery, you can replace the above with: (assuming you have no other inputs starting with "pageX", just these of the loop.

$(document).ready(function() {
   $("input[id^='page']").live("click",function() {
      updatefilters($(this)[0].value);
   });
});

Upvotes: 0

Related Questions