I am having a form like this
<form name="test" action="action.php" method="get">
<input type="text" />
<input type="button" value="download"/></form>
I need a click event for download button. Eg. If i click download it should submit as action.php and run $('#button').click(function(){ also. How can I do it.
Perform the operation on 'download' button click then trigger the form submit using trigger
$('.download').click(function(e){
alert('downloading!') //Your Download Logic HERE
$(this).parent().trigger('submit')//Trigger Form SUBMIT ONCE THE OPERATION IS DONE
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="test" action="action.php" method="get">
<input type="text" />
<input type="button" value="download" class="download"></form>
Firstly note that <form> elements are not self closing, so your current HTML is invalid; the input elements need to be within the form itself.
Once that is fixed you can trigger() a submit event on the parent form to the #button element, like this:
$('#button').click(function() {
console.log('Custom logic here...');
$(this).closest('form').trigger('submit');
});
$('form').on('submit', function(e) {
e.preventDefault();
console.log('Submitting form...');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="test" action="action.php" method="get">
<input type="text" />
<input type="submit" value="search" />
<input type="button" value="download" id="button" />
</form>
You can simply submit your form by javascript, after clicking download button:
$('#button').click(function(){
...
document.forms["myform"].submit();
I am trying to create multiple forms which have two buttons, each will submit the form to different script, one via ajax and second one will just submit the form.
<?php foreach($objects as $object) : ?>
<div class="card-body">
<form id="edit-form" action="#" method="POST">
<input name="subject" value="<?=$object['subject']?>" type="text" id="title" class="input-xxlarge">
<textarea id="content" name="content" rows="25"><?=$object['content']?></textarea>
<button type="button" id="send-button" class="btn btn-primary">Send</button>
<input type="submit" id="submit-button" value="Submit"/>
</form>
</div>
<?php endforeach; ?>
First I am trying to get the current form, but I have problem with that. console.log shows something only on the first form, if I click on the buttons from other forms then It will do nothing.
$('#send-button').on('click', function(e) {
e.defaultPrevented;
$form = $(this);
$url = $form.attr('action');
$data = $form.serialize(); console.log($form);
console.log($url);
});
Is it because my button has same ID for every form ?
You shouln't use ID's multiple times on the same page. Try to use a class for that case. Also as stated in the comments use e.preventDefault(); to stop the event.
$(this) will result in the #send-button beeing targeted. To access the form you need to find the closest form element like this:
$form = $(this).closest('form');
html:
<form method="POST" action="#">
<input type="text">
<button type="button">send</button>
<input type="submit" value="submit" />
</form>
<form method="POST" action="#">
<input type="text">
<button type="button">send</button>
<input type="submit" value="submit" />
</form>
js:
$("form").each(function() {
var form = this;
$(form).find('button').on('click', function(e) {
e.preventDefault();
console.log(form);
console.log(this);
})
});
this will add events on every form you have on your page, button will submit form via script and submit will just submit it. also here's a fiddle to play with
I want to post data to a PHP file by link.
I'm using this:
<a onclick="$.post('responses.php', {'form':'<?php echo $_GET['form'] ?>'});return false;" href="#">
This code works but I want to post data to and brows response.php then I need a non AJAX equivalent code.
Seems like form should be good for your case:
<form method="post" action="responses.php">
<input type="hidden" name="form" value="<?php echo $_GET['form'] ?>'});return false;"/>
<input type="submit" value="submit"/>
</form>
This code will both post data and redirect user to response.php as you want.
If you don't want an AJAX thing, you can do the same thing using a form:
$(function () {
$("a").click(function (e) {
e.preventDefault();
document.bleh.submit();
});
});
.hidden {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="bleh" class="hidden" target="ifr" method="post" action="responses.php">
<input type="submit" />
</form>
<iframe name="ifr" class="hidden"></iframe>
Click to Submit
I want to delay the post of the below form by 3 seconds and have an image pop up.
<form id="test" name="test" method="post" action="">
<input type="hidden" name="inp1" method="post" value="<?php echo $var1 - $var2; ?>">
<input type="hidden" name="inp2" method="post" value="<?php echo $var3 - $var4; ?>">
<input type="hidden" name="inp3" method="post" value="">
<input type="submit" name="inp4" value="Test" />
</form>
I am trying to get the delay part working first and have tried using Javascript in the HTML head part of my php file:
$('test').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 30000); // in milliseconds
});
This currently isn't giving any delay. Any ideas?
you forgot to add # with $("#test")
$('#test').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 3000); // in milliseconds
});
Demo
I would switch things up a bit, rather than using a submit button I would change it to a regular button and pass the form in the button. You don't need the submit button at all.
<input type="button" name="inp4" value="Test" onclick="myfunction(form)" />
Then the function
function myfunction(form) {
setTimeout(function() {
form.submit();
},30000);
}
that should do the trick. No jQuery needed
I have a simple file upload form. How do I make it submit automatically when a file has been selected? I don't want the user to have to click the Submit button.
You can simply call your form's submit method in the onchange event of your file input.
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
http://jsfiddle.net/cwvc4/73/
Just tell the file-input to automatically submit the form on any change:
<form action="http://example.com">
<input type="file" onchange="form.submit()" />
</form>
This solution works like this:
onchange makes the input element execute the following script, whenever the value is modified
form references the form, that this input element is part of
submit() causes the form to send all data to the URL, as specified in action
Advantages of this solution:
Works without ids. It makes life easier, if you have several forms in one html page.
Native javascript, no jQuery or similar required.
The code is inside the html-tags. If you inspect the html, you will see it's behavior right away.
Using jQuery:
$('#file').change(function() {
$('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<input type="file" id="file" value="Go" />
</form>
JavaScript with onchange event:
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>
jQuery
.change() and .submit():
$('#fileInput').change(function() {
$('#myForm').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
<input type="file" id="fileInput">
</form>
The shortest solution is
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
<form id="thisForm" enctype='multipart/form-data'>
<input type="file" name="file" id="file">
</form>
<script>
$(document).on('ready', function(){
$('#file').on('change', function(){
$('#thisForm').submit();
});
});
</script>
This is my image upload solution, when user selected the file.
HTML part:
<form enctype="multipart/form-data" id="img_form" method="post">
<input id="img_input" type="file" name="image" accept="image/*">
</form>
JavaScript:
document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
var upload = document.getElementById('img_input');
var image = upload.files[0];
$.ajax({
url:"/foo/bar/uploadPic",
type: "POST",
data: new FormData($('#img_form')[0]),
contentType:false,
cache: false,
processData:false,
success:function (msg) {}
});
};
If you already using jQuery simple:
<input type="file" onChange="$(this).closest('form').submit()"/>
Try bellow code with jquery :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#myForm').on('change', "input#MyFile", function (e) {
e.preventDefault();
$("#myForm").submit();
});
});
</script>
<body>
<div id="content">
<form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
<input type="file" id="MyFile" value="Upload" />
</form>
</div>
</body>
</html>
For those who are using .NET WebForms a full page submit may not be desired. Instead, use the same onchange idea to have javascript click a hidden button (e.g. <asp:Button...) and the hidden button can take of the rest. Make sure you are doing a display: none; on the button and not Visible="false".
HTML
<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>
JAVASCRIPT PURE
<script type="text/javascript">
window.onload = function() {
document.getElementById("xfilename").onchange = function() {
document.getElementById("xtarget").submit();
}
};
</script>
You can put this code to make your code work with just single line of code
<input type="file" onchange="javascript:this.form.submit()">
This will upload the file on server without clicking on submit button
<form action="http://example.com">
<input type="file" onchange="Submit()" />
</form>
<script>
// it will submit form 0 or you have to select particular form
document.getElementsByTagName("form")[0].submit();
</script>
$('#file').change(function() {
$('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<input type="file" id="file" value="Go" />
</form>