Develop Reference

IE8/9 jquery .load() vs other browsers act different

Hey guys I have a file I need to upload it and I am doing it by using an iframe to upload the image as below as to not refresh the page.
<form id="uploadImg" target="iframe" action="action.php" method="post" enctype="multipart/form-data">
<div class="btn btn-lg btn-primary">
<span>Choose File</span>
<input id="imgToBeUploaded" type="file" class="upload" name="image"/>
</div>
</form>
<iframe name="iframe" id="iframe" style="display:none" ></iframe>
My Javascript looks like this
$("iframe").load(function(){
$('#image-uploaded').modal('show');
});
$('body').on('change','#imgToBeUploaded', function() {
$("#uploadImg").submit();
});
Basically once the file is selected the form gets submitted and the bootstrap modal shows up.
In Chrome the expected behavior occurs, where once I submit the file the modal shows up. However in IE9 the modal shows up on page load AND form submission.
How can I prevent it from showing in page load?
Thank you

ajaxForm not submitting on file input select change

Hey guys I'm trying to submit a simple form with a file input type in it. The challenge is that I want the submission to occur on file select.
My form is as follows:
<form id="uploadForm" action="submit.php" method="post" enctype="multipart/form-data">
<div class="fileUpload btn btn-lg btn-primary">
<span>Choose File</span>
<input id="imageBtn" type="file" class="upload" name="image"/>
</div>
</form>
My JavaScript is as follows:
$("input#imageBtn").change(function () {
console.log("submitting...");
// bind to the form's submit event
$('#uploadForm').submit(function() {
console.log("submitting...form");
$('#uploadForm').ajaxSubmit();
return false;
});
});
For some reason I only see "submitting..." in my console and nothing beyond that and nothing gets submitted.
Any help would be greatly appreciated!
Thank you.

From jQuery documentation:
The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to elements. Forms can be submitted either by clicking an explicit input type="submit", input type="image", or button type="submit", or by pressing Enter when certain form elements have focus.
https://api.jquery.com/submit/
Try adding an appropriate tag like
<input id="imageBtn" type="file submit" class="upload" name="image"/>

The following seems to work.
<form id="imgForm" action="action.php" method="post" enctype="multipart/form-data">
<div class="fileUpload btn btn-lg btn-primary">
<span>Choose File</span>
<input id="imageToBeUploaded" type="file" class="upload" name="image"/>
</div>
</form>
$("body").on('submit', '#imgForm', function(){
$(this).ajaxForm({target:'#uploadStatus'});
console.log("submitting...");
return false;
});
/* Uploading Profile BackGround Image */
$('body').on('change','#imageToBeUploaded', function() {
//submit the form
$("#imgForm").submit();
});

Struts2 submit button bind to enter

I have a .jsp page which also uses struts2. This page has two buttons on it. A submit, and a reset button. I wish the enter key to be bound to the submit button. Any advice on how to do this? I am a Struts2/JSP novice. the screen is a simple login screen.
<s:form action="postLogin" onSubmit="return validate()">
<div style="padding-left:50px">
<s:submit type="button" value="Submit" cssClass="buttonRounded" name="submitButton" label="%{getText('prompt.button.submit')}"/>
<button value="Reset" class="buttonRounded" onclick="resetPage()">Reset</button>
</div>

shortcut.add("Enter",function() {
document.getElementById("myForm").submit();
});
Name your form myForm.

Submit form to another page (which is different from the page used in ACTION)

I have a form like this:
index.php
<form method="post" action="send.php">
<textarea name="msg" id="msg"></textarea>
<input type="submit" value="Send" />
</form>
So, if I enter something in textarea and clicked on "Send", it is submitted to "send.php" page. But I want to include another button for previewing it. That is, when this button is clicked, the above form is submitted to "preview.php" which will be opened in a new blank window/tab (original page ie. index.php will be there intact). This is to display a preview of the message, that the user is going to send.
I do not know how to do this.

Use Javascript to temporarily change the action and target:
<form method="post" action="send.php" id="idOfForm">
<textarea name="msg" id="msg"></textarea>
<input type="submit" value="Send" />
</form>
<button onclick="doPreview();">Preview</button>
<script type="text/javascript">
function doPreview()
{
form=document.getElementById('idOfForm');
form.target='_blank';
form.action='preview.php';
form.submit();
form.action='send.php';
form.target='';
}
</script>

There is now an attribute for the submit input that handles this:
<input type="submit" formaction=”differentThanNormalAction.php”>

Give your form an ID (form1). The action of the current form can be controlled like this:
function setPreview() {
$('#form1').attr('target','_blank')
$('#form1').attr('action','http://yourpreviewurl.php')
$('#form1').submit()
}
function setSubmit() {
$('#form1').attr('target','')
$('#form1').attr('action','http://yourposturl.php')
$('#form1').submit()
}
Have two buttons, both type="button", one to call setPreview and another to call setSubmit

You can use JavaScript to change the action of the form when the button is clicked and then submit it.
Or simply submit the form via AJAX and then redirect after you get a response.

<form onreturn="someJavascriptFunction()" action="" method="">
creating a js function able to open this preview page

Unbinding form submit to iframe with jQuery

I have a PHP page with multiple forms, some of which submit to an iframe (separate iframe for each form) to allow for ajax-like file uploads. I don't want the user to have to click a "Submit" button after selecting each file, so I am submitting the form using jQuery's .submit() function inside of a .change() event on the file input element.
The individual file uploads work fine.
However, after all the individual files are submitted, the user must click on a final button that acknowledges they have reviewed the form data as displayed. This last button is just an independent button. It is not a submit button, and it is not associated with any form. When the page initially loads, this button works fine.
However, once the .submit() function is called for the file uploads, the final button seems to be bound to the other form's action.
Roughly, the structure of the page is as follows:
<form id="finalForm" target="finalTarget" action="uploadFile.php?action=final" method="post" enctype="multipart/form-data">
<div id="finalSelect">
<input type="file" name="finalDraft" id="finalDraft" value="file" />
<input type="submit" value="Submit" id="finalSubmitButton" />
</form>
<iframe id="finalTarget" name="finalTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe>
<form id="signForm" target="signTarget" action="uploadFile.php?action=sign" method="post" enctype="multipart/form-data">
<div id="signSelect">
<input type="file" name="signPage" id="signPage" value="file" />
<input type="submit" value="Submit" id="signSubmitButton" />
</form>
<iframe id="signTarget" name="signTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe>
<button type="button" id="mainSubmitButton">Submit</button>
the jQuery is as follows:
$("#mainSubmitButton").click(function(){
document.location.href='pageName.php';
});
$("#finalDraft").change(function(){
$("#finalForm").submit();
}
after doing a final draft submit, when I click on the mainSubmitButton it loads uploadFile.php.
Does anybody know why this is happening, and what I can do to correct the problem?
Thanks in advance for your help.
Kate

Return "false" from the button click to cancel any default behaviour.
$("#mainSubmitButton").click(function(){
document.location.href='pageName.php';
return false;
});

the reason for this, I think is because the element button you used is acting as a submit button, not as you intended it to act - like a regular button. Just switch it to
<input type="button">
and you should be all set.
check out http://reference.sitepoint.com/html/button for more info
Reference implementation.