[thelist] AJAX - expose a div with radio buttons, select & submit/save to mysql

[Hugh Miller]

Bob says:
Where am I off course?

Demo: http://dottedi.biz/code/ajax/test/
---------------------------------------
Hi Bob,

The solution to both problems you mention are the same. Pass the value 
you want explicitly into the function.

Problem 1: The spec for anchors does not contain a value="" as it does 
on forms (the href becomes the 'value' of this element).

Problem 2: The value of a button is what is displayed as user 
instruction. Simple fix is the same as 1.

Solution onclick="getRating(X)" where X is the value you want to pass. 
Assuming the final page will be dynamic this shouldn't be a problem to 
maintain going forward. Remove any reference in the anchors to value="X" 
as it is meaningless.

There's other tag attributes you could use instead (like title="X", but 
I think passing the value in the onClick is semantically more meaningful).

The buttons could be forced to display a value + your own preferred text 
(using <label>'s and some CSS flummery, but since the functionality of 
buttons is partly to instruct the user I'd say just use a value that 
makes sense and use the onclick method to control the action. 
Semantically these should probably be <input type="button"> rather than 
"submit" for these three items.

Hope this helps!

H

On 12/08/2010 04:31, Bob Meetin wrote:
> Nah, just break it down to individual steps. Say for step 4:
>> 1) create a simple HTML form with fields for the info you want to save
>> 2) write the backend code for the form submission (parse and write the
>>      parameters to the DB)
>> 3) test, adjust as necessary
>> 4) write your mootools-based method to gather that form data and
>>      submit via XHR request
>> 5) attach onsubmit event handler to "save" button to invoke that
>>      method and hide the div in question
>> 6) test
>>
>> and done! Those are all pretty straightforward, the first 3 being what
>> you'd have to do if there were no such thing as AJAX. Except #2
>> doesn't need to return a complete page, just status, or a message,
>> or whatever you want.
> A little progress, but with the link option it will not respond to 
> onClick. See: http://dottedi.biz/code/ajax/test/
>
> <li><a href="#" name="discipline" value="1" 
> onClick="getRating(this.value);">Option 1</a></li>
> <li><a href="#" name="discipline" value="2" 
> onClick="getRating(this.value);">Option 2</a></li>
> <li><a href="#" name="discipline" value="3" 
> onClick="getRating(this.value);">Option 3</a></li>
>
> Where am I off course?
>

-- 
Hugh Miller
Web Developer
Clyde&  Forth Press Ltd