Grow your CSS skills. Land your dream job.

Making this form full on jQuery

  • # March 2, 2009 at 3:05 pm

    Hey I am currently struggling with this form, used chris’s example from .net mag and yet it still would not work

    url of example: http://www.hmserver.co.uk/mirror/safepawn

    How can I achieve what I have done with <select> instead of my rubbish css version. Would be really good if someone could help as i have recoded this 5 times, because would not work in IE.

    kind regards

    alex

    # March 2, 2009 at 4:15 pm

    on that page you linked to, what form are you having trouble with?

    # March 2, 2009 at 5:25 pm

    My mistake, I pasted the homepage link.

    It is infact this page.

    http://www.hmserver.co.uk/mirror/safepa … roking.php

    Thanks in advance

    alex

    # March 3, 2009 at 5:39 pm

    Here’s some thoughts.

    I believe you could put the code for one item – <fieldset>…</fieldset> – into a seperate file and use an AJAX request to insert it into the form the appropriate number of times. eg. $.get("fieldset.html", addFieldsetToForm);

    By making the above file PHP and specifying a number in the query string you can have it change all the ids to the correct number. eg. $.get("fieldset.php", { "id" : 2 }, addFieldSetToForm); // fieldset.php?id=2

    It would be a lot easier if you used arrays instead of jewellry1, jewellry2, jewellry3, etc for the names. To process this in php you would need to manually code every one of those variables. If you use name="jewellry[]" you will receive an ordinal array which contains each of the fields.

    Final suggestion. Why not have the fields for one item present in the html then have an "Add Another Item" button. I believe this would be easier for users and have the added bonus of working for users with javascript disabled – they can still submit one item.

    Hope this is not too much information – just trying to be helpful.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".