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.
Related
for the below element html code i ve tried multiple ways, Radio button is not choosable at all. Can someone help
<fieldset class="usa-fieldset-inputs usa-sans">
<input type="radio" name="certificate_type" id="idvalue" value="xx">
<label for="add_certificate">xxxx(Review requirements)
</label>
<input type="radio" name="certificate_type" id="ddddd" value="xxx">
<label for="add_certificate">xxxxx (Review requirements)
</label>
tried all below
choose("certificate_type")
choose("idvalue")
page.find(:xpath, '//*[#id="idvalue"]').click
and other xpaths also. Xpath seems to be good.
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.
I want to check the first checkbox with id=user_accepts_terms. This is the HTML:
<div class="check-group">
<div class="checkbox">
<input type="hidden" value="0" name="user[accepts_terms]">
</input>
<input id="user_accepts_terms" type="checkbox" value="1" name="user[accepts_terms]">
</input>
<label class="" for="user_accepts_terms">
</label>
</div>
<div class="checkbox">
<input type="hidden" value="0" name="user[subscribed]">
</input>
<input id="user_subscribed" type="checkbox" value="1" name="user[subscribed]">
</input>
<label class="m-focus" for="user_subscribed">
</label>
</div>
I want to check the first checkbox with id=user_accepts_terms. Tried this among other things, but no luck:
find('.check-group').all('.checkbox')[0].find("#user_accepts_terms").set(true)
The .find("#user_accepts_terms").set(true) doesn't work, it says unable to find the css.
This piece works as follows:
2.1.0 :097 > find('.check-group').all('.checkbox')[0].text
=> "I accept the terms of use and privacy policy"
The .all('.checkbox')[0] portion is already finding the checkbox you want, and the .find("#user_accepts_terms") portion is trying to find another element below that, which doesn't exist. Either of the following should work, provided the syntax is correct (I'm unfamiliar with it)
find('.check-group').find("#user_accepts_terms").set(true)
find('.check-group').all('.checkbox')[0].set(true)
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?
On a website I'm working we have an onsite login and a private login, the problem I'm having is that Firefox doesn't seem to be able to differentiate between these login forms.
Does anybody know how I can make clear that these are different logins?
I already tried giving the form fields different names and ids, ex: onsite_login and login but without success.
edit: my form-tags are not being mixed up, they aren't even on the same page
The two forms on the different pages
<form method="post" action="/en/login/1">
<fieldset>
<p>
<input type="hidden" value="login" name="form"/>
<input type="hidden" value="en" name="redirect"/>
<label for="onsite_username">Username<abbr title="Required ">*</abbr></label>
<input type="text" class="input-text" maxlength="255" value="" name="onsite_username" id="onsite_username"/>
<label for="onsite_password">Password<abbr title="Required ">*</abbr></label>
<input type="password" class="input-password" maxlength="255" value="" name="onsite_password" id="onsite_password"/>
<input type="submit" value="Log in" name="submit" class="input-submit"/>
</p>
</fieldset>
</form>
and
<form method="post" action="">
<fieldset>
<input type="hidden" value="login" name="form"/>
<div>
<label for="username">Username</label>
<input type="text" class="input-text" value="" name="username" id="username"/>
</div><div>
<label for="password">Password</label>
<input type="password" class="input-password" value="" name="password" id="password"/>
</div>
<input type="submit" value="Aanmelden" class="input-submit"/>
</fieldset>
</form>
Apparently this is not possible due to the way Firefox stores its passwords.
A password-manager entry is stored with the following data
The username (encrypted and secured with Firefox Master Password).
The password (encrypted and secured with Firefox Master Password).
The hostname of the webpage containing the login form.
The hostname of the webpage to which the form data has been submitted.
Thus Firefox does not distinguish between the two loginfields on my page.
I've not yet heard about a multiple form problem in Firefox.
But it could be that Firefox mixed up your 2 login forms if there is another tag around that is not closed properly.
I've had that problem myself with <p> tags and a not properly closed <div> around it.
I'm not sure.. but try to give them a different ID like <form method="POST" action="#" id="login1">