Submit form with data on load - javascript

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

Related

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>

submit form from link outside form

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 :)

PHP javascript problems

I am totally new in php, so my opology if this question seems weird to you.
I have one php file (index.php) something like,
echo "
<div>
<FORM name='myform' id='myform' method='post' action=''>
// I fetch data from mysql and populate dropdown list. Tha't work fine.
// Then I have one submit button when I click on that
echo "<button id='showButton' type='submit'> Show </button>";
</FORM>
";
Then I have one process.js file something like,
$(document).ready(function() {
$('#showButton').click(function () {
// Here I make one AJAX call to php file (fetch_more_data.php), which fetch more data from database
// This also works fine
});
});
In fetch_more_data.php I fetch more data and display in table using
echo "
<script type = 'text/javascript' src = 'edit.js'></script>
<table ...>
<td>
<button id="myButton"></button>
</td>
</table>
";
This is also work fine. but I want to edit one table cell and for that I need to write some java script code. I want to write on click function for myButton in Javascripr, for that I have written on edit.js file,
$(document).ready(function() {
$('#myButton').click(function () {
alert('Hello');
});
});
The problem is $('#myButton').click(function () never called. I have spent long time but being a beginner my search options are limited.
I would appriciate if someone solve this problem.
Regards,
try calling it like this:
$(document).ready(function(){
$(document).on('click', '#myButton', function(){
alert('hi');
});
});
hope this helped
try with
$('#myButton').live('click',function () {
alert('Hello');
});
});
Try this:
$(document).ready(function() {
$(document).on("click", "#myButton", function () {
alert('Hello');
});
});
Since the html is being added to the DOM dynamically, you need to handle it using Event Delegation in jQuery
I think the problem is that you are not loading the jQuery
Download the jquery on the same folder where is your php file and add this line in your code
<script src="jquery-1.11.0.min.js"></script>

Post a form and put results in a div

I can't get my form to submit correctly using jquery. I have tried using the tips here: https://api.jquery.com/jQuery.post/ and http://api.jquery.com/submit/ but can't figure out what I am missing to have the form submit and return the results to the div instead of reloading the page. It is supposed to call an external php page to get processed and return the results.
<script>
// On click "button.submit"
$("input[id^=formsubmit]").submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
$.get( "functions.php?do=adminmenu", function( data ) {
$( \".contentarea\" ).html( data );
});
return false;
});
</script>
<form action="#" name="submitForm">
<input type="textbox" name="test">
<input type="submit" value="Save Settings" id="formsubmit">
</form>
<div class="contentarea"></div>
Try to wrap your code inside DOM ready handler $(function() {...}); to make sure your DOM elements have been properly loaded.
Also, you can remove return false here as well as there's no need to escape the $(".contentarea" ) using \. So try this code:
$(function () {
$("input[id^=formsubmit]").submit(function (event) {
// Stop form from submitting normally
event.preventDefault();
$.get("functions.php?do=adminmenu", function (data) {
$(".contentarea").html(data);
});
});
});
The problem is that you're not passing the data to the php file. Furthermore you have not specified the type of data handled. And if you want to use POST you should use $.post(); and not $.get();
Try it like this: I've changed the function from .get to .post, added the data you want to send to the php file and specified a data type.
<script>
$(document).ready(function () {
$('#formsubmit').click(function () {
$.post("functions.php?do=adminmenu",{test_val:$('#test_input').value},function (data) {
$('.contentarea').html(data);
},"json");
});
});
</script>
<input id="test_input" type="text" value="">
<input id="formsubmit" type="submit" value="Save Settings">
<div class="contentarea"></div>
Last point: What is the php file returning? Is it only a string or what? Depending on this you need to modify the function writing the returned content in the '.contentarea'.
And by the way: When submitting the information via AJAX you don't need a form around it, as it just creates the need to escape the default behaviour when submitting a form.
If it still doesn't work let me know, I'll help you.

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>

Categories