redirect to same page after submit - javascript

I want to submit a form when a file select is changed in my form and be able to redirect to same page.
ie: I have this url: http://localhost:3000/worker_steps/basic_info. after dropdown changed, I want the form be submitted and redirect again to http://localhost:3000/worker_steps/basic_info.
I have this code in html:
<form class="simple_form form-horizontal" novalidate="novalidate" id="edit_user_385" enctype="multipart/form-data" action="/worker_steps/basic_info" accept-charset="UTF-8" method="post">
<input class="file optional" name="user[picture]" id="user_picture" type="file"> //this is th e dropdown select input
and in my jquery, I have this atm:
$("#user_picture").change(function(){
//window.location = "/worker_steps/basic_info";
$(this).closest("form").submit();
});

I would just use this:
window.location.replace(window.location.href);

You can use header in
worker_steps/basic_info
file,
So put the below line at the end of the file,
header('location:the_current_page.html');
exit();

Related

POST value in PHP when submitting onChange Javascript

I'm trying to submit an image file using javascript onChange, the thing is I don't know the value of the submitted POST form, and how can I set a custom POST value. Here is a simple example:
HTML:
<form id="form" action="upload.php" method="post">
<input type="file" id="file" name="image">
</form>
Javascript:
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
}
So after I submit the form I can only get the value $_POST['image']. Usually when receiving POST I check for the value of the submit button which I create uniquely for each form such as, updateform, updateclient. Now I want to do the same by creating custom messages, one page will send 'uploadclientimage' the other will say 'uploadshopimage' and so on. This way the upload.php file can process the status to decide what to do next.
In upload.php I want to do like this:
if(isset($_POST['uploadclientimage']))
{//Save in client uploads folder and update client info}
else if(isset($_POST['uploadshopimage']))
{//Save in shops uploads folder and update shop info}
else header("Location: login.php");
using submit button does that easily <input type="submit" name="uploadclientimage">
How can I do something like that with onChange form submit???
Just add a hidden field in the form. For example:
<input type="hidden" name="uploadclientimage" value="">

Disabling form auto submit

I am trying to build an image upload interface which submits the form automatically as soon as choosing a file from the file browse window. This is how my HTML looks like:
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>
and this is how my JS looks like:
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
Problem is as soon as I click image input which triggers #avatar, file browser is being opened but the form automatically being submitted without allowing me to choose a file from the window.
What is wrong here?
The <input type="image"> is a graphical submit button, so when you click it, it will automatically submit the form. Here's the documentation on it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/image. If you want to stop the form from submitting, you need to cancel the default action of the click. So, your code would be this:
$("input[type='image']").click(function(e) {
e.preventDefault();
$("input[id='avatar']").click();
});
I don't really understand your problem. Here it seems to work. It doesn't submit the form when I open the file browser, until I choose an image and close the file browser. (note it doesn't post after it either but that's because of a javascript error that is not related to your problem. When you copy this code to an empty html it should work)
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>

Display Form Results in Bootstrap Modal

I have included a simple form on the home page of our website that posts its results to a page named Results.aspx.
Instead of the form's results returning on the same page, I'd like it if the results opened in a new modal.
How is this accomplished? To recap, the form is on the home page, and on submit, the results should be shown in a new modal window.
<form action="Results.aspx" method="post" name="myForm" onsubmit="return validateForm()">
<div id="blank-box-form">
<h2>Looking For Medicare Advantage Plans?</h2>
<label for="zipcode1"> Please enter your zip code</label>
<input id="zipcode1" class="wpcf7" name="zipcode1" type="text" />
<input type="submit" />
</div>
I would suggest that you post the form using ajax. When the ajax-call is complete you populate the body of the modal with the response-data and open it up :)
Try
<form action="Results.aspx" target="_blank" method="post" name="myForm" onsubmit="return validateForm()">
But ass #digi recommend, you should use ajax to get the results and then insert them in a modal.
This could guide you:
<script>
$("form").submit(function(event){
event.preventDefault();//to stop the submit
$.get("url","data",function(results){
$("#someModalStyledDiv").html(results).show();
});
});
</script>
http://api.jquery.com/jquery.get/

Submitting a single form when there are multiple forms on a single page

How can I submit a single form while having different forms on a single page?
FORM 1:
<form action="../../../../../xyz/services/xyzOperation" method="post" enctype="multipart/form-data" target="upload_target" class='form-horizontal page formm' id='uploadForm' style="margin-bottom: -1px;">
FORM 2:
<form action="../../../../../xyz/services/create" method="post" enctype="multipart/form-data" target="final_target" class='form-horizontal page formFinal' id='finalForm'>
JS CODE
document.forms["uploadForm"].submit();
I am using the above statement to submit the first form but surprisingly it also submits the second form..
Please help me, as this issue is now becoming so irritating to me.
I have also used the following code but of no avail
document.getElementById("uploadForm").submit();
THANKS
You can try this...
function submitForm(){
document.formName.action="actionName";
document.formName.submit();
}
<form method="post" name="formName" enctype="multipart/form-data">
....
<input type="button" onclick="submitForm()"/>
<form>
Form submissions use the name not the id attribute to identify unique elements. Add
name = "uploadForm"
name = "finalForm"
to their respective elements.
<form>
<input type="submit" name="action" value="UPDATE"/>
<input type="submit" name="action" value="DELETE"/>
</form>
and use $_GET['action'] or $_POST['action'] (depending if you use get or post for form).
if($_POST['action'] == 'DELETE'){
//.....
} elseif($_POST['action'] == 'UPDATE'){
//.....
}
If you assign each form with an element id, then you will be able to manipulate which form to upload as per your script. Id enables DOM to specifically pick the exact form and execute the process. For example
<form id="form1"> blah blah </form>
<form id="form2"> blah blah </form>
assign name to form tag,
<form name="frm1" action="form action"></form>
<form name="frm2" action="form action"></form>
to submit first form
document.frm1.submit();
to submit second form
document.frm2.submit();
I have tried all above mentioned answers but I was unable to succeed, but after that I removed the action attribute of the forms and then used the following code at the time of submission of each form
document.uploadFormName.action="../../../../../xyz/services/abc/fileUpload";
document.uploadFormName.submit();
Then it was not submitting all the forms on the page.
It is a kind of work around but a good one ;).

jQuery to submit form on file selection not working

I am trying to initiate upload of a file as soon as the user selects the file. The form should disappear replaced by the "Uploading your picture..." message.
So far, all I get is the form being hidden (and message showing), but the upload is not happening. The form is not being submitted. Any ideas why?
This is the JS
<script>
$(function(){
$("#file_select").change(function(){
$(this).parents("#upload_form").submit();
$("#upload_form_div").hide();
$("#loading").show();
});
});
</script>
and the HTML
<div class="float_left" id="upload_form_div">
<h3>Select a picture for your profile (4 MB max):</h3>
<form action="http://example.com/profile/upload_picture"
id="upload_form"
enctype="multipart/form-data"
method="post" accept-charset="utf-8">
<input type="file" name="userfile"
id="file_select" />
<input type="hidden" name="upload" value="upload" />
<button id="submit" type="submit"><img height="24" width="24"
alt="Upload" src="images/icons/small/white/bended%20arrow%20right.png">
<span>Upload</span>
</button>
</form>
<form action="http://example.com/profile/remove_picture"
method="post" accept-charset="utf-8">
<button type="submit"><img height="24" width="24"
alt="Remove" src="images/icons/small/white/trashcan.png">
<span>Remove</span>
</button>
</form>
</div>
<div id="loading" style="display:none;">
Uploading your picture...
</div>
It probably has something to do with this part:
<input type="file" name="userfile"
value="onchange="return validateFileExtension(this)""
id="file_select" />
An input type=file should not have a value= attribute (and even if it did, you shouldn't put javascript in there!)
You also have some javascript in the form:
onsubmit="return validateFileExtension(this.userfile)"
If the function validateFileExtension() returns false then the form will not submit.
However, the way you have written the jQuery means that the message will still appear.
EDIT:
Change the id on your submit button to something other than "submit".
In the jQuery docs:
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.
HOWEVER:
You should consider #Abdul's solution, since the working submit will take you away from your message.
If you are using CodeIgniter and you don't want to use Ajax, you should consider using the flash functionality to display the message to the user after the form submits.
You should think of using jquery form plugin to submit your form and jquery validate plugin to validate your form for file extensions and everything.Jquery form plugin submits your form using ajax. In that way you won't be redirected to form action. Also
if you want you can consider using jquery dialog to display the result.
$("#upload_form").validate({
rules: {
MyFile: {
required: false,
accept: "jpg|jpeg|png|gif"
}
}
});
$("#file_select").change(function(){
("#upload_form").ajaxSubmit();
$("#upload_form_div").hide();
$("#loading").show();
});
Submit form on file selection and validate for CSV file input
$('#file').change($('form').submit());
$('form').submit(function(){
if($('#file').val().toLowerCase().indexOf('.csv') != -1){
$('#spinner').show();
return true;
}
else{
alert('Invalid File format. Please, upload CSV file')
return false;
}
});

Categories