My action function is not working. I am not sure if I missed something in my syntax. or you have to call it as a function in a different way. I am trying to put the form action in with JQuery instead of through the form to make sure that when it is done it goes back to the main page it called this from.
The old Code would load the form and give the user a blank screen instead of staying on the current page.
Old Code:
<form id="import_audit_form" name="import_audit_form" action='./edit_audits.php?action=process_import' method="post" enctype='multipart/form-data'>
New Code:
<script>
$(document).ready(function(){
$('#audit_submit').click(function(){
$('#import_audit_form').attr('action', 'edit_audits.php?action=process_import',{
function(data){
alert("Audit Imported");
}); //end import_audit_form
}); // End audit_submit
}); //End document function
</script>
<form id="import_audit_form" name="import_audit_form" method="post" enctype='multipart/form-data'>
<input type="submit" class="btn btn-default" name="audit_submit" id="audit_submit" value="TRANSFER" /></td>
</form>
Related
I have a submit input as:-
<form method="POST">
<input onclick="myFunction()" type="submit" name="like" id="like" value="LIKE">
</form>
If the user presses it, I want to change it to "LIKED" and if it is pressed again, I want to change it back to "LIKE". For this, I wrote this JS code:-
<script>
function myFunction() {
var x=document.getElementById("like");
if(x.value=="LIKE") x.value="LIKED";
else x.value="LIKE";
}
</script>
Now the problem is that it does change, but that change lasts for a very small fraction of time. I can see it getting changed to LIKED, but it changes back to LIKE very quickly. I can't understand what I'm doing wrong. Please help. Thanks!
The problem is your form element, as action did't defined , when action not defined for form element it means action path is relative or point to the current page so in your example the form submits to itself and after submitting the content will be refreshed, so the clicked title will be changed to click(the first state).
in the other hand Form is a HTML page when you post or get it, it's content get refreshed.
Update:
If you want to hold the state of button, it would be better to move out the button outside of form and then submit form manually something like:
<form id="myform" method="POST">
</form>
<input onclick="myFunction()" name="like" id="like" value="LIKE" type="button" >
function myFunction() {
var x=document.getElementById("like");
if(x.value=="LIKE") x.value="LIKED";
else x.value="LIKE";
document.getElementById("myform").submit();
}
I have a form in AngularJS application. I need to auto submit this form upon page load without using jquery because of cross domain issue.
When I submit the form by using a submit button it works and the target url loads in the browser. If I remove the submit button and try to submit in the onload event,
it does not work. The page displays just ";". Any idea why onload does not work here? Thank you!
<form name="myForm" method="post" action="#Model.Settings["URL"]" ng-controller="PostCtrl">
<input type="hidden" name="Name" value="{{Details.Name}}">
<input type="hidden" name="Amount" value="{{Details.Amount}}">
#*<button type="submit" class="action blue"><span class="label">Click here</span></button>*#
<script>
window.onload = function () {
document.myForm.submit();
}
</script>
</form>
I have some suggestions for you. But first you have to add an id to your form: 1: Go to your <html> element and call the onload function there --> <html onload="document.getElementById('yourform').submit();"> or 2: call the JavaScript function with php
<?php
echo "<script>document.getElementById('yourform').submit();</script>";
?>
Or 3: try to change your Script to
<script>
window.onload = function () {
document.getElementById('yourform').submit();
}
</script>
I want to upload files using javascript/jquery/ajax and in my case, I have to prevent the reload on form submitting on upload.
Also, I want to add a delete button, such that, when file is uploaded, the delete button can delete this and same is the scenario, that to prevent the page refresh/reload on form submitting.
Hence, I've three buttons in a single form, UPLOAD, DELETE, NEXT and in my case, only next allows to submit the form by refreshing/action of form. And obviously, when file is just selected and the user directly hits the next button, it first uploads and then take his action.
HTML:
<form name="myform" method="post" id="FORM2" enctype="multipart/form-data">
// OTHER VALUES OF FORM
<input type="file" name="FileUpload-1" id="FileUpload-1" class="file_upload" />
<input type="submit" value="Upload" id="upload" class="submitUpload" />
<input type="submit" value="Delete" id="delete" class="submitDelete" />
<input type="submit" name="" id="FORMSUBMIT">
</form>
JS:
$(".submitUpload").click(function(){ console.log('UPLOAD');
action = "upload.php";
$("#FORM").on('submit',function(){
var options={
url : action,
success : onsuccess
};
$(this).ajaxSubmit(options);
return false;
});
}
return false;
});
$(".submitDelete").click(function(){ console.log('DELETE');
return false;
});
$('.FORMSUBMIT').click(function () {
//CUSTOM HANDLING
});
To Directly answer your question:
$("#FORM").on('submit',function(evt){
evt.preventDefault();
});
This piece of code will prevent the normal form submitting.
My advice is to transform the Update and Delete buttons from type=submit to type=button. Like this:
<input type="button" value="Delete" id="Delete" class="submitDelete" />
This will prevent the form to be submitted when delete or update are pressed...
I wrote a jsfiddle for you:
https://jsfiddle.net/yL35bh10/
I recently prototyped a page needing image file upload. I found a package on GitHub that was easy to use and should provide the majority of the functionality you're needing.
https://github.com/blueimp/jQuery-File-Upload
My only question to you: Once a file is uploaded to the server, how are you going to know what to delete?
I tried to make ajax upload and I don't wanna make a submit button. just let user when choose file done auto submit..
I tried use change() to get form data change but after click second time it will alert not just once. I don't know why , is there any better idea to make it work!
HTML
<div class="article-create">
<table class="table">
<td>
<form action="" enctype="multipart/form-data" method="post">
<input type="file" name="image" class="browseimage">
</form>
<li class="browseimage-fake btn btn-success btn-sm">Choose File</li>
js
$('.article-create .table').on('click', '.browseimage-fake', function() {
$(this).closest('td').find('.browseimage').click();
$(this).closest('td').find('.browseimage').change(function(){
alert('change');
// check FormData and ajax ..
});
});
Try this code. Alert calls just one time:
$(document).on('change', '.browseimage', function(){
alert('change');
// check FormData and ajax ..
});
http://jsfiddle.net/E9mPw/20/
simple JQUERY change function.
$(".browseimage-fake").change(function() {
console.log("changed")
});
This code worked for me but only when I had a valid url for the action attribute of the form.
<script>
$(".browseimage").change(function () {
document.forms[0].submit();
});
</script>
I'm trying to create a form which submits a string to another page only with the parameter name removed from the URL.
i.e. submitting the following form with "foo"
<form action="search.asp" method="get">
<input type="text" name="keyword" id="keyword">
<input type="submit" value="Go">
</form>
will go to search.asp?foo NOT search.asp?keyword=foo
Can this be done with pure html?
I guess this can be done with javascript and/or jquery but I'm not certain exactly how.
Can anybody help?
I'm a bit of a noob so a copy and paste solution would be great for me.
Update:
Thanks for the answers so far but they don't seem to be working. Perhaps a better way to do this is to get JQuery to construct the URL and load that URL? Any more suggestions would be great.
or maybe...?
$('input[type="text"]').blur(function() {
$('form').attr('action', 'search.asp?' + $('input').val());
});
Let's give the form and the submit button a classname for convenience and assume we have jQuery on the page.
<form action="search.asp" method="get" class="search_form">
<input type="text" name="keyword" id="keyword">
<input type="submit" value="Go" class="search_button">
</form>
<script type="text/javascript">
$(function(){
var $form = $(".search_form");
// save the default action, because we are going to mess with it.
$form.data("original-action", $form.attr("action"));
// listen to the click on the button, update the form action and submit the form manually
$(".search_button").click(function(){
$form.attr("action", $form.data("original-action") + "?" + $("#keyword").val());
$form.submit();
return false;
});
});
</script>
Not tested, but should work. Let me know.
Btw, saving the default action is maybe not needed. But just in case that you ever want to submit it with ajax without reloading the page.
Try this:
<form action="search.asp?foo">
<script>
$(document).ready(function(){
$("#btnSubmit").click(function(){
var keywordVal = $("#keyword").val();
window.location.href = "search.asp?" + keywordVal;
});
});
</script>
<input id="keyword" type="text" name="keyword">
<button id="btnSubmit">Submit</button>