Use data-attribute for form action? - javascript

I have a client who really hates captcha but it is needed otherwise there are too many spam submissions. I had a person recommend the following:
Have your web form and only have the form action in a data tag (html5) and then on completion of the form and submit the form process actions that action in. No form action, no bot can fill it in and submit and no modification to how your form looks or operates.
If I have a form that looks like this:
<form action="/FormProcessv2.aspx?WebFormID=10090&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}" enctype="multipart/form-data" onsubmit="return checkWholeForm15174(this)" method="post" name="catwebformform15174">
How would I modify the action URL to use data-attribute? Would it require JS to function? How does the idea work?
Note: I searched Google and I could not find any information on using data-attribute and from action. Also I am using jQuery 2.0.3 on the site.
Any guidance is welcome.

How it would work, on form submit (call this swapAction when your current checkWholeForm15174 validates)
function SwapAction() {
var dataAttr = $('#myFormName').data();
$('#myFormName').get(0).setAttribute('action', dataAttr.action);
}
assuming your form was modified to look like:
<form action="" data-action="/FormProcessv2.aspx?WebFormID=10090&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}" enctype="multipart/form-data" onsubmit="return checkWholeForm15174(this)" method="post" name="catwebformform15174">

Related

How can I submit a form (with inputs) with Javascript

I'm working on an Asp.Net app and I have a form like below;
<form action="tcSubmit.asp" method="POST" name="mainForm" onsubmit="return (checkForm());">
// there are a lot of inputs here
</form>
Because of a few things I did in the checkForm method, I need to submit the form in another method that I call from checkForm.
I can submit the form as below, but it doesn't submit with the body.
document.forms['mainForm'].submit();
How can I add the body of the form to the request while submitting?
Can anyone help me? Thanks

Stop a form from redirecting after submit

I'm utilizing a form built from wufoo in my web app. I'm trying to stop the form from pushing the submit URL and just give a promt to the user. I've tried inputting e.preventdefault and return.false in my .js file but the information is still submitting. There's nothing in my .js file except for validation rules.
Please see my jsfiddle here: https://jsfiddle.net/ws2q8wgw/
What am I doing wrong? I thought just inputting $('#form166').submit(false); would do the trick.
Use the unload event (reference). You can cancel the submit.
You said you want to give a promt to the user?
This should do the job.
onsubmit="return confirm('Are you sure?');"
Or all together
<form id="form166" name="form166" class="wufoo topLabel page" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://boiron.wufoo.com/forms/z16px8aw1sdfff/#public" onsubmit="return confirm('Are you sure?');">
https://jsfiddle.net/823yLec4/

JavaScript submit not working for action on same page

I'm just trying to submit my form using JavaScript. I've broken it down into this basic function:
$(btnSubmit).click(function(event){
event.preventDefault();
$('.form')[0].submit();
});
This is the form (the page name is upcoming_albums.php):
<form class="form" action="upcoming_albums.php" enctype="multipart/form-data" method="post">
All it does is refresh the page. The form does not get submitted.
I think there is a problem with your selector, For submitting form using JavaScript it best practice to use the form name or the unique ID, because there maybe a same class name used other places.
So, try the following code,
<form class="form" id="myform" action="upcoming_albums.php" enctype="multipart/form-data" method="post">
Now, javascript will be something like
$(btnSubmit).click(function(event){
event.preventDefault();
$('#myform').submit();
});
Also please check your console for any other js error, this might help,
Thanks,

JavaScript validation in ation page

Considering I have a form with several input fields that has an action page on submit.
Once I fill up the data on the form and submit it, the action page will take care of all the database action with php.
If I want to validate the form fields with JavaScript, what is the best way to do it? Since I can't just display alert because the action page will redirect me to the initial page
Use onsubmit:
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
If you return true from javascript validateForm function then action will take place and if you return false then it will not go to action page.

Prohibit the sending of the form

On the page after clicking "submit" form is submitted. But I forbade controller ctrlPersonalData form submission (return false)
Please help me cancel the sending of the form after clicking "submit"
This is a simple HTML trick but should work for you:
<form onsubmit="return false;">
...
</form>
Please take this as a starting point and not as a copy-paste solution.
Remove the action="#" attribute from the form. Also in AngularJS you dont make a form post you make ajax calls with model data.

Categories

Resources