views:

78

answers:

1

Hey,

I'm building a small website with JQTouch and the first problem I've run into yet is with a form.

I have a form

<form action='action.php' class='jqt' id='ajax_post' method='post' name='pform'>

(where the name attribute is there when I tried to access it with document.pform)and within it is a ul list of a elements as follows:

<a class="submit" href="#"  value="somevalue">Text displayed</a>

Underneath, inside the form, I placed a single hidden input field (because I only want to POST one value), where my goal is to populate it by clicking one of the links and then submitting:

<input name='somename' type='hidden' />

On submission, the webserver reports that a POST was performed, and there is a brief slide animation before the page returns to the original form. Trying to hack my way into jqtouch.js to populate the input field doesn't work (where what I'm trying is $form.somename.value = $(this).attr('value'); inside submitParentForm())

The CSS captures well and the list is displayed nicely. In fact, if I remove the submit class and insert my own form submission override with document.somename.value = %(this).attr('value'); document.pform.submit(); inside, for instance, hrefor onClick in one of the links, the POST is performed and the next page is displayed, albeit by reloading and not with a jQTouch animation, which is my goal.

My question: How can I use jQTouch to show a slide animation when I post a form which I want to populate with the value of an a element when a user clicks on it?

Thanks in advance.

A: 

I wouldn't submit the form (if I wanted to use a submit button I'd use preventDefault). I'd just use $.post() to post the data and then jQT.goTo to go to the new page with a slide animation. The new page is in jqTouch, of course, only another div in the same document which makes it easy to set any information you'd like on that page using the response in the callback of $.post().

But this might not be a viable solution to what you're trying to do, I don't really understand the question very well.

Calle
I apologise if it's not clear.As it is, my application loads a number of pages dynamically, so there's no 'one page'. There's a common layout (with the head and the opening body tag etc.) and the results of the POST request are called (as a new div).As for the form, it's basically a retransformed dropdown menu. Instead of presenting a dropdown menu which is just another element of complication, I reformatted it to be a list of links with the associated `value`s. Ideally, clicking on one should submit the form with that value _only_ and return the results (with a fancy slide animation).
Adrian Cachinero Vasiljević
Actually, this is pretty much exactly what I did, thank you very much!I retrieved the information with $.post and then redrew the contents of the div with innerHTML. My problem was that my dynamic layouts included the div elements that the links were pointing to, which was making life impossible for jQuery's selectors.
Adrian Cachinero Vasiljević