Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 114
  • Last Modified:

Cloning User Inputs

Hi,

Looking for some help with a booking form that i have already created (which is working fine).

The booking form currently has a 'select' dropdown with a number range of 1-10 (number of learners for the course).

<div class="user_bf_input">
<label for="course_qty">Number of Learners:</label>
<select name="course_qty" id="course_qty" class="course_qty">
<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>
</select>
</div>

Open in new window


When the number is changed in the user select, depending on the number chosen, the below html div gets cloned x number selected and the input name changes (number incremented on the end of name field).

<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input type="text" name="pname1" size="30" class="required" />
</div>

Open in new window


Example of generated HTML if '2' is selected in dropdown.
<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input type="text" name="pname1" size="30" class="required" />
</div>
<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input type="text" name="pname2" size="30" class="required" />
</div>

Open in new window


The current JS code that works for this as below (First couple lines can be ignored).
$("#course_qty").change(function() {
    var price = parseFloat($('#course_cost').val(), 10);
    var qty = (parseInt($('#course_qty').val(), 10) || 0);
    var total = (price*qty).toFixed(2);
    $("#course_total").val(total);
    var x = $('#course_qty').val();
    $('#quantity').val(x);

    input = $('.learner_input .user_bf_input').eq(0).clone();
    $('input', input).val('');
    $('.learnerNames').val('');
    $('.learner_input .input_area').empty();
    for (var i=1; i<=$(this).val(); i++) {
        $('input', input).attr('name', 'pname'+i);
        $(input).clone().appendTo(".learner_input .input_area");
    };
});

Open in new window


I was looking to add three inputs in as below and have them all cloned like above but now with a incrementing input id and different names for each input.

<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input id="learnerName-" name="pname1" type="text" class="required learnerInputBox" placeholder="First Middle Last" size="24" />
<input id="learnerUSI-" name="pusi1" type="text" class="required learnerInputBox" placeholder="USI Number" size="24" />
<input id="learnerEmail-" name="pemail1" type="text" class="required learnerInputBox" placeholder="learner@example.com" size="24" />
</div>

Open in new window


So the output generated would be something like this if '2' was selected:

<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input id="learnerName-1" name="pname1" type="text" class="required learnerInputBox" placeholder="First Middle Last" size="24" />
<input id="learnerUSI-1" name="pusi1" type="text" class="required learnerInputBox" placeholder="USI Number" size="24" />
<input id="learnerEmail-1" name="pemail1" type="text" class="required learnerInputBox" placeholder="learner@example.com" size="24" />
</div>
<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input id="learnerName-2" name="pname2" type="text" class="required learnerInputBox" placeholder="First Middle Last" size="24" />
<input id="learnerUSI-2" name="pusi2" type="text" class="required learnerInputBox" placeholder="USI Number" size="24" />
<input id="learnerEmail-2" name="pemail2" type="text" class="required learnerInputBox" placeholder="learner@example.com" size="24" />
</div>

Open in new window


All help would be greatly appreciated.
Thanks!
0
JiveMedia
Asked:
JiveMedia
  • 10
  • 9
1 Solution
 
leakim971PluritechnicianCommented:
something like : http://jsfiddle.net/prmd5dfu/

$("#course_qty").change(function() {
    $('.learner_input .input_area').empty();
    for(var f=1;f<=$(this).val();f++) {
        var input = $('.learner_input .user_bf_input:first').clone();
        $(':text', input).val('');
        $('input', input).each(function(i, v) {
            var id = $(this).attr("id").replace(/\d/,"") + (i+1); // maybe you want "i" instead "(i + 1"
            var name = $(this).attr("name").replace(/\d/,"") + (i+1); // maybe you want "i" instead "(i + 1"
            $(this).attr({"id": id, name:name });
        });
        input.appendTo(".learner_input .input_area");
    }
});

Open in new window

0
 
JiveMediaAuthor Commented:
Hi Leakim971,

Thanks for posting your reply.

I have tried implementing your above code but it isn't working.

I have attached the new booking form file, could you please look over?

Any ideas?

Many thanks.
booking-form2.js
0
 
leakim971PluritechnicianCommented:
provide a link to your website
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
JiveMediaAuthor Commented:
https://nationwidetraining.com.au/online_booking_new/

Change the number under 'Number of Learners' and the div's should appear under the Learners Information title.
0
 
leakim971PluritechnicianCommented:
remove theses lines :
		input = $('.learner_input .user_bf_input').eq(0).clone();
		$('input', input).val('');
		$('.learnerNames').val('');

Open in new window

0
 
JiveMediaAuthor Commented:
Hi leakim971,

Still no luck after removing the lines!
0
 
leakim971PluritechnicianCommented:
the following should work :
	$("#course_qty").change(function() {
		var price = parseFloat($('#course_cost').val(), 10);
		var qty = (parseInt($('#course_qty').val(), 10) || 0);
		var total = (price*qty).toFixed(2);
		$("#course_total").val(total);
		var x = $('#course_qty').val();
		$('#quantity').val(x);
		var sets = $('.learner_input .user_bf_input:gt(0)');
		var how_many_presents = sets.length;
		var how_many_to_display = $(this).val();
		if(how_many_to_display>how_many_presents) {
			for(var f=1; f<=$(this).val(); f++) {
				var input = $('.learner_input .user_bf_input:first').clone();
				$(':text', input).val('');
				$(':text', input).each(function(i, v) {
					var id = $(this).attr("id").replace(/\d/,"") + f; // maybe you want "i" instead "(i + 1"
					var name = $(this).attr("name").replace(/\d/,"") + f; // maybe you want "i" instead "(i + 1"
					$(this).attr({"id": id, name:name });
				});
				input.appendTo(".learner_input .input_area:last");
			}
		}
		else if(how_many_to_display<how_many_presents) {
			$('.learner_input .user_bf_input:gt(' + (1+how_many_to_display*1) + ')').remove();
		}
	});

Open in new window

0
 
JiveMediaAuthor Commented:
Hi Leakim971,

Still no luck, am i suppose to be changing any values in your code?
0
 
leakim971PluritechnicianCommented:
I don't see the latest code on your website
0
 
JiveMediaAuthor Commented:
Its definitely uploaded and visible for me, please see the attached screenshot!
Screen-Shot-2014-12-02-at-7.51.53-am.png
0
 
leakim971PluritechnicianCommented:
it work fine, I see you're hiding the field with class "hide" so you can't see them
0
 
JiveMediaAuthor Commented:
The hide class is only applied to divs that are not selected in the 'Payment Method' dropdown! If you choose 'Money Order' for example, that information block gets style="display:block" applied. Its not working otherwise their would be 10 rows of input boxes under 'Learners Information' if i selected 10 from the dropdown at the top!
0
 
leakim971PluritechnicianCommented:
create a div to put the input boxes with a dedicated id, for example id="boxes"
and replace : input.appendTo(".learner_input .input_area:last");
by : input.appendTo("#boxes");
0
 
JiveMediaAuthor Commented:
I have added a div with the ID 'boxes' and it is now displaying multiple rows when a different value is selected in the dropdown. Doesn't seem to be functioning correctly however. If i choose '10' then change it back to '2', the rows aren't removed. Also, if i choose '3' in the select for example, 4 rows are displayed when its suppose to be 3.
0
 
leakim971PluritechnicianCommented:
replace everywhere : how_many_to_display<how_many_presents
by : how_many_to_display*1<how_many_presents
0
 
JiveMediaAuthor Commented:
Still no luck.
0
 
leakim971PluritechnicianCommented:
replace everywhere : how_many_to_display>how_many_presents
by : how_many_to_display*1>how_many_presents
0
 
JiveMediaAuthor Commented:
I've requested that this question be deleted for the following reason:

Solved it through another website.
0
 
tel2Commented:
Hi JiveMedia,

Just deleting questions like this opens the EE system to abuse, especially when you haven't even given feedback on the last suggestion from leakim971, which means he didn't have a chance to understand/fix any outstanding issues.  leakim971 put considerable work into this, most of which was probably quite valid, and seemed to basically work at the http://jsfiddle.net/prmd5dfu/ link where he demonstrated it.  The remaining problem seemed to be that you were not able to take his code and get it to work in your environment, which may be beyond the scope of the original question.
Apart from that, you have not even shown us the solution you got from the other site, which opens the EE system to abuse.
I would suggest that you give leakim971 an A grade for the code he supplied at jsfiddle.net.

Or have I missed something?
0
 
JiveMediaAuthor Commented:
I have accepted leakim971's suggestions as his jsfiddle works.

I needed to amend it in other ways to make it work however as it wasn't completely right on my end.

Thanks for all your help and time on this!
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 10
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now