Using Gravity Forms 1.8.1 , no other plugins activated.
Tested also with latest build 1.9.2
Tested using Divi theme, as well as 2015 theme with same results.
Tested in Chrome and Firefox with same results.
Added the following shortcode:
[gravityform id="1" name="test-form-1" ajax="true"]
The form submits, but always with non-ajax and refreshes the page. I can tell this by looking at the tab and viewing the 'Net' tabs in Chrome's developer tools and Firebug in Firefox. The XHR requests are empty, and the requests clear and post normally as they would if it was a non-ajax request.
This should work. I get no errors or conflicts when looking at Firebug's console tab. I found no one experiencing similar problems although not really sure how many gravity form users are paying attention to the behavior in firebug.
I'm sure I'm missing something obvious. Let me know what it is!
Relevant form code generated by Gravity Forms
<div id="gform_wrapper_1" class="gf_browser_gecko gform_wrapper">
<a class="gform_anchor" name="gf_1" id="gf_1"></a>
<form action="/sandbox/#gf_1" id="gform_1" target="gform_ajax_frame_1" enctype="multipart/form-data" method="post">
<div class="gform_heading">
<h3 class="gform_title">test-form-1</h3>
<span class="gform_description"></span>
</div>
<div class="gform_body">
<ul class="gform_fields top_label description_below" id="gform_fields_1">
<li class="gfield gfield_contains_required" id="field_1_1">
<label for="input_1_1" class="gfield_label">Name<span class="gfield_required">*</span></label>
<div class="ginput_container"><input type="text" tabindex="1" class="medium" value="Joe Smith" id="input_1_1" name="input_1"></div>
</li>
</ul>
</div>
<div class="gform_footer top_label"> <input type="submit" onclick="if(window["gf_submitting_1"]){return false;} if( !jQuery("#gform_1")[0].checkValidity || jQuery("#gform_1")[0].checkValidity()){window["gf_submitting_1"]=true;} " tabindex="2" value="Submit" class="button gform_button" id="gform_submit_button_1"><input type="hidden" value="form_id=1&title=1&description=1&tabindex=1" name="gform_ajax">
<input type="hidden" value="1" name="is_submit_1" class="gform_hidden">
<input type="hidden" value="1" name="gform_submit" class="gform_hidden">
<input type="hidden" value="" name="gform_unique_id" class="gform_hidden">
<input type="hidden" value="WyJhOjA6e30iLCJkZjhiZTNiZTg3NDNmMWNlNDNmNTk1N2M0NTY2ZTRiMSJd" name="state_1" class="gform_hidden">
<input type="hidden" value="0" id="gform_target_page_number_1" name="gform_target_page_number_1" class="gform_hidden">
<input type="hidden" value="1" id="gform_source_page_number_1" name="gform_source_page_number_1" class="gform_hidden">
<input type="hidden" value="" name="gform_field_values">
</div>
</form>
</div>
You should still keep your scripts in the footer for performance reasons. But you need to include this in the header.php right above your <?php wp_head(); ?>:
<?php gravity_form_enqueue_scripts(1,true) ?>
with 1 being the id of the form.
In addition to Nate Beers answer, If you have a reCAPTCHA on your form AJAX will not work. reCAPTCHA is not compatible with AJAX.
See issue on gravity forms forum.
https://www.gravityhelp.com/forums/topic/ajax-submission-not-working-on-hard-coded-form#post-36914
I went ahead and used the Gravity Forms anti-spam honeypot as a reCAPTCHA alternative on the form settings page.
Make sure jQuery is enqueued in the head - not the footer.
I'm using the Roots/Sage framework in which it is enqueued in the footer by default - which was causing your exact issue.
Related
I am using Joomla version 3.7.4
I have a form which sends a post request to a method called VerifyMe() in the controller. The form is like so:
<form action="myUrl" class="" method="post">
<input type="hidden" name="task" value="verifyUser"/>
<input type="hidden" name="method" value="<?php echo 'type' ?>"/>
<div class="row">
<div class="col-md-12 text-right">
<button type="submit" class="btn btn-default bold uppercase"><?php echo JText::_('SEND') ?></button>
</div>
</div>
</form>
And in my controller, I have the method
public function verifyMe()
{
JLog::add('VerifyMe Function called for '. $this->input->get('ID') , JLog::INFO, 'VerifyMe');
}
Now in the live environment, for some reason when the client clicks the submit button, the VerifyMe() function is called multiple times. This is not always the case but around 30% of the times its 2 or more calls for the same user.
I had the same problem, and I found the remedy.
Believe it or not, the solution is, tell the users not to "double-click" the buttons. Users tend to click web page buttons like they do to Windows icons.
If you really want to get rid of such problem, do some JavaScript to the template to disable the submit button on submit event.
Hope this helps.
I am using Thymeleaf 3 in Spring Boot 2 web app. Below is the form code:
<form data-th-action="#{/props/r(pg=3)}" method="get">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="pt" id="p1" value="pr">
<label class="form-check-label" for="p1">P1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="pt" id="p2" value="pr2">
<label class="form-check-label" for="p2">P2</label>
</div>
<button type="submit" class=" mb-4">Search</button>
</form>
Unfortunately when I used method get for the form, it does not append ?pg=3 in the submitted URL, the URL looks like /props/r? if no checkbox is selected. If checkbox is selected the URL looks like /props/r?pt=p1
the pg=3 part is missing.
How to fix this problem?
The problem is that you have an action #{/props/r(pg=3)} -- which translates to /props/r?pg=3 and your form is also method get. If you have parameters in both the action and the body of the form (and usemethod="get"), browsers will not combine them. Instead, the parameters of the action are removed and replaced with the paramters in the body of the form.
This is why ?pg=3 is removed and replaced with the checkbox parameters. Either use post instead, or include pg as a hidden form element.
Instead of putting pg as parameter at the form url, consider putting it inside a hidden field like below.
<input type="hidden" name="pg" value="3">
Recently i got attacked by nasty auto-form fill bots which filled my shout form with all sorts of spam. My shout form consist from a html file with 2 textboxes,an ajax script(for refreshing without reloading) and my php file for handling all the inserting data into my DB.
I am thinking implementing a hidden textbox for a minimum protection against these bots but with no luck since i cant pass the honeypot data to my php file. My code:
HTML Form
<form class="form" method="post" action="postdata.php">
<fieldset id="inputs">
<input id="name" name="name" type="text" placeholder="name" maxlength="20">
<textarea id="message" name="message" type="text" placeholder="message" maxlength="255"></textarea>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Submit">
</fieldset>
</form>
Ajax script
$(function(){refresh_shoutbox();$("#submit").click(function(){var a=$("#name").val();var b=$("#message").val();var c="name="+a+"&message="+b;$.ajax({type:"POST",url:"postdata.php",data:c,success:function(d){$("#shout").html(d);$("#message").val("");$("#name").val("")}});return false})});
function refresh_shoutbox(){var a="refresh=1";$.ajax({type:"POST",headers:{"cache-control":"no-cache"},url:"postdata.php",data:a,success:function(b){$("#shout").html(b)}})};
postdata.php file
<?php
if($_POST['name'] or $_POST['message']) {
$name= $_POST['name'];
$message= $_POST['message'];
///do other stuff/////
?>
I will insert a hidden field in my html form
<input id="email" name="emails" style="display:none"></br>
but i cant manage to pass the extra value to my existing ajax script.Tried some code but with no luck.
Any help so i can get my shoutbox up and running again?
I've been trying to use the field-validation framework in Struts2 and have it implemented. The problem is when doing an AJAX call with jquery tags, it targets a resulting div when I want to reload the same page with the fielderror.
<div class="myform">
<s:form id="userForm" action="users" theme="simple">
<h1>Search for Users</h1>
<p><s:fielderror /></p>
<label>Username
<span class="small">Add your name</span>
</label>
<s:textfield id="username" name="username"/>
<label>Point Minimum
<span class="small">Min. 0 points</span>
</label>
<s:textfield name="pointMin"/>
<label>Point Maximum
<span class="small">Max. 5000 points</span>
</label>
<s:textfield name="pointMax"/>
<label>Rate Minimum
<span class="small">Percentage</span>
</label>
<s:textfield id="rateMin" name="rateMin"/>
<label>Rate Maximum
<span class="small">Percentage</span>
</label>
<s:textfield id="rateMax" name="rateMax"/>
<s:hidden name="searchButtonHit" value="%{true}"/>
<sj:a formIds="userForm"
targets="listingDisplay"
button="true"
validate="only"
type="submit"> Search
</sj:a>
<div class="spacer"></div>
</s:form>
</div>
<div class="spacer"></div>
<div id="listingDisplay"></div>
The <sj:a> tag targets the listingDisplay div so the fielderror as well as the same form is loaded underneath which looks very strange. Is there a better way of doing this? Thanks!
Have a look at the below validation link. It adds a string errorhere to the error message and checks for it after response. You can also do this to reload the page and the reload code can be written in 's onSuccessTopics.
Ajax Validation
Method 2
Very simple but may not work on all browsers.
Set the targets attribute of
<sj:a targets="myform">
to the same div, within which the form exists.
I have a form that is served via Ajax from the server when a button is clicked. It pops up in a jquery dialog.
<form onsubmit="hideModal();return getAJAX(this);">
<input type="hidden" name="action" value="updateUserNotes">
<input type="hidden" name="userid" value="20312">
<hr/>
<B>Flags:</B><BR/>
<input type="radio" name="flag" value="none" checked> <img src="images/icons/grey_flag.png"> No Flag<BR>
<input type="radio" name="flag" value="green" > <img src="images/icons/flag_green.png"> Green Flag<BR>
<input type="radio" name="flag" value="red" > <img src="images/icons/flag_red.png"> Red Flag
<B>NOTES:</B><BR>
<textarea name="usernotes" cols="80" rows="10"></textarea>
<input type="submit" value="Save Notes">
</form>
This is the code that my script sends back to display the form. With the HR in there, the form will not submit when you click "save notes". It does not throw a javascript error, it simply does not submit.
If I remove the horizontal rule the form submits 100% fine.
Anyone know what might be causing this? It only appears to affect IE9. I cannot replicate it in Chrome or Firefox or earlier versions of IE9.
I think it has something to do with IE9's strictness, but I can't figure out how the horizontal rule is messing anything up.