submit form from link outside form - javascript

I cannot figure out why this is not working. Any help would be much appreciated. Simply trying to submit my form with an outside link.
HTML:
<li>Payment</li>
Note: that link is right above the form.
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#paymentLink").click(function () {
console.log("clicked!");
$("#deliveryForm").submit();
});
});
</script>
Note: "clicked!" does show in my console when clicking the link.

Can you please use this way.
Payment
<form id="deliveryForm" action="action.php" method="POST">
<!-- Your Form Content Here -->
</form>
I think this way will work for you, this is very simple and shorter way.
Thank You :)

Related

Submit form with data on load

This data on console $(this).serialize() gives me the result below, I wanted to submit it on load not on click and pass a select default value programatically(currency_code) -- the form is a built in library
_method=PUT&source=geolocation_recommendation&return_to=%2F&currency_code=PHP
This is my code on click
$(document).ready(function () {
$(document).on("submit", "form.locale-bar__form", function (e) {
e.preventDefault();
let data = $(this).serialize()
console.log('>>>>', data)
});
});
Form looks like this
Am I missing the point or is this not doing its job? :
$(document).ready(function(){
$(".locale-bar__form").submit();
});
edit:
might find your solution here
Another HTML solution:
<html>
<body onload="document.locale-bar__form.submit()">
<form action="#" name=".locale-bar__form">
<!-- Your form here -->
</form>
</body>
</html>
edit:
You can add selected attribute to an option with jquery like this. So that it will make that option default.
$("select option[value='blabla']").attr("selected","selected");

How to call function after submit form aspx

I want callback alert after submit form, but doesn't worked. Submit not execute.
Only $("#formImpressao").submit(); worked fine.
I try too use $(document).ready(function () { ... :( No Success
Whats wrong?
Sorry for my bad english
<div id="HiddenFormTarget" style="display:none;">
<form id="formImpressao" method="post" target="frmPrint" action="/VisualizarRelatorios/ImprimirRelatorio.aspx""></form>
</div>
<iframe id="frmPrint" name="frmPrint" width="0" height="0" runat="server">
</iframe>
<script language="javascript" type="text/javascript">
$("#formImpressao").submit(function () {
alert('Test');
});
$("#formImpressao").submit();
</script>
$("#formImpressao").submit(function (e) {
e.preventDefault();
alert('Test');
//Insert AJAX to submit form data
});
e.preventDefault() will prevent the default action of the submit event, and then run your alert, but it will NOT submit the form. For that, you will need to use AJAX. It's simple enough to understand, and there are plenty of SO topics on the use of it, so I won't reiterate. But preventDefault() will get you started.
<form id="formImpressao" method="post" target="frmPrint" action="/VisualizarRelatorios/ImprimirRelatorio.aspx""></form>
</div>
Now you can use two ways to submit the form using only jQuery,Recommended method
<script>
$(document).ready(function(){
//instead of id selector use tag selector
$("form").submit(function () {
alert('Test');
});
});
</script>
Another using id selector which is already posted
I reproduce this situation and all right:
[https://codepen.io/piotrazsko/pen/mqMrgo][1]
(1) There appears to be an extra quote in your form tag.
(2) Have you tried your approach without the target attribute in the form tag?
e.g. -
<form id="formImpressao" method="post" action="/VisualizarRelatorios/ImprimirRelatorio.aspx"></form>

Bootstrap or jquery stopping form SUBMIT

Tired to make this parallax with bootstrap and jquery.. but FORM is not submitting while this code works fine separately if I run.. If someone can help me out in this..
Here is page : http://cellsouq.com/xtra/co/ (complete code)
Click on OPPORTUNITIES > FRANCHISE (on top navigation)
Click on APPLY ... it will scroll to FORM
Form is something like that with javascript
<script>
function funcFranchise() {
alert('Submitted Successfull');
// To validate form elements
}
</script>
<form onSubmit="return funcFranchise(this)" class="form-horizontal" >
...
<input type="submit" value="Submit Request" class="btn bg-primary" >
</form>
If i remove Bootstrap it works fine. In whole code somewhere submit EVENT is blocked not sure... Please help me out..
You should return either true or false upon the completion your validations. So try like;
<script>
function funcFranchise() {
alert('Submitted Successfull');
// To validate form elements
return true;
}
</script>
try this:
function funcFranchise() {
alert('Submitted Successfull');
// To validate form elements
$('.form-horizontal').submit();
}

Infinite form submit with $(document).ready

i want to create a post form it'll get data from my url and post it to my database.
When i clicked the "Add" buton its working fine but when i try to add with $(document).ready function, I'm getting infinite loop. (My goal is submitting form every time i execute the file)
I've no knowlage about jquery and Im using this code:
<script type="text/javascript">
$(document).ready(function () {
document.forms["form1"].submit();
});
</script>
How can I get rid off infinite loop?
I'm guessing your form does not have action-attribute, hence it posts to itself. Add action attribute to the page you want to post to:
<form action="mypage.html"....
You will have to use cookie to store first load information and check it before submitting form. Set the expire time as per your project requirement. Before using jQuery cookie, you have add cookie plugin after jQuery library.
jQuery Cookie: jQuery Cookie plugin.
<script type="text/javascript">
$(document).ready(function () {
if (! $.cookie("cookieName")){
document.forms["form1"].submit(); // do your stuff
$.cookie("cookieName", "firstSet", {"expires" : 7}); // set cookie now
}
});
</script>
Hope will help!
Can you try?
$(document).one("ready",function(){
// submit form here
});
Use below code.
<form action="yourformname.html" method="post" enctype="multipart/form-data">
</form>
<input type="submit" value="Submit">
If there is any file upload control, then use enctype in form tag.
Maybe a flag can do the job.
var flag = true;
$(document).ready(function(){
if(flag){
// submit code here
flag = false;
}
});
Inside your form paste this line,
<input type="hidden" name="ispost" value="0" id="ispost">
And in jQuery add this, your issue will be resolved
<script type="text/javascript">
$(document).ready(function() {
if($('#ispost').val() != 'submit')
{
$('#ispost').val('submit');
$('#form1').submit();
}
});
</script>

jquery form submit

I have a jquery fancyzoom box. In that box ,I have a contact form which sends an email on submission. But I am not able to call form submit function due to fancyzoom.
Code is like :
("req_quote.php")
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#popup1_link').fancyZoom({width:610});
$("#submit").css('cursor', 'pointer');
$('.reqfrm').submit( function(){
alert("hell");
});
});
</script>
<body>
<form class="reqfrm" id="frm">
<input type="text" name="name" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</body>
</html>
Above file is included in "index.php" which contains the actual link to open the form in fancyzoom box.
(index.php)
< a href="#popup1" id="popup1_link">< div class="blink">Request a Quote< /a>"
If I remove $('#popup1_link').fancyZoom({width:610}); then i get alert on submission otherwise it goes on form action directly.
Are you getting any JavaScript errors with the fancyZoom call in? Are you including the script file you need to use it? It's hard to say without seeing some more data, or a jsbin / jsfiddle.
The form is submitted in the fancybox js file.
As mentioned by Raul, you need to provide more info for us to help out. You could try any of these things:
See if you can reproduce this issue within a simple html file, that doesn't have any of the extra stuff that your current page may have. If the issue still persists, put it into jsFiddle and post the link here.
If you haven't already, install the Firebug addon for Firefox, and use it's console to check for any JS errors.
Have a look at the jsFiddle that I've created. Is this similar to what you are doing? Mine works wihtout any issues.

Categories