Develop Reference

Sending data to php script without ajax

I am required to send data from an html page, via input elements to a php script and I cannot use ajax for some reason. How to accomplish this?
My code is something like this:
HTML:
First Name : <input type"text" name="first_name">
<br><br>
Last Name : <input type"text" name="last_name">
<br><br>
<button id="submit_btn">Submit</button>
Now, I want the javascript to be something like :
function redirect_from_here() {
close(); //close the current window
window.location='./phpfile.php'; //load the new page which will process the data sent to it.
}
My question is how do I send the value in the input elements in the HTML portion, as data to be processed, to the php script (phpfile.php in this case).
Please note that I prefer not to use html form for doing the job.

You are using HTML form as there are input fields in you code.
Inputs are part of a form and should be wrapped by a form element
Why using JS for submitting the form when you can use <form action='script.php'.. for that?
I suggest that you revise your requirements instead of trying to come up with a hackish way of how to send the data..

Just submit a form with action="phpfile.php"
if not interested with html,
then in the window location bind the values as a GET form method do

html submit form ajax response

Im currently loading my pages in Codeigniter using ajax for sections of the page.
but, when i press submit on one of the loaded forms, i dont get the response out from it. its like the form never was sent. im exspecting the layout to be proccessed, instead it returns the same layout as if it wasnt proccessed.
How can i make so, when pressing submit button on the loaded form data, that it will be proccessed by the same url, and then load the new response to the view?
piece of code:
$("form").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), function(data) {
$(".main_center").html(data);
});
return false; // prevent normal submit
});
piece of html:
<form method="POST" action="/crime">
<input type="hidden" name="crimeinput" id="crimeAction" value="123">
<input type="submit" value="do" name="docrime" id="krimsubmit" style="display:none">
</form>
EDIT:
After more looking into it, it seems like only the crimeInput variable is sent to the server, and not the docrime. How can i make it able to send the submit name aswell?

As per the docs for serialize:
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.
So if you want that field to be passed, you'll have to add it in a different way, perhaps as another hidden input.

How can I hide a form after submission with JavaScript?

So I have these forms:
django template:
{% for F in forms %}
<input type="text" name="name/>
<input type="number" name="number/>
<input type="submit" class="button" [onclick="this.disabled=true,this.form.submit(); ??]> #how can I make this work?
{%endfor%}
What the template code does is render out multiple forms based on the value of forms> I want the user to submit the form and then have the form either disappear(preferable) or at least disabled so that they can resubmit. How can I do this?

If you have multiple forms on the page and want to handle them with JavaScript, I would suggest you to use jQuery. You could make something like:
$('input[type="submit"]').click(function() {
// here comes your logic
// and the next line removes the corresponding form
$(this).parents('form').remove();
});
But as Marc B pointed out, you should submit the form via Ajax. I don't know what do you intend to do with the user input, but if you want to use Ajax then you could make something like:
$('form').submit(function() {
$.ajax({
// your logic
});
});
Check the official documentation of jQuery for more details and adapt the examples to your needs.
EDIT:
if you want to prevent the form from submitting and refreshing the page, please change it slightly to:
$('form').submit(function(event) {
$.ajax({
// your logic
});
event.preventDefault();
});

Sending multiple file input fields programmatically in one form

I'm trying to use the blueimp/jQuery-File-Upload plugin to programmatically send more than one file input field though the same form.
When user select form files, it just append them in a JS variable to further send them with $('#form').fileupload('send') method on form submission. My goal is to use the exactly same synchronous form I was using before in an asynchronous way. So when user click on form submit button, it prevents default action and them let the plugin to do the task, sending all form data and displaying overall upload progress.
I'm mainly following these guides:
https://github.com/blueimp/jQuery-File-Upload/wiki/API
https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form
Actually it's almost working, but it does not send more than one input file to the server end. In fileuploadadd event I'm pushing data.files[0] (my file inputs are single file only, but each of them use different accept attributes) to a "global" uploadable array and then on form submission I use something like $('#form').fileupload('send', {files: uploadable}).
I guess I'm not doing it the right way, since only one file is being sent along with form data. What is the correct way to programmatically send more than one file input file using a single form?
I'm also not too confident about overall upload progress... If I use fileuploadprogressall event to read the upload progress will it be reporting the progress of all uploaded files?
JS (simplified)
$(function () {
var uploadable = [];
$('#form').fileupload({
autoUpload: false,
singleFileUploads: false,
add: function (event, data) {
uploadable.push(data.files[0]);
return false;
},
// other event callbacks
})
.prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
$('#form').submit(function (event) {
event.preventDefault();
$('#form').fileupload('send', {files: uploadable});
});
});
HTML
<form id="form" action="upload" method="post" enctype="multipart/form-data">
<!-- other text/hidden inputs that will also be sent -->
<input type="file" name="image" id="image" accept="image/*" />
<input type="file" name="video" id="video" accept="video/*" />
</form>

uploadable.push(data.files[0])
You vividly told the compiler to only push the first file.
Have you tried using foreach and push all files?
Thank you,

Create a Form element using javascript and submit it without redirecting/refreshing

I am using a Form in a LightBox which contains some input element.
<form name="imageUploadForm" action="uploadImage.do" method="post" enctype="multipart/form-data">
<input type="text" id="id" name="id" style="display: none;" value="">
<div id="fileUploaderDiv">
<input type='file' name="file0" id ="file0" />
</div>
<button onclick="javascript:ImageUploader.attachImage();">Upload</button>
</form>
can anybody tell me how to copy this form in new one and submit it without redirecting user or knowing him about form submission using javascript or jquery?

http://api.jquery.com/serialize/
$('#yourbutton_notintheexample_you_provided').click(function(){
var myForm = $('form[name=imageUploadForm]')
var data = myForm.serialize();
$.ajax({
url: myForm.attr('action'),
type: myForm.attr('method'),
data: data,
success: function(){
window.alert("write your form handling code here")
}
});
});
or something along the lines.
In prototype, there was a single convenience method, called Form.request, read about it here.

In order to send data to a server (through submitting a form or otherwise) one can use AJAX. The user does not need to be informed (but I'd recommend letting the user know somehow).
JavaScript tutorial
jQuery docs