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

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

Related

Jquery `.click` Submits all forms

I have a form:
<form class=" id="form-edit_usr" action="edit_usr.php" method="post" enctype="multipart/form-data">
Inside of that form i have another form:
<button id="usrPhoto" class="btn">
<img src="" width='100' height='140'>
</button>
<form id="uploadForm" method="post">
<input type="file" id="uploadPhoto" name="uploadPhoto" data-usr="" style="display: none;"/>
</form>
To the "main" for i have a "submit button"
<input type="submit" class="btn" value="Update" />
</form>
With Jquery i control the file input:
$('#usrPhoto').on('click', function(){
//Check if user is selected
selectedUsr = $('#choosen_usr_email').val();
if(selectedUsr){
//If user is selected open file dialog
$("#uploadPhoto").click();
}
})
My problem is when i press the #userPhoto element,
#uploadPhoto shall open file dialog, but it also submits my main form.
How can i prevent the .click() from submitting all forms/Buttons?
By the HTML specification. You cannot have a form inside another form.
Check your resulting html in your browser's inspector and you will see the "inner form" is missing.
You could break them in 2 separate forms or use pure JS to upload the file.
There's a question (and answers) about it here.
Maybe you can using the jQuery submit function
$('.button').on('click',function(){
$('.formID').submit();
});

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();
});

Disable button on submit form

Hello so I am using foundation data-abide for input validation in my form and here is my code. In my index.php here is the code
Add Photo
<div id="uploadModal" class="reveal-modal tiny" data-reveal></div>
Whenever I click on add photo, the upload-photo.php shows up in a modal. In the modal it contains this code
<form action="<?= $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data" data-abide name="formupload" id="uploadID">
<div class="photo-field">
<input type="file" name="file_img" pattern="^.+?\.(jpg|JPG|jpeg|gif|png|PNG)$" required>
<small class="error">Upload JPG or PNG only.</small>
</div>
<div class="title-field">
<input type="text" name="img_title" placeholder="Image title" required>
<small class="error">Image title is required.</small>
</div>
<input type="submit" value="Upload Image" name="btn_upload" class="button">
</form>
If I ever want to use a script like this and click the submit button, it doesn't work. It just shows the upload-photo.php again in a page, not in a modal.
$('form#uploadID').submit(function(){
$(this).find('input[type=submit]').attr('disabled', 'disabled');
});
What is the possible way to submit the form and then disables the button so no one can spam clicking it? Thanks!
Use this
$('#uploadID').submit(function(){
$('#uploadID input[name=btn_upload]').prop('disabled', true);
});

Submit form using file input type

I'm using this code to upload a simple image file.
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" onchange="this.form.submit();"/>
</form>
Then I have an upload.php file that is working very good. Now I want to use jQuery post or ajax to upload the image and show it on the screen without refreshing the page. I've changed the code for this:
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="file"/>
</form>
I've add this to my javascript file:
$("form#formUpload").submit(function() {
$.post('upload.php',$("#formUpload").serialize(), function(data) {
}).done(function() {
});
});
But nothing happens. I know that I don't have a submit input to get inside of the method that contents the $post. I've tried with a trigger into a hidden submit button but nothing seems to work. Does anyone can help to resolve this?

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.

Categories

Resources