ADD CUSTOM LINK TO FORM WITH FIELD VALUE AS PARAMETER

By: TRACY DOUGLASS | Asked: 06/20/2022
ForumsCategory: How-toADD CUSTOM LINK TO FORM WITH FIELD VALUE AS PARAMETER
TRACY DOUGLASS asked 3 years ago
I need to add a custom link to my form-at the end of the link i need to supply a parameter that is a field value on the form.  Can anyone help with this?  I've tried numerous things. FF suggested I modify the javascript example they give that embeds a youtube video.  here's what I came up with and it's not working.  In an html field on my form i have:
<div id="entryid_div"></div>
in the custom html under Settings, in After Fields I have:
<script>
<script type="text/javascript">
jQuery(document).ready(function($){
 var $use_field = $(#field_vkzob); //field with value to append to url
//  $use_field.change(function () {  // i removed this as i'm not changing anything
 var entryid_id = $use_field.val();
document.getElementById("entryid_div").innerHTML = '<a href="https://staging67.mypayrollservice.com/employee-file-update-form?param-id=' + entryid_id +'">CLICKHERE</a>';  //url i'd like to see on the page
//});
});
</script>
thank you for any suggestions. (edited) 
Question Tags:
2 Answers
Victor Font answered 3 years ago

You need to do some debugging to get to an answer because we can't tell from the code where the failure may be taking place. This code is poorly written though. The YouTube embed exemplar may be very old.

Anyway, here's the first mistake I see. I don't know if this is a copy and paste error or if your code actually has 2 script tags. Get rid of the one that includes the type. Type isn't needed anymore.

Second, you're mixing JavaScript with jQuery in a jQuery function. While it's perfectly okay to do this from a programming perspective, it makes code easier to read when you use jQuery syntax in a jQuery file. It's a personal choice though.

This is just my 2-cents about adhering to coding standards. May I offer you a free copy of the "Masterminds Software Development Standards"?

Have you debugged the code and examined the results in your browser's development console?

Using console.log(), look for the answers to these questions:

What are the values of the $use_field and entry_id after they are initialized?

What is the value of div#entryid_div after the function runs?

Does the div have the value and not displaying on the screen?

Is the div visible on the screen? Is the CSS color correct and compliant with Accessibility Guidelines?

Are there other jQuery errors in the console that could be preventing my code from running?

These are observations about the code specifics that could present obstacles for meeting your objectives. I've included recommended improvements, as well.

1 You named both variables using different naming conventions. $use_field is written as a jQuery variable, while entryid_id is written as a JavaScript variable without the $. Again, these are both correct and a matter of personal choice. But for code readability, it's inconsistent. My personal habit is not to use the $ with variables in jQuery code so it's not confused with PHP variables if generating jQuery on the fly in PHP.

2. You removed the code trigger. The change() function is the trigger that made this code work with YouTube. When you remove a code trigger, the function executes in the document ready event. If this is the behavior you're targeting, then removing the trigger is the right thing to do.

3. With jQuery, this code is overly complex and can be reduced by a few lines. You don't need to build a call to a field val() by using variables to copy the field first. I don't know of any recommended reason to do this and I've been writing jQuery for a long time. This is just an unnecessary extra step in my mind.

You can get the var entryid_id in one line of code: var entryid_id = $('#field_vkzob').val();

4. You are missing the quotes when you initialize "$use_field = $(#field_vkzob);", anyway.

$use_field is the copy of #field_vkzob field object. When copying a field object, it should be "var $use_field = $('#field_vkzob');". jQuery won't copy the field object without the quotes inside the parens.

5. Get rid of the getElementById(). Use $('div#entryid_div') to insert the URL into the div. You can find plenty of examples on the web about how to do this in jQuery.

You may have to assign the URL to a variable first before inserting it into the div. It's possible to do this in a single line of code if extend the entryid_id variable declaration to build the URL in a single step. You can then write the variable to the div in a second step. You can potentially reduce this function down to 2-lines of code.

Good luck!

TRACY DOUGLASS answered 3 years ago
hi Victor, thank you.  I have it working now, BUT, the console tool shows this error that I don't know how to correct: Uncaught SyntaxError: Private field '#field_vkzob' must be declared in an enclosing class   here is my working code: <script> jQuery(document).ready(function($){ var entryid_id = $('#field_vkzob').val(); $('#entryid_div').html('<a href="https://staging67.mypayrollservice.com/employee-file-update-form?param-id=' + entryid_id + '">CLICKHERE</a>'); }); </script>
TRACY DOUGLASS replied 3 years ago

i have tried to figure out how to resolve this error without success, can anyone help?
Uncaught SyntaxError: Private field '#field_vkzob' must be declared in an enclosing class

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right