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();
});
Related
Hello I have managed to disable the submit input when clicked but the problem i am having when the PHP ifisset runs it does not store the parameters in the database after disabling the input submit, however after my research and test it does not upload the data inputted to the form but disables the button but when i remove the Jquery code no action is taken and the picture uploads it this is my code
//input submit works if not disabled but does not run if disabled after onclick which i feel when the button is disabled the form submit has no name valid
<script>
$(function() {
$('#theform').submit(function() {
$("input[type='submit']", this)
.val("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
});
</script>
//My form
<form action="" method="post" role="form" id="theform" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" name="sub" value="UPLOAD">
</form>
All i want is to not allow the user to not submit values twice thats all
In that case, I would divorce the button from the submit event and the form data itself by using type="button" for the "submit" button and using a hidden input for the sub value like this:
$(function() {
$('.submit').click(function(){
$(this).prop("disabled",true).val("Please Wait...").closest('form').submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" role="form" id="theform" enctype="multipart/form-data">
<input type="file" name="file">
<input type="hidden" name="sub" value="UPLOAD">
<input type="button" class="submit" value="UPLOAD">
</form>
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();
});
i want to only validate the form and don't want to submit it, so that i can use the form values in modifying other part of the same html page by calling a function "myfunction()" after form validation. for this i want to use a button suggest me required code.my code is following :-
<form name="form1">
<input type="text" name="name1" required></input>
<button onclick="myfunction()" ></button> // i want to validation of form by this button
</form>
You can try this by setting onsubmit event of form to return false; as follows:
<form name="form1" onsubmit="return false;">
<input type="text" name="name1" required></input>
<button onclick="myfunction();" ></button>
</form>
This will not submit the form on clicking the button but will execute myfunction() instead.
If you know jQuery, then you can do this as follows:
$('form[name="form1"]').submit(function (event) {
// This will prevent form being submitted.
event.preventDefault();
// Call your function.
myfunction();
});
For maintainability consider adding an event listener to the button by selection instead of inline. When the button is clicked an event object is passed to the callback. Event objects have a number of properties and methods. In this case you're looking for the method "preventDefault" which prevents the default action of the event which in this case is a form submit. An example:
<form name="form1">
<input type="text" name="name1" required />
<button id="my-button"></button>
</form>
document.getElementById('my-button').addEventListener('click', function(e){
e.preventDefault();
var form = document.forms['form1']; //or this.parentNode
//do stuff
}, false);
i have achived this goal by modifying code as follow:-
<form name="form1" onsubmit="myfunction();return false;">
<input type="text" name="name1" required></input>
<button >check form and call function</button>
</form>
by this i am able to check form and call my function and form is also not submitted in this case.
now i want to reset the form without clicking any button. suggest javascript code for this.
HTML form validation by input type button, not by submit.
Try this
<form name="form1" onsubmit="myfunction(); return false;">
<input type="text" name="name1" required></input>
<button type="submit">Submit</button>
</form>
I need to hide the submit button until a file is chosen.
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="file" name="imageURL[]" id="imageURL" />
<input type="submit" value="submit" name="submit" />
</form>
You can hide the submit button initially and on change of the input type file event show the submit button.
something like this -
$("#imageURL").on("change", function(){
$("#submit").show();
})
I have prepared fiddle using jquery.
Hope this will help.
This answer is better:
$('[type=submit]').hide();
setInterval(function(){
if($('#imageURL').val()!=""){
$('[type=submit]').show();
}else{
$('[type=submit]').hide();
}
},1000);
Demo:http://jsfiddle.net/s24ZW/14/
I have 3 sumbit buttons in myform and i need different 3 actions based on which buttton it clicked. so i need to write javascript function to do the same. how i can get to know in javascript which button is clicked.
Javascript:
<script type="text/javascript" language="javascript">
function submitform(){
//do something
}
HTML:
form name="myform" method="get,post" onsubmit="return submitform();"
input type="submit" name="submit" value="Home"
input type="submit" name="submit" value="Reschedule"
input type="submit" name="submit" value="Cancel"
Any help will be appreciated
Edit:
You could also have a hidden input which tells you which button was pressed, then handle it on the server. When a button is clicked it will change that input before submitting.
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='forward';return true;" id="linkName" value="Forward" />
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='back';return true;" id="back" value="Back" />
Demo: http://jsfiddle.net/Homeliss/vperb/
Note: the demo uses jquery to show a message instead of posting the form, but that is just for demo purposes. The solution is plain javascript
In modern browsers, you can use the submitter property of a SubmitEvent.
function submitForm(submitType)
{
switch (submitType)
{
case 'Submit 1':
console.log('Submit 1');
break;
case 'Submit 2':
console.log('Submit 2');
break;
}
return false;
}
<form onsubmit="return submitForm(event.submitter.value)">
Name: <input name="name" required /><br />
<div>
<input type="submit" value="Submit 1" />
<button type="submit" value="Submit 2">Submit 2</button>
</div>
</form>
If you could use jQuery, then this could be much easier.
One solution however would be to remove the submitform() from the form and add it to the onclick event of each of your submit buttons. This way, you can alter it to pass a parameter denoting which button called it.
Good luck.
we can submit a form once in html pages. So we use only one submit button in a form. But for calling more functions we can use onClick event and input type should be button.
I have a question. is there any other input field inside your form?
If there is another field such as text field, which buttons action will be call when we press Enter inside the text field?
My suggestion is this:
<form name="myform" method="get,post" onsubmit="return false;">
<input type="button" value="Home" onclick="submitform(1)" />
<input type="button" value="Reschedule" onclick="submitform(2)" />
<input type="button" value="Cancel" onclick="submitform(3)" />
</form>
in this code, user must click on a button to submit the form and pressing the enter will not cuse to doing any action.