Solved

Cloning User Inputs

Posted on 2014-11-30
20
94 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
  • 10
  • 9
20 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
provide a link to your website
0
 

Author Comment

by:JiveMedia
Comment Utility
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
Comment Utility
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
Comment Utility
Hi leakim971,

Still no luck after removing the lines!
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Comment Utility
Hi Leakim971,

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

Expert Comment

by:leakim971
Comment Utility
I don't see the latest code on your website
0
 

Author Comment

by:JiveMedia
Comment Utility
Its definitely uploaded and visible for me, please see the attached screenshot!
Screen-Shot-2014-12-02-at-7.51.53-am.png
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 82

Expert Comment

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

Author Comment

by:JiveMedia
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
replace everywhere : how_many_to_display<how_many_presents
by : how_many_to_display*1<how_many_presents
0
 

Author Comment

by:JiveMedia
Comment Utility
Still no luck.
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
replace everywhere : how_many_to_display>how_many_presents
by : how_many_to_display*1>how_many_presents
0
 

Author Comment

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

Solved it through another website.
0
 
LVL 11

Expert Comment

by:tel2
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now