[Resolved] Wrong Form Being Submitted

[Author]

Posts

[Darryl]

I wanted to use a text link to submit my forms instead of the form button and found this:

https://toolset.com/forums/topic/how-can-i-turn-the-cred-submit-button-into-a-text-link/

This does exactly what I want, but I have multiple forms on the page and it always uses (submits) the last form listed.

My Template

[cred_form form="event-status-create-interested"]
[cred_form form="event-status-create-going"]

One of the Forms

[credform]
  <div style="display:none;">
    [cred_field field='post_title' class='form-control' value='[wpv-user field="display_name"]']
    [cred_field field='event-individual-intention' force_type='field' class='form-control' value='1']
    [cred_field field='@event-event-intent.parent' class='form-control' select_text='--- not set ---'  value='[wpv-post-id id='$current_page']']
  </div>
  <a href="javascript:void(0);" class="callsubmit"> <i class="far fa-calendar-star"></i> I'm Interested </a>
  [cred_field field='form_submit' output='bootstrap' value='Interested']<br/>
[/credform]

[Shane]

Hi Darryl,

Thank you for getting in touch.

I took a look at the code Minesh had provided and the problem with having the multiple forms on the page is that your code isn't targeting a specific form.

I would suggest giving your form's submit button a unique name and update the JS to target that specific submit button.

Thanks,
Shane

[Darryl]

I changed the line in my form to:

<a href="javascript:void(0);" class="callsubmitinterested"> <i class="far fa-calendar-star"></i> I'm Interested </a>

and the JS

jQuery(document).ready(function($){
   
  $('.callsubmitinterested').click(function(){
    $('.wpt-form-submit').trigger('click');
  });
   
});

(for the other form I used "callsubmitgoing" in both locations)

But the last form listed is still the one submitted.

[Shane]

Hi Darryl,

You need to change the name of the submit button.

Take a look at my submit button below.

	[cred_field field='form_submit' value='Submit' urlparam='' class='btn btn-primary btn-lg my-submit' output='bootstrap']

Then my code will be.

jQuery(document).ready(function($){
    
  $('.callsubmitinterested').click(function(){
    $('.my-submit').trigger('click');
  });
    
});

This will ensure that the correct form is targeted .

Thanks,
Shane

[Darryl]

My issue is resolved now. Thank you!