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,
Related
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
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/
I have a HTML form which i want to be able to submit with the current hash location
<form action="editcustomer.php?seq=<?php echo $_GET["seq"]; ?>#" method="post" name="form1">
Is this possible?
To get the current hash value, you'll need something like this:
<form onSubmit="this.action='editcustomer.php'+location.hash" action="editcustomer.php" method="post" name="form">
off topic: It's common practice to do this, as it makes it possible to jump to the added anchor point, for example directly to the submitted form (#form-xy), thus enhancing user experience.
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">
I am building a search by city function. Once you have typed in the search field, and if there are multiple cities, you are then presented with all the options.
Each option is a link with javascript, which when clicked should input the value (zipcode) back into the form for processing. The error I am getting is this:
Uncaught TypeError: Cannot call method 'submit' of undefined
Here is my javascript (yep Im using smarty):
{$row.City}, {$row.State} {$row.Zipcode}
Here is my form:
<form action="mymethod.php" method="POST" id="myform">
As you can see I am trying to pass the zipcode back to the form for processing upon 'click'
Appreciate any insight anyone cares to share
The document.forms collection has named elements, which refer to <form> elements with a corresponding name attribute.
To refer to your form, add name="myForm".
<form action="mymethod.php" method="POST" name="myform">
Instead of using a link, I strongly recommend to use a <input type="submit"> element, to not drive away users who have disabled JavsScript.
onclick="javascript:$('#myform').submit({$row.Zipcode}); return false"
Name you form instead: <form action="mymethod.php" method="POST" name="myform">
Then call it using: document.forms["myform"]