?
Solved

Cloning User Inputs

Posted on 2014-11-30
20
Medium Priority
?
108 Views
Last Modified: 2014-12-16
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
Comment
Question by:JiveMedia
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 9
20 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 40473035
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
 

Author Comment

by:JiveMedia
ID: 40473044
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40473046
provide a link to your website
0
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 

Author Comment

by:JiveMedia
ID: 40473049
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40473064
remove theses lines :
		input = $('.learner_input .user_bf_input').eq(0).clone();
		$('input', input).val('');
		$('.learnerNames').val('');

Open in new window

0
 

Author Comment

by:JiveMedia
ID: 40473096
Hi leakim971,

Still no luck after removing the lines!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40474941
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
 

Author Comment

by:JiveMedia
ID: 40474957
Hi Leakim971,

Still no luck, am i suppose to be changing any values in your code?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40474977
I don't see the latest code on your website
0
 

Author Comment

by:JiveMedia
ID: 40474986
Its definitely uploaded and visible for me, please see the attached screenshot!
Screen-Shot-2014-12-02-at-7.51.53-am.png
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40474995
it work fine, I see you're hiding the field with class "hide" so you can't see them
0
 

Author Comment

by:JiveMedia
ID: 40475006
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40475012
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
 

Author Comment

by:JiveMedia
ID: 40475033
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40475047
replace everywhere : how_many_to_display<how_many_presents
by : how_many_to_display*1<how_many_presents
0
 

Author Comment

by:JiveMedia
ID: 40475050
Still no luck.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40475055
replace everywhere : how_many_to_display>how_many_presents
by : how_many_to_display*1>how_many_presents
0
 

Author Comment

by:JiveMedia
ID: 40504079
I've requested that this question be deleted for the following reason:

Solved it through another website.
0
 
LVL 12

Expert Comment

by:tel2
ID: 40504080
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
 

Author Comment

by:JiveMedia
ID: 40504113
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question