We Keep Coding

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>

Hide/Show Load function not working

I have a script that shows 2 divs and hides 1 div after a user submits a form. The form's target is an Iframe on the same page.
I would like to delay the Hide/Show events until the Iframe loads. I was able to do this with a loading animation, but I am not sure how to do this with the Hide/Show script.
The script works with the submit function like this:
$(function(){
$('#form_710370').submit(function(e){
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
But if I try to use the load function like this, it does not work, but it works for my loading animation, any suggestions on what I am doing wrong?
$(document).ready(function () {
$('#iframe1').load(function(){
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
This is the loading animation script which works
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
});
});
/ in ready()
$('#form_710370').submit(function(){$('#loader1').show();return true;});
Here is the HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
<form id="form_710370" target="iframe" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
<div id="frameWrap">
<img id="loader1" src="ajax_loader_blue_512.gif" alt="loading gif"/>
<iframe id="iframe1" name="iframe1" src="page.html" > </iframe>
</div>
Here is the CSS
#mydivhide1 {display:none;}
#mydivhide2 {display:none;}

I think the issue you're running into is that you're preventing the form from submitting to the iframe which is then showing the divs but the iframe is never calling load again because the submit is being stopped.
Assuming that you want to show #mydivhide1 and #mydivhide2 when the form is submitted and then hide them when the iframe finishes loading, I came up with a fiddle that should do what you want: http://jsfiddle.net/CST4t/3/
Basically I just removed the e.preventDefault( ); and instead of returning false, I returned true so the form submission went through. I also cleaned up some items like the form action attribute and moved the submit function override to $(document).ready( );.
Edit
One other thing that I did was I changed the form target and the name of the iframe to a more commonly used name that seems to work better across more browsers. Apparently the name and target values are really touchy from browser to browser, see this answer.

$('#iframe1').contents().load(function() {
//window loaded
});

Form dynamic attribute changing and submission not working

I have the following code:
Html:
<form action="/" id="mainForm" method="get">
<input type="text" name="val1" />
<button id="cmdSubmit">Submit</button>
</form>
<button id="cmdSubmit2">Submit 2</button>
Javascript:
$("#cmdSubmit2").bind('click', function () {
Submit2();
});
var Submit2 = function() {
var form = $("#mainForm").clone();
form.attr("action", "/testing");
form.submit();
}
What I'm trying to do is dynamically change the action attribute of a form with javascript and then submit it (to a different url).
What I expect to happen (in JsFiddle) is that clicking the submit button should load the jsfiddle home page, and clicking the Submit2 button should load a 404 page since the /testing url doesn't exist.
This works fine in chrome (28.0.1500.95), but does not work in Firefox (23.0.1) or IE for that matter(10.0.9200.16660).
None of these browser show any errors in the console either - I'm stumped. Any ideas?
JSFiddle
EDIT: I do actually have to clone the form, forgot to mention that. Also, this works fine in Safari (v5.1.7).

You need to somehow insert it in the DOM :
function Submit2() {
var form = $("#mainForm").clone();
form.attr("action", "/testing");
form.hide().appendTo('body');
form.submit();
}
fiddle
Works for me (FF 23.0)

You don't need to clone() the form. Try this:
var Submit2 = function() {
var form = $("#mainForm");
form.prop("action", "/testing");
form.submit();
}
Updated fiddle

Firefox HTTP Form Action doesn't fire

In Chrome and IE, the following code, when the Anchor tag is clicked, pops up the form (modal box ID of "modalContent", form ID of "DL") and adds an "OnSubmit" to the Form. When the Form is submitted, it will navigate to the requested PDF via Javascript, and run some ASP to send an email with their details attached.
<script language="javascript">
function downloadAnyway(link) {
$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform("' + link + '")');
$('#modalContent').modal();
}
function checkform(navName) {
window.open(navName);
$.modal.close();
}
</script>
<!-- link to download a product guide -->
Product Guide
<div id="modalContent">
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" >
<div align="center">
<input type="image" src="templates/default/images/submit_download.gif" class="imagebutton" value="submit" />
</div>
</form>
</div>
This works fine in IE and Chrome, in Firefox, the Javascript onsubmit works, but the action of the asp never fires. If I remove the javascript, the asp fires as expected.
So, the final form in FireFox, after the "onsubmit" has been dynamically added looks as below:
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" onsubmit="return checkform("downloads/ProductGuide.pdf")">
The onsubmit fires, opening the product guide in another tab, however, the ASP Action never fires. There is more that goes on here, like we write a cookie making sure we don't ask the client for a download every time they use our downloads, however, I've trimmed off anything I think is outside the problem domain.
In the asp, I have gotten rid of all code and put a simple response.redirect to see if it fires and make sure nothing is going on in the ASP.
Any idea how I can get this to function in FireFox?
UPDATE:
I have replaced the onsubmit event wireup with a 'proper' jquery submit wireup replacing the first line below, with the second. The asp on the form still does not function.
//$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform(\'' + link + '\')');
$('#DL').submit(function checkform() {
$.modal.close();
window.open(link);
return true;
});
UPDATE 2
Right, it is because to modal popup CLOSES before the ASP fires. If we comment out the line $.modal.close(); then the asp fires as expected. In Chrome and IE the javascript and the ASP must fire at the same time, in Firefox, the javascript fires which "hides" the div with the "modelContent" and the asp can no longer fire. So this is the real problem... now how to sort it out...