0

I'm currently creating a booking form for users to be able to book places at an event. What i would like to do is create form fields via the select input for number of places. For example if the user selects 3 in the select field, then 3 name input fields will be created. The maximum amount of places is 12.

The only way I have managed to do this is using the following script, which shows the amount of fields selected by the user and adds a display none to all the others, this is a problem when validating the form as it is picking up the hidden fields too and wont let me submit the form. For example if the user selects 3, 3 inputs are shown but the remaining 9 are hidden.

<script type="text/javascript">
$(function () {

  $(".limit").hide();
  //set panels group
  var panels = $(".limit", "#delegate_panels"); 
  $('.delegate-number').change( function() {
    //hide any previously shown panels
    $(panels).hide();
    //show the slice
    $(panels).slice(0, parseInt($(this).val())).show();
  });

});
</script>

Below is the code for the select field

<span>
  <strong>Number of delegates</strong>
</span>
<select name="quantity" class="delegate-number">
  <option>Please select...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>

The code below is repeated 12 times and wrapped in #delegate_panels.

<li class="limit">
  <div class="del-wrap">
    <span>Title:</span>
    <select name="item_options[title_1]" id="title1">
      <option value="">--</option>
      <option value="Mr.">Mr.</option>
      <option value="Mrs.">Mrs.</option>
      <option value="Miss.">Miss.</option>
      <option value="Dr.">Dr.</option>
      </select>
  </div>

  <div class="name-wrap">
    <span>Full Name:</span>
    <input type="text" id="name1" name="name1" value="" size="30" />
  </div> 
</li>

Basically I would like it to do what the script above does, but to create the elements rather than displaying a slice and hiding the rest, which would then enable me to validate all the name fields and not have the hidden fields preventing the form submission.

Any thoughts would be much appreciated.

Improve this question
1
  • What kind of validation are you using? Commented Dec 2, 2011 at 11:39

1 Answer 1

Reset to default
1

If you want to do this without reloading the page, which I'm assuming, jQuery's your man (or inanimate code library).

A rough jQuery script could look like:

$(document).ready(function() {
    $("#AmountDropDown").change(function(){
        $(".datafields").remove();
        var amount = $("#AmountDropDown").val()
        for(int i = 1; i<=amount; i++) {
            var fieldhtml= "<input type='text' class='datafields' id='datafield" + i + "' name = 'datafield" + i + "'/>";
            $("#containingDiv").append(fieldhtml);
        }
    });
});

Which would create textboxes like

<input type='text' class='datafields' id='datafield1' name = 'datafield1'/>

You'll need more than just a textbox but I hope you get the gist of it :-)

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

5 Comments

Thanks for the response. In the script you provided #AmountDropDown is the select field id, .datafields is the class of the input field we want to create and #containingDiv is the tag where we want the input to be created? Can't seem to get this to work so i must be doing something wrong :(
jQuery is annoying to get right because debugging can be hell. I usually debug issues by either placing alert("inserting data"); or something similar. If you're not sure if the selector is addressing the right DOM element, try using alert() to show the content of the element you selected, or try .hide() so you can see the element disappear.
Should the #containingDiv be empty or begin with all the input fields within it? I have tried leaving #containingDiv empty and also trying it with input fields inside but both seem to do nothing
by using .append(), you add html to the existing html inside the element. If you want to replace the current content by something new, you can use .html("something new") Like I said, jQuery is hell to debug. Try building the code step by step and seeing when the code stops working. Try something really simple like alert($("#containingDiv").html()); to show the content from the div. Then alter the code bit by bit (not binary ;)). If all else fails, here's a good tutorial on doing some Firebug debugging (you'll need firefox): jquery4u.com/utilities/live-jquery-debugging-firebug
I have managed to play around and get the script to create the individual form elements depending on the value of the select fields. But for some reason I cannot get the values input to the name and title fields to submit into the cart form. All shows up fine but the values created by the script do not pass through to the cart. Almost there!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.