dynamically retrieving button value using javascript

Question

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

The correct JavaScript is dependant upon your HTML; can you post that for us to see? — David Thomas
– David Thomas, Commented Jun 11, 2012 at 19:21
The problem lies in not escaping your quotes. But don't use inline event handlers. — Cameron Martin
– Cameron Martin, Commented Jun 11, 2012 at 19:22
so look to jquery .button? or what? again, i find learning javascript to be insanely difficult for some reason. And all the html regarding these buttons are built via AJAX (at least, outside the template). — Ricky Mason
– Ricky Mason, Commented Jun 11, 2012 at 19:24

Mark Schultheiss · Accepted Answer · 2012-06-11 20:13:39Z

1

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>"

answered Jun 11, 2012 at 20:13

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

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

Comments

score 0 · Accepted Answer · 2012-06-11 19:55:01Z

0

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

edited Jun 11, 2012 at 19:55

answered Jun 11, 2012 at 19:25

user1299518

5 Comments

Ricky Mason Over a year ago

no luck unfortunately. Are there any alternative ways I should look into doing this? Above, it was recommended to use Jquery, though im not sure how.

Mike Over a year ago

close, but I think it's onclick=\"updatefilters(document.getElementById('page1').value);\"

Barkermn01 Over a year ago

Why are you using DOM inside jQuery when it has its own handler and when your inside an event for a specific object you should be using $(this) on its own the is down to the fact that every thing you put in that function is called thought the $.each method of jQuery so $(this) is the current object change updatefilters($(this)[0].value); to updatefilters($(this).val());

Mark Schultheiss Over a year ago

I would not suggest .live unless you are using an older copy of jQuery version prior to 1.7 for .on and .delegate before that, and of course .live before delegate was introduced.

user1299518 Over a year ago

yes, .on is the new 'live'.. but it depends on what jquery version the op want to use.

Barkermn01 · Accepted Answer · 2012-06-11 20:34:54Z

0

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

edited Jun 11, 2012 at 20:34

answered Jun 11, 2012 at 19:45

Barkermn01

6,86038 silver badges87 bronze badges

3 Comments

Ricky Mason Over a year ago

very useful, however, this method doesn't seem to work for what i'd like to do.

Barkermn01 Over a year ago

What are you trying to do, could u post to jsfiddle

Barkermn01 Over a year ago

Could you explain how my answer is correct if it dint "seem to work for what i'd like to do"?

Ricky Mason · Accepted Answer · 2012-07-05 18:29:40Z

0

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

answered Jul 5, 2012 at 18:29

Ricky Mason

1,8266 gold badges33 silver badges62 bronze badges

1 Comment

Barkermn01 Over a year ago

this is what my answer covered you can't remove an answer just to mark your own as the answer when you using some one else answer

Collectives™ on Stack Overflow

dynamically retrieving button value using javascript

4 Answers 4

Comments

5 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related