The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group
Copy text from one field to another
Hello everybody,
I have a form in which I used the following script to copy text from one text field to another(lookup text field). It worked until now.
But now that I have moved these two fields into a repeatable section, the script has stopped working. Any help will be appreciated. I have no knowledge of javascript - I simply copy and paste snippets. The last part in the script is also important, it was added because "watching" fields were not getting updated when the text was copied.
Here is the script:
//copy to another field
jQuery(document).ready(function($){
$('#field_jkybq').change(function(){ //source field key
var sourceField = $("#field_jkybq").val(); //source field key
$("#field_6qubt").val(sourceField); //destination field key
$("#field_6qubt").trigger({ type:'change', originalEvent:'custom' });// trigger a change event in Lookup field so “watching” fields can update
});
});
PS.
I found this example but it only worked when copying from a non-repeating field into a repeating field
#kb-repeating-sections
July 18, 2017 at 8:36 am
Please post a link to the page with the form. When you move a field into a repeatable section, you are actually creating a sub-form. The field ids are all going to be different. The field ids are referenced in your code by the '#'. In HTML, field IDs must be unique across all elements. This means, every field in the repeatable section will have a unique field ID. You have to take this into account if you want to copy values between fields. Your jQuery, by virtue or your repeatable section, will have to be rewritten. I suspect, it will be significantly more complex. If it's something I can help with in just a few minutes, I'll help. If it takes longer than a few minutes, you may have to hire a developer. Either way, I have to see your form to inspect the source code.
July 19, 2017 at 7:23 am
Here is the link http://library.daruliftaazambia.com/
Sorry for the long explanation of what I am trying to do. This system is used for issuing library books. Books are first added using the form 'ADD A FORM'. Students are added using the 'ADD STUDENT' form. Each book has a unique barcode and each student has a unique barcode.
The 'ISSUE A BOOK' form is then used to issue books to students. By typing the book barcode into a lookup field, other watching fields are autopopulated. In this form, a hidden 'Status' field is submitted with the default value of "Issued". Upon returning this book to the library, the book barcode is scanned again and the value of the hidden field is updated to 'Returned'. I am using the repeating section because one student can borrow up to 10 books at once.
The challenge comes when sometimes a student leaves a pile of books and the librarian forgets to update the values to 'Returned'. The books are then placed in the shelf, ready to be issued again. That is why a lookup field has been added to check the status of the book before issuing. If the status shows 'Issued', the book should be prevented from being issued again until it is first 'Returned'. What I would like to do is to copy the barcode automatically from the Book Barcode field to the Status Check field, so that there is no need to scan the same barcode twice.
As mentioned, this was working in the non-repeating section but doesn't work as expected.
July 19, 2017 at 2:46 pm
Okay, so when you added the fields to the repeatable section, the field ID changed.
The first book barcode field on the issue a book form is field_o8v4sw-0. I'm assuming this is what you meant by the source field in the jQuery you have above. The source field in the jQuery is field_jkybq. That text does not appear in the issue a book form, except in the jQuery.
When you a repeatable field, the field id will be different for each row you add. So, if you can add up to 10 books, the barcode id will be:
field_o8v4sw-0
field_o8v4sw-1
field_o8v4sw-2
field_o8v4sw-3
field_o8v4sw-4
field_o8v4sw-5
field_o8v4sw-6
field_o8v4sw-7
field_o8v4sw-8
field_o8v4sw-9
Counting always starts at 0. Instead of checking for each individual field to change, this can be done with a wild card.
$("[id^=field_o8v4sw]").on("change", function(){ //source field key
var sourceField = $(this).val(); //source field key
In order to determine the destination field, you're going to have to do some string manipulation. So the first thing we have to do is get the ID of the barcode field.
var barcodeid = $(this).attr("id");
Next, we need to get the number at the end of the ID. This number will be the same as the destination field.
var index_number = barcodeid.substr(barcodeid.lastIndexOf("-")+1);
Now we can populate the destination field.
var destination_field = "#field_6qubt-" + index_number;
$(destination_field).val(sourceField);
Here is your new jQuery
jQuery(document).ready(function($) {
"use strict"
$("[id^=field_o8v4sw-]").on("change", function() { //source field key
var sourceField = $(this).val(),
barcodeid = $(this).attr("id"),
index_number = barcodeid.substr(barcodeid.lastIndexOf("-")+1),
destination_field = "#field_6qubt-" + index_number;
$(destination_field).val(sourceField); //destination field key
$(destination_field).trigger({ type:'change', originalEvent:'custom' }); // trigger a change event in Lookup field so “watching” fields can update
});
});
I have not tested this code because I don't have access to your forms. I think it'll work out of the box, but it may need some tweaking.
July 20, 2017 at 12:33 am
Great. Many thanks for this. It works perfectly for the first repeating row, but it seems the jQuery is not triggered when adding a new row. I found this example but not sure how to fit it here:
https://formidableforms.com/knowledgebase/javascript-examples/#kb-repeating-sections
something to do with
function frmThemeOverride_frmAddRow(){
I am trying to tweak it, will let you know how it goes.
July 21, 2017 at 11:40 am
The example code won't work in your case, but I can get it to work for you. I'll take a look over the weekend when I have a little more time.
July 21, 2017 at 1:30 pm
This worked for me
$(document).on('keyup', '.CopyBarcode', function(){
"use strict"
$("[id^=field_o8v4sw-]").on("change", function() { //source field key
var sourceField = $(this).val(),
barcodeid = $(this).attr("id"),
index_number = barcodeid.substr(barcodeid.lastIndexOf("-")+1),
destination_field = "#field_6qubt-" + index_number;
$(destination_field).val(sourceField); //destination field key
$(destination_field).trigger({ type:'change', originalEvent:'custom' }); // trigger a change event in Lookup field so “watching” fields can update
});
});
CopyBarcode is the name of a class attached to the barcode field in the form builder.
Thank you @Victor Font. You've been a great help :)
Discussion closed.