Develop Reference

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,

Use data-attribute for form action?

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">

Javascript Submit Back to Form

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"]

How to create a bookmarklet that submits a login form

I realize this isn't terrific from a security perspective but humor me.
Is there a way to create a bookmarklet that submits a form, such as a login form. For example, this works, but only if there is a page loaded in the current browser window:
javascript:(function(){document.body.innerHTML += '<form id=f action=https://www.mysite.com/login method=post><input type=hidden name=un value=uname><input type=hidden name=pw value=pword>';document.getElementById("f").submit();})();
Is there some way to construct the form right in the JavaScript and submit that?

If you don't need the current page at all, you can completely replace it by having the bookmarklet expression return a string containing the complete new page:
javascript:'<body onload="document.forms[0].submit()"><form method="post" action="https://www.mysite.com/login"><input type="hidden" name="un" value="uname"><input type="hidden" name="pw" value="pword"></form>'
then you don't have to worry about whether the previous page had a <body> or another element with id="f".
(And +1 Matti: innerHTML+= is always a mistake.)

Thank you alert upon form submission

I have a very basic form at http://www.happyholidaylites.com/contact.html and it is working great. When you submit the form, the user is brought to the index.html with no message that the form has been sent. I am looking to initiate an alert that says, "your form has been submitted" with an x button. My code looks like this:
<form method="post" id="myForm" action="dynaform.php">
<input type='hidden' name='rec_mailto' value='JBIRD1111#gmail.com'>
<input type='hidden' name='rec_subject' value='New Contact Form'>
<input type='hidden' name='rec_thanks' value='index.html'>
so on and so forth.....
The last line is what is telling the form what to do after the submit button is pressed, but I dont want it to point the browser to the index, rather I want a javascript popup with a success message. Any ideas?

Why not a simple onSubmit?
<form method="post" id="myForm" action="dynaform.php" onSubmit="alert('Thank you for your feedback.');" >

To be honest you are better re-directing to another page in order to avoid the user re-submitting the page on a refresh. Have a look at Post/Redirect/Get Pattern.
Popups can be extremely annoying on websites. You should create a page called "thank-you.html" that you can re-direct the user to on successful submission which has access to the site navigation options or even just do a re-direct back to the form page after a few seconds.

Instead of redirecting to index.html, redirect to thanks.html; your users will thank you because everybody hates popups!

Sounds like your PHP script handles the form submission by processing the input and redirecting the browser to the value in the rec_thanks field.
You can add something like onsubmit="YourJavaScriptFunction()" to the form tag to add client-side behavior prior to actually submitting the form. Within that function you can perform validation, use alert('Thank You!'), etc..