Create HTML button with dynamic link

replied on June 1, 2020

There is not a reason to put the link into the field, it was only to be able to confirm that the link value retrieved the OEMemberID value. I know that to update the HREF value I will need to use javascript but I have tried several ways to do that and not able to properly do it. I appreciate your help if you have a sample.

0 0

View 2 previous replies

replied on June 1, 2020 • Show version history

To be honest I wouldn't bother with changing the link at all. You already configured your a tag to look like a button, so just make it a button and handle everything in JavaScript.

First set a custom CSS class on the OEMemberID field, or get the field ID, which will be shown above the field in the right pane when you open the CSS/JavaScript editor.

The ID of the parent would be something like q1, q4, etc., and the field ID would just replace "q" with "Field"

I prefer to use classes because it is easier to move things around without having to go in and change the JavaScript.

The button:

<button id="testBtn" type="button">TEST</button>

The field:

The JavaScript:

$(document).ready(function(){
  $('#testBtn').on('click',function(){
    var URL = 'https://www.test.com?' + $('.testField input').val();
    
    window.open(URL); 
  });
});

3 0

SELECTED ANSWER

replied on June 1, 2020

Jason, Thanks for the scripts. That was exactly what I needed, I tested with my sample form process and opened the expected page.

Thansk

0 0

replied on June 5, 2020

Hi Jason, the script is working for one of the button that I have but not the second one. The second one is being displayed inside on a Collection, I updated the HTML to add the class RemoveBtn and the value for the class oedepField should be the one on the same record as the button.

When I click the second one, is not even opening the link, how can I change the code to make work in the collection?

Button.txt (413 B)

| Download

0 0

replied on June 5, 2020

If you're dealing with Collections, that is a very different thing, especially if users can add rows.

First, event handlers set on document ready will only be assigned to elements that already exist when the form first loads.

Second, you'll need to make sure you're only retrieving the value for the corresponding collection item.

Check the following post for more information about event handlers in collections:

https://answers.laserfiche.com/questions/153832/Table-and-Collection-JavaScript-Event-Handlers#171159

0 0

replied on June 15, 2020

Hola Pedro-

The trick is to put a class on your Collection, then target that when the button gets clicked, like:

$('.MyCollection').on('click', '#RemBtn', function(){

Once triggered, you need to get at the data in the collection item (div) that you clicked in, just like getting at a field in a specific row in a table. Here's a simple code example that should help:

$('.MyCollection').on('click', '#RemBtn', function(){
	var valField = $(this).closest('div.form-q').find('.oedepField input').val();
	alert(valField);
});

0 0

Question

Question

Create HTML button with dynamic link

Answer

Replies

Sign in to reply to this post.