I'm having a ton of trouble with this form I created on a WordPress site. It uses Gravity Forms, and submissions are handled through AJAX.
The form exists on a modal (using custombox jQuery plugin) which is triggered when you click the "Contact" menu item.
Basically, jQuery events don't work on the form. If you hit submit without filling in the proper fields, the form fails to trigger a validation error message. If the form IS filled out correctly, the entry is saved but no confirmation message is sent.
I've tried handling the validation myself (pasting code below), but I can't get the values of the inputs unless you refresh or hit submit a 2nd time. Upon initial submit, it only returns the initial values, not the new ones.
I have the script loading in the head, and inside a document ready function. I'm completely out of ideas and would really appreciate any help!
$('body').on('submit', '.custombox-content form#gform_1', function(){
console.log('submit');
var inquiry_type = $('.inquiry select').attr('value');
console.log(inquiry_type);
//validateForm();
});
Here, I'm trying to get the value of a select input. When the form is submitted, 'submit' is logged along with the initial select field value. It doesn't log the real selected value until I hit submit a 2nd time.
Related
I'm trying out a simple CSRF attack and ran into an issue.
If I have a dummy site containing this form:
<form action="somewebsitetoexploit.com/someformpage" method="GET" hidden>
<input type="password" autocomplete="off" name="password_new" value="hacked"><br>
<input type="password" autocomplete="off" name="password_conf" value="hacked">
<input type="submit" value="Change" name="Change">
</form>
My original idea was to have this form "self submitting" by having a script tag call submit on the form on page load to automatically change the user's password when they visit the page:
<script>
window.onload = (_) => {
const form = document.getElementsByTagName("form")[0];
form.submit();
};
</script>
This looked like it worked, but the password failed to change. When looking at the GET parameters, I realized that it was because it didn't include the Change parameter (the submit button itself). It produced:
?password_new=hacked&password_conf=hacked
Instead of:
?password_new=hacked&password_conf=hacked&Change=Change
And I'm guessing this is causing it to fail a validation check on the backend.
It seemed hacky, but I was able to fix it by having it click the submit button instead of submiting the form directly:
<script>
window.onload = (_) => {
const submit = document.getElementsByName("Change")[0];
submit.click();
};
</script>
I looked over the relevant MDN page, and it notes that calling submit has two differences from clicking the submit button:
No submit event is raised. In particular, the form's onsubmit event handler is not run.
Constraint validation is not triggered.
It isn't immediately clear though why the onsubmit not firing would affect what GET parameters are sent, so I'm not sure if that's relevant.
Obviously for forms that use GET as the method, I could just construct the URL with query parameters manually and not worry about having a form. For the sake of learning though (and in case I want to manipulate a form that uses POST in the future), I'd like to understand what's happening here.
The page I'm trying to "attack" is the password change CSRF page of DVWA.
A form can have multiple submit buttons, with different names and/or values.
When you click a submit button and the default submit action takes place, the name and value of the button you clicked are included in the form parameters when the form is submitted.
When you call the submit() method there's no associated button click, so no button name and value will be included in the parameters. If the form has multiple submit buttons, which button would you expect it to send?
This behavior is specified in the HTML standard:
The submit() method, when invoked, must submit the form element from the form element itself, with the submitted from submit() method flag set.
Where submission carries out the many steps described here:
When a form element form is submitted from an element submitter (typically a button), optionally with a submitted from submit() method flag set, the user agent must run the following steps:
...
Let submitterButton be null if submitter is form. Otherwise, let submitterButton be submitter.
...
Let entry list be the result of constructing the entry list with form, submitter, and encoding.
Where the entry list eventually results in a string like ?password_new=hacked&password_conf=hacked.
If you submit the form by pressing the button (either manually or programatically), submitter is set to the button, so the entry list includes the button.
If you submit the form by using .submit(), submitter is set to the form, so submitterButton is set to null, so the entry list does not include it.
The construction of the entry list skips buttons which are not submitter:
For each element field in controls, in tree order:
If any of the following is true:
The field element is a button but it is not submitter.
Then continue.
How to clear validation messages in a dijit form (widgets including validation textboxes, filtering selects, number textboxes etc without resetting the form, ie Data need to be retained but validation messages. I am looking for a kind of flush action retaining the data.
You can use the reset function on the form itself.
reset(e) restores all widget values back to their init values, calls
onReset() which can cancel the reset by returning false,. Resource.
Example:
require(["dijit/registry"], function(registry){
var form = registry.byId("yourFormId");
form.reset();
});
registry.byId(textBoxId).reset();
I am looking for a way with my form I am currently showing and hiding fields based on the values selected in the dropdowns, What I want to know is.
when i select yes and the field below displays I click submit on the form, if I return to the form the value is still present but the field is hidden again...
How can I prevent that from happening by default?
I want my browser to remember the jQuery change funtions state I left it at after I submit the form.
What you want to do is 'refresh fields visibility' in some cases. I suggest you to create such function refreshFieldsVisibility. Such function reads values from the dropdown and shows/hide the proper field. Then call your function:
When elements state is changed, with on('change') events.
When document is ready (this is your case as I understand), with $(document).ready
Any other situation if necessary
Actually am new to YII, I have a page with Form and JQGrid. whenever the user clicks ADD button, Forms values should be added a row in JQGrid. This functionality I did. But I want to validate the form data while clicking ADD button in JQuery.
Kindly help me to validate form values in client side either javascript or JQuery.
In your form view where your are initializing the form
....
'enableClientValidation' => true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
)
));
Refer to this documentation for more details http://www.yiiframework.com/doc/api/1.1/CActiveForm#enableClientValidation-detail
I have included HTML5 Validations into form and made the ADD button as submit, In JQuery i did the following changes,
$('#btnAdd').submit(function(event){
event.preventDefault();
// Logic to add the form values into grid row.
});
So It works as i expected.
Unobtrusive validation is based on the idea that you don't do form validation until the form has been submitted by the user; once that's happened, if something is invalid on the form, then each field is immediately validated once the user has changed it.
What I want to do is trigger validation on a form element "unobtrusively" - that is, only validate the form element if the user has already tried to submit the form. So I can trigger the validation of an element (I do it when a certain checkbox is changed) like so:
$('#chkNoPersonId').change(function(){
$('#lstPersonId').valid();
});
But the trouble is that that will always cause lstPersonId to be validated and an error displayed when invalid, even if the user hasn't yet submitted the form once. I want it to only be validated once the user has tried to submit the form. Is there some value I can check to see whether the user has tried to submit the form yet, or some other way I can achieve this behaviour?
You can add a flag on submit button to identify form submit has been already clicked or not.
ex:
$('#submitButn').click(function(){
$(this).attr('data-submitted','true');
});
Than in each validation of input check weather that flag is true or not and perform your validation logic.
$('#chkNoPersonId').change(function(){
if( $('#submitButn').attr('data-submitted')=='true'){
$('#lstPersonId').valid();
}
});
On clear or reset of form you can remove that attribute
$('#submitButn').removeAttr('data-submitted');
Have you tried using using the submit event handler?
$("form").submit(function() {
//validate here
});
source:
http://api.jquery.com/submit/