Get submit button value onsubmit event - javascript

I have a strange edge-case, let me try to describe it:
I have a form with multiple submit buttons with different values. The submit value is important in my backend. I want to intercept a form submit (using onsubmit) do an asynchronous task and continue the event.
Sadly calling Form.prototype.submit() does not work, because the information which button was clicked is lost. Of course I can emulate that data, but just adding a hidden input, but I don't know how to figure out which button was clicked in the onsubmit event.
If you need an example this is where I am trying to solve it:
https://github.com/codingjoe/django-s3file/blob/master/s3file/static/s3file/js/s3file.js

When you dynamically submit the form, you can do it differently than calling form.submit. You can just trigger the click event of whichever submit button you need to. Then, in a click event handler for the submit buttons, you can assign a value to your hidden form field with the appropriate data.
Also, know that if you just give your submit buttons a name attribute with a unique value and they will deliver their value as part of the form's data that gets submitted.

Related

react-final-form: how to submit per change in fields without button?

I have a text field, dropdown, date picker, and etc. My form won't have a save button so I don't have any type of "submit". For text field, I want the onSubmit to trigger to happen when the user enters enter button. For dropdown and date picker, it would call onSubmit when a user picks a different value aka onChange. It seems like you need a button or something of type submit to trigger onSubmit but it's not like I can put two types per Field. Any ideas on how I can trigger submit per field without any clicking any buttons?
here is a sandbox where I tried to trigger onSubmit per field.
https://codesandbox.io/s/react-final-form-external-submit-button-forked-gz40r3
one of the parameters that is getting passed in the Form's render is a reference to "form". You can trigger form.submit() in onChange or pass it as a param to another function and call it within that function.

Why does calling submit on a form and click on a submit button produce different GET parameters?

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.

jQuery change function, how to save the state like a session

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

onblur even is not working as expected

I have a form having 5 fields and a submit button.
On one of the fields i am having an onblur event but if the user changes the value in that textbox and directly clicks on submit button then in that case onblur is notgetting triggered or not working.
Even onchange is not working in that case.
What if i use onkeyup and down but if user used mouse for pasting the data?
Please help!
Thanks and regards
Asus.
You might want to try using the onchangeevent or oninput event to track when the input data is being modified. Then you can use the onsubmit event to call whatever function you would like.

JavaScript event, when we select the input filed value from the browser cache

I have a input text field and a button to submit. I want the button to be enabled only when i enter something into text field. I used onchange="enableButton();" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
but when i double click on input field a dropdown appears from cache and upon selecting the value from this dropdown no event fires.
Can anyone please suggest me how to do enable button.
I solved a similar problem by deferring onchange actions via setImmediate, which allows other pending events to be processed first. In your case, try setting onchange to this: onchange="setImmediate(enableButton)".

Categories

Resources