How to post href by JavaScript or jQuery non AJAX - javascript

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

Related

Simple form submit doesn't work

Hi have very simple html with form, but submitting doesn't work.
I checked multiple solutions I found on stackoverflow, but still doesn't work.
<form class="form-horizontal well" method="post" id="upload_excel" name="upload_excel" enctype="multipart/form-data">
<fieldset>
<div class="control-group">
<div class="control-label">
<label>Excel File:</label>
</div>
<div class="controls">
<input type="file" name="file" id="file" class="input-large">
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" id="btn" name="Import" class="btn btn-primary button-loading" data-loading-text="Loading...">Upload</input>
</div>
</div>
</fieldset>
And JavaScript in the same file:
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#btn').on('submit',(function(e) {
alert('test');
}));
});
</script>
When I click on btn shouldn't the form be submitted and alert window occurs?
Try putting the on submit function on the form instead of on the button.
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#upload_excel').on('submit',(function(e) {
alert('test');
}));
});
</script>
What about the "action" attribute for the "form" element?
Basiclally you have to submit form so you should have the id of form in the onsubmit block and not input submit button.
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#upload_excel').on('submit',(function(e) {
alert('test');
}));
});
</script>
And Yes You Need to have the action attribute to make a post or get request to the server
Hope This Helps.
You have bad Jquery selector for .on('submit')
You can also use e.preventDefault() to prevent the form from actually being submitted.
Moreover, the <input> tag has no </input> closing tag, use value="Upload" instead for a submit or a button
$(document).ready(function (e) {
$('#upload_excel').on('submit',(function(e) {
e.preventDefault();
alert('test');
}));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal well" method="post" id="upload_excel" name="upload_excel" enctype="multipart/form-data">
<fieldset>
<div class="control-group">
<div class="control-label">
<label>Excel File:</label>
</div>
<div class="controls">
<input type="file" name="file" id="file" class="input-large">
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" id="btn" name="Import" class="btn btn-primary button-loading" data-loading-text="Loading..." value="Upload"/>
</div>
</div>
</fieldset>
You haven't defined the "action" parameter in tag. So, when you press Submit, you fire a POST call without having specified the URL to be called.
A simple example is:
<form enctype="multipart/form-data" action="__URL__" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
Send this file: <input name="userfile" type="file" />
<input type="submit" value="Send File" />
</form>
Where URL is a page PHP or whatever else you have exposed for receiving this call. Another example is here.
First of all I alert a message showing that the submit button is pressed, using this instruction:
$('#btn').on('click',(function(e) {alert("Submitted");}));
After that I'm ensuring that the form is submitted using the jQuery
function .submit():
$( "#upload_excel" ).submit();
Finally, here is the entire script:
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#btn').on('click',(function(e) {
alert("Submitted");
$( "#upload_excel" ).submit();
}));
});
</script>
My answer is based on the jQuery documentation, & a Stackoverflow answer.

Form Submit without Click Submit Button

Form Submit without Click Submit Button
<form id="formId" action="<?php echo Mage::getUrl('module/index/method') ?>" method="post"
enctype="multipart/form-data">
<input type="hidden" name="form_key" value="<?php echo Mage::getSingleton('core/session')->getFormKey() ?>">
<div id="upload-file-container">
<input id="img" type="file" name="img" onchange="this.form.submit()">
</div>
<input id="button" type="submit" value="Submit" name="submit" class="submit">
</form>
Use
document.getElementById("formId").submit();
Solution one:
You can call your form's submit method in the onchange event of your file input like this:
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
Here's a jsfiddle demo.
Solution Two:
You can also define the .submit with an onchange event inline:
<form action="http://your-url.com">
<input type="file" id="img" onChange="form.submit()" />
</form>
Here's a fiddle demo.
Solution Three:
The jQuery way of doing it:
$(function(){
$("#img").change(function(){
$("#form").submit();
});
});
document.getElementById("img").onchange = function() {
document.getElementById("formId").submit();
};
You can auto submit using this:
$(document).ready(function(){
setTimeout(function(){ $("#formId").submit(); }, 3000); });
Or specify exactly when you want to submit the form.

javascript function call for single form

I have multiple forms in my php file for different buttons. So, if I click on Back button, ramesh.php script should be called and so on. This is the code.
<form action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
However, I need to pass some data to server from my client side on form submit just for the update button. I have a javascript function to send the data to server side as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
var mydata = 3;
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="'+mydata+'">');
$('form').data('submit', 'true').submit();
e.preventDefault();
return false;
}
})
})
</script>
If I click on the update button, the javascript function is working fine. However, if I click on Back or Submit button, I should not be calling the javascript function. Is there someway to do this?
Give your form an id:
<form action="update.php" method="post" id="update-form">
Then use a more specific selector:
$("#update-form").submit(function() {
// Code
});
I'm not quite sure why you need JavaScript to dynamically add data to your form, however. You should just use an <input type="hidden" /> directly.
type=submit will always load the form's action. Try to specify wich form to submit.
<form name="backForm" id="backForm" action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form name="form2" id="form2" action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
Now you can access the form via document.backForm or document.getElementById("backForm") and than use submit(); like document.getElementById("backForm").submit();

Form submitting using Javascript not working

I am using multiple form in a page here is my HTML code:
<form name="myform" id="myform" method="post" action="test.php">
<a href="javascript: submitform();" >submit</a>
<input type="hidden" name="encKey" value="12" />
</form>
<form name="myform" id="myform" method="post" action="test.php">
<a href="javascript: submitform();" >submit</a>
<input type="hidden" name="encKey" value="12" />
</form>
<form name="myform" id="myform" method="post" action="test.php">
<a href="javascript: submitform();" >submit</a>
<input type="hidden" name="encKey" value="12" />
</form>
And here is my javascript code:
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
When i click on submit link, form is not submitting and gererate error in backend:
TypeError: document.myform.submit is not a function.
What may be issue?
Thanks
I think you should use unique ids for all the forms. Then you can have a function that takes as a parameter the id of the form that you want to submit and then submit it. So you can have something like <script type="text/javascript">
function submitform(formid)
{
document.getElementById(formid).submit();
}
</script>
You may try this
<script type="text/javascript">
function submitform()
{
document.getElementById('myform').submit();
}
</script>
You can also use document.forms["myForm"].submit();.
In this case "myForm" is the name of each form and it has to be unique as well as id.
First of all you've got 3 id which are the same (myform), an id has to be unique.
the id of a form must be unique, try to change the form id to only name.
you can try to use document.getElementById('formId').submit() to submit the information of a form.

How do I auto-submit an upload form when a file is selected?

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>

Categories