Coding for a functional Button on PHPRunner Input Form

JavaScript
1

I have a single Form which allows user to create a new Gift Voucher record.

It is split into 3 input areas Voucher Details, Payment Details and Delivery Details.
​
I want to add a button on the Payment details section which when activated will copy some of the entered fields from the Payment section to some of the fields in the Delivery section as follows: -

FROM PAYMENT SECTION TO DELIVERY SECTION

PurchaserName DeliveryName
PAddressLine1 DAddressLine1
PAddressLine2 DAddressLine2
PCounty DCounty
PPostCode DPostCode

I am using a Code Building product called PHP Runner which when you add a button gives you a properties widget as per attachment in which to place your bespoke code.

611×520 38.2 KB

1213×583 38.8 KB

2

If you share the full HTML source with the JavaScript we may be able to suggest what you need to do, I doubt many here will be familiar with PHP Runner, I’m not.

3

Hi there,
I understand your point. I would have attached the product manual which I think would have been a help but as a new user I am unable to.
I have in the past had someone who unfortunately I cant contact now that was not familiar with the product at all but I would give him problems such as this one and send me back the code and which tabs on the properties window to paste it into and I was off and running. I guess I am hoping to find someone like that.

4

Well the most basic approach would be something like

// Add a click listener to the button confirming the payment details
document.getElementById('payment-confirm').addEventListener('click', function() {

  // Get the input elements by ID
  var paymentFirstName  = document.getElementById('payment-first-name');
  var paymentLastName   = document.getElementById('payment-last-name');
  var deliveryFirstName = document.getElementById('delivery-first-name');
  var deliveryLastName  = document.getElementById('delivery-last-name');
  
  // Set the values of the delivery inputs to the values of the corresponding
  // payment inputs
  deliveryFirstName.value = paymentFirstName.value;
  deliveryLastName.value  = paymentLastName.value;
});

Here’s a fiddle with markup. If you have trouble applying this to your project, we can certainly give you further assistance; however even if someone would volunteer to write the entire solution for you, it would be rather tricky without seeing the markup. ;-)

5

Hi there,
Thank you very much for that. I certainly see where your coming from. However my HTML for the form differs from your construct and I have pasted herwith. Could not attach as I’m new user sorry.
Please note that the button I have added shows as ID New_Button and is called Copy Details

Sorry if I paste there are massive gaps and only a very small part shows. Not sure how I can it to you?

6

You need to escape HTML to make it show here; the easiest way would be selecting it and clicking the </> button in the tool bar of the comment box.

7

`<DIV {$pageattrs}>
{BEGIN container_1}










{BEGIN CashcardReference_tabfieldblock}







{END CashcardReference_tabfieldblock}
{BEGIN PurchaserName_tabfieldblock}







{END PurchaserName_tabfieldblock}
{BEGIN PAddressLine1_tabfieldblock}







{END PAddressLine1_tabfieldblock}


{BEGIN PaymentMethod_label}
{$label tblVouchers PaymentMethod}

{END PaymentMethod_label}
{$PaymentMethod_editcontrol}
 
{$label tblVouchers PAddressLine1}
{$PAddressLine1_editcontrol}

 Copy Details 

{BEGIN CashcardReference_label}
{$label tblVouchers CashcardReference}

{END CashcardReference_label}
{$CashcardReference_editcontrol}
 
{$label tblVouchers PAddressLine2}
{$PAddressLine2_editcontrol}

{BEGIN PurchaserName_label}
{$label tblVouchers PurchaserName}

{END PurchaserName_label}
{$PurchaserName_editcontrol}
 
{$label tblVouchers PCounty}
{$PCounty_editcontrol}

{BEGIN PAddressLine1_label}
{$label tblVouchers PContactNumber}

{END PAddressLine1_label}
{$PContactNumber_editcontrol}
{$label tblVouchers PPostCode}
{$PPostCode_editcontrol}

{END container_1}

`
8

Ah well I don’t know about PHP runner either, I thought more of the generated HTML… anyway, have you tried to adapt my above snippet by adjusting the IDs?

9

Hi there,
Yes I have, placing the code in the Client Before Tab. When clicked there is no error, the page scrolls down a little and nothing else happens.

`// Put your code here.

// Add a click listener to the button confirming the payment details
document.getElementById(‘New_Button’).addEventListener(‘click’, function() {

// Get the input elements by ID

var PurchaseName = document.getElementById(‘PurchaseName’);
var PAddressLine1 = document.getElementById(‘PAddressLine1’);
var PAddressLine2 = document.getElementById(‘PAddressLine2’);
var PCounty = document.getElementById(‘PCounty’);
var PPostCode = document.getElementById(‘PPostCode’);

// Set the values of the delivery inputs to the values of the corresponding
// payment inputs
DeliveryName.value = PurchaseName.value;
DAddressLine1.value = PAddressLine1.value;
DAddressLine2.value = PAddressLine2.value;
DCounty.value = PCounty.value;
DPostCode.value = PPostCode.value;

});

// Uncomment the following line to prevent execution of “Server” and “Client After” events.
// return false;`

10

I have built a work round by making the Field Copy Dynamic and adding a Clear Fields Button in the Delivery Section.

Thanks to those of you who tried to help me, it was very much appreciated.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.