PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Use jQuery to fill in fields.

  1. Hello, this is a sort of follow up to this post.

    I need to manipulate the contents of inputs using jQuery via my template. What is the best way to do this? (In my case, best probably means simplest, rather than most robust.)

    In the past, I have arduously used dozens of WP custom fields to pass along the IDs via php. That's not a good option, if it can be helped.

    Thanks,
    - tollie

    Posted 9 years ago on Wednesday July 28, 2010 | Permalink
  2. pfoster
    Member

    Tollie,

    I'm looking for the same solution. I know this will involve dynamic population of GF fields via a parameter - likely PHP hooks. But I do not have experience passing from JQuery via PHP hook. Have a great jQuery field calculations tool, just need the connection. Hope someone has been down this road and can shed light on the problem.

    Patrick

    Posted 9 years ago on Wednesday July 28, 2010 | Permalink
  3. Conceptually, all you'll need to populate a field with jQuery is a line like this:

    jQuery("#field_id").val('Custom value here');

    Is your need more complex? If so, do you have an example for reference?

    Posted 9 years ago on Wednesday July 28, 2010 | Permalink
  4. pfoster
    Member

    Thanks David

    I don't think it's more complex than that - I'm guessing that the #field_id you reference would be the parameter to pass to GF?

    This is the calculator I built with jQuery, just want to pass the totals on to GF to collect and export via CSV

    http://usatodayeducate.com/res-calc.html

    thanks

    Posted 9 years ago on Wednesday July 28, 2010 | Permalink
  5. I believe the field_id he references is the actual id of the form field when you view source. The jQuery uses javascript to add that value into the form field that contains that field id. When using javascript you don't need to use the dynamic parameter you set when checking "Allow field to be populated dynamically". That is used when populating a field via PHP. jQuery can populate a field dynamically using javascript purely based on the HTML field ids.

    Posted 9 years ago on Wednesday July 28, 2010 | Permalink
  6. So would all of these fields remain outside of the form and only the total would be passed to the form? I'm assuming the user would be taking some action to indicate that this is their final tally?

    Posted 9 years ago on Wednesday July 28, 2010 | Permalink
  7. pfoster
    Member

    I was actually looking to have quantity and total for each row (ex. id="qty_item_1" and id="total_item_1") as well as the Grand Total (id="grandTotal") passed to GF. It's making that connection that I haven't been able to do. Of course it would be possible to build this outside of GF, but would really like to have it in there with all the other forms.
    Carl, when you say "jQuery can populate a field dynamically using javascript purely based on the HTML field ids" could you explain how that would be done?

    Thanks again,

    Posted 9 years ago on Wednesday July 28, 2010 | Permalink
  8. Dave's basic code example above showed how to populate a field using jQuery:

    jQuery("#field_id").val('Custom value here');

    To do so via inputs, etc. of course is going to take more complex jQuery than that. You would use jQuery to populate the hidden fields based on actions taken on your hardcoded fields in the HTML Block. It's possible, but will take jQuery knowledge to implement.

    Posted 9 years ago on Wednesday July 28, 2010 | Permalink
  9. pfoster
    Member

    Thanks - I'll dig into this and let you know how it comes out. Tollie, sorry to hijack the thread, hope you get an answer.

    Patrick

    Posted 9 years ago on Wednesday July 28, 2010 | Permalink
  10. Thanks for the responses. I'm afraid that somewhere along the line, I either miscommunicated or was misunderstood.

    Addressing the fields in the HTML block via jQuery is no problem.

    My question is: is there an easier way to address the GF inputs via javascript, than my previous solution which was to add the form to a page, view the page, and copy/paste the resulting IDs into wordpress custom fields?

    In other words, I need a way to control the resulting HTML IDs, or some other non-variable alternative that won't change.

    I need this:

    <li id='field_3_19' class='gfield gform_hidden' style='display:none;'><input name='input_19' id='input_3_19' type='hidden' class='gform_hidden' value='TEST' /></li>

    To be this, or similar:
    <li id='field_3_19' class='gfield gform_hidden' style='display:none;'><input name='input_19' id='SET-BY-ME' type='hidden' class='gform_hidden' value='TEST' /></li>

    Does this help to clarify my question? Thanks.

    - tollie

    PS. My first hope was that the inputs inside the HTML block would be auto-detected by GF and available for use in the notifications. The hidden inputs are merely a work around to that, since the HTML block inputs, effectively, don't work.

    Posted 9 years ago on Thursday July 29, 2010 | Permalink
  11. Hi Tollie, if you are using the same form the field id's will be consistent. If you are using different forms but each form has the same fields you want to target, you can add classes to the fields in the GF admin and target them with jQuery that way.

    I'm still not 100% sure what you're end goal is here. If you'd be willing to share a link to the form in question, I'm sure I could give you a much more helpful answer. You can send it to david@ounceoftalent.com.

    Posted 9 years ago on Friday July 30, 2010 | Permalink
  12. Thanks David. That helps. I had suspected, but hadn't counted on, that GF would reuse the same IDs.

    It would be very much appreciated if in the future, the possibility of pseudo-intelligently scanning the HTML blocks for inputs, was implemented.

    Thanks,
    - tollie

    Posted 9 years ago on Friday July 30, 2010 | Permalink
  13. Actually, update - just noticed:

    The hidden input types do not allow for setting the CSS class. It would be helpful if that could be done.

    Thanks,
    - tollie

    For the benefit of anyone curious, my solution thus far is to use the HTML block with unique classes (avoiding IDs only to avoid the possibility of conflicts) for each targeted element - a total of about 16. Then, calculate and concatenate what information from that I need passed along to the form, and passing it along by way of 2 hidden inputs.

    Since I can't set the hidden input CSS, I'll be using custom fields in wordpress to pass along their ID to my template on a page by page basis. (This is the burdensome method I used previously for all of the elements I needed - around 18 - to manipulate before GF implemented the HTML block.)

    Posted 9 years ago on Friday July 30, 2010 | Permalink
  14. I have a question that seems a bit like this. Sorry if this is the wrong place to post this.

    Anyway, what I want, is to have a lot of bands to go to a page with GF and fill out the form. But, I would like one hidden field to dynamically be filled in with the name of the band.

    The emails to the bands, will be sent out using Campaign Monitor, and I thought I maybe could achieve this by making the band name part of the URL every band is going to click. Ex.: http://domain.com/form.php#band_name or http://domain.com/form.php?=band_name.

    Does it make sense?

    Any help is highly appreciated...

    Thanks.

    Posted 9 years ago on Monday August 30, 2010 | Permalink
  15. @Mums Studio: Yes, this is possible. First you have to set that hidden field settings so it can be populated dynamically.

    Edit your form, edit the hidden field you want to store the band name in and then select the Advanced tab. Check the "Allow field to be populated dynamically" checkbox and then it will display a parameter field... give it a name such as "bandname". Save the form.

    Not you can pass a "bandname" parameter to your form such as...

    http://domain.com/my-form?bandname=NAMEHERE

    Posted 9 years ago on Monday August 30, 2010 | Permalink
  16. @Carl That's awesome. Works like a charm...

    Thank you very much.

    Bjarne // Mums Studio

    Posted 9 years ago on Wednesday September 1, 2010 | Permalink