Question

I am new to HTML5. I would like to build a website using HTML5 that I can use in both Android and iPhone. I spent a couple of days to get a solution, but failed. Below is my scenario:

1. MySQLdatabase has a table (userinfo) which stores user information, e.g. name, age, sex, occupation, hobby, address, etc.
2. I have an HTML5 design (category.html) where 3 options (age<5,age>5 and age<20,age>20) exist as list with anchor tag.
3. If I touch age<5, then it will show a list of all users with name and sex whose age is less than 5 in list.html. Next I will touch a name from this list and it will show details of this user in details.html

The query is simple: select name,sex from userinfo where age<5/age>20 etc.

I am using PHP to connect to the database. When I use a button to assign an action (GET/POST method in PHP) in a form, it is easy for me, but here it is not a button. It is a list with an anchor link. How can I do it? The above scenario is for both Android and iPhone.

Answer 1

In order to submit POST data, the data must be sent to the server. A hyperlink alone cannot do this – however with a bit of JS magic, you can easily accomplish this.

If you’re using something like jQuery, you can capture the click event – gather data from the link based on the click event, and submit to the server via $.post/$.ajax.

HTML:

<a href="javascript:void(0);" class="age-less-then-five">age<5</a>

Javascript:

$('a.classname').click(function(){
            var that = $(this), value = that.text().trim(); 
            //you can optionally store a value in the classname, or ID which is what I would do.. in this scenario.. I think XD

            $.post('yoururl.com/phpscript.php',{postName: value}, function(data){
                //load whatever data you want, or redirect to list.html now that you've gathered desired data
            }
        });

---

To clarify the above answer, var that = $(this); refers to the link that’s been clicked on. So you could grab the class name from the anchor by: that.attr(‘class’) // which would equal age-less-then-five or simply do as above, and grab the text inbetween the anchor tags by using .text(). We trim here, this really isn’t the best way to do this.. but it is one way to do it. When I’m using a link to perform any sort of post to the server, I’ll typically use an ID if it holds a unique value, or class name.