Develop Reference

Form implementation

i have one form with some input text with the name = "user_name" , "mob" , "email" and inside this form i have a link for example Plans and end with submit button. Now if user click the link then i want to have all the values of the input text of the same form send to another page to pks.php and if the user click on the submit button then it will work on action confirm.php. For example Check this code
<form action="confirm.php" method ="post">
<input type ="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
PLANS
<input type="submit">
</form>
Can you help me out?? How can i achieve this. Thanks in advance

The simplest way is to change the link to a second submit button. You can then use the formaction attribute to change the URL the form submits to when you use this button.
<form action="confirm.php" method ="post">
<input type ="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
<input type="submit" formaction="pks.php" value="PLANS">
<input type="submit">
</form>
If you can't do that, you need to run Javascript when they click on the link. You can have this code change the action of the form, and then submit it.
document.getElementById('plans').addEventListener('click', function(e) {
e.preventDefault();
var form = document.getElementById('myform');
form.action = this.href;
form.submit();
});
<form id="myform" action="confirm.php" method="post">
<input type="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
<a id="plans" href="pks.php">PLANS</a>
<input type="submit">
</form>

You will probably want to use JavaScript to control the form if you want the action attribute to change. By default, submitting the form will cause it to post to confirm.php.
Using JQuery you can do this:
$('form').on('submit', function(e) {
// Stop the form from submitting
e.preventDefault();
// Do logic to determine what action you should do
var myAction = 'pks.php';
// assign the action to the form
$(this).attr('action', myAction);
// submit the form
$(this).submit();
});
I haven't run this script so it may not work out of the box but you should be able to adapt and fix it without too much difficulty.

How can i upload preview images?

In my HTML form I have input filed with type file.
for example :
<input name="txt_file" type="file" id="txt_file" multiple>
I use code in this link here is the fiddle:
http://jsfiddle.net/L45LW/5/
How can i upload all image with javascript?
I want to store images info into array to send other page with POST in javascript.
Please help me

Not very clear what are you asking for! But at least you should have enctype="multipart/form-data" in your form tag to upload files.
<form id="form1" method="post" enctype="multipart/form-data">
<input name="txt_file" type="file" id="txt_file" multiple/>
<input type="submit" value="Upload" />
</form>

Is it possible to submit a part of a form by ajax and another part of the form 'normally'?

HTML example:
<form action='Somepage.php' method='POST' enctype='multipart/form-data'>
<input type="file" name "myFile" />
<input type="text" name="myText" />
<input type="submit" name="submit" value="Submit"/>
</form>
This form is submitted by ajax today and I discovered the file upload isn't working at all in IE8 so I want to upload the file part "normally" and the text part by ajax.
Is this possible? In which case, how? And I don't want to use hidden iframe/flash solutions. I'm using jQuery and PHP backend.

You could move the fields that you want to submit via AJAX outside the form. The Javascript that constructs the AJAX call can gets its data from anywhere.
Or you could have the AJAX callback function mark all the text inputs as disabled, and then submit the form normally. Disabled inputs are not included in normal form submission.

jQuery - Submit Form... but also pass submit input name and ID

I have the following jQuery code, which automatically submits my form whenever the user selects a file to upload in the file input field:
jQuery(document).on('change', 'input[type="file"]', function () {
jQuery(this).parents('form').append('<input type="hidden" name="action" id="action" value="bp_avatar_upload" />').submit();
});
However, I also need to pass along the ID and name of the submit input with this code. The ID and name for the submit input are both upload, as seen in the original, non-jQuery code:
<input type="submit" name="upload" id="upload" value="Upload Image" />
Please advise how I may be able to go about this. Very much appreciative of all help on this!

Just make a basic hidden field within your form as such:
<input type="hidden" name="action" id="action" />
Then Change its value on image Selection while submitting form at same time:
$("#upload").change(function(){
document.getElementById("action").value = "bp_avatar_upload";
$("#form").submit();
});

HTML: Copy form fields to another form including FILE input field?

I came to see that form file input field value cannot be set with javascript for security reasons.
I just want to copy a FILE input to another form and post it, I searched for a work around and could not find anything, is it possible?
UPDATE: my code:
function prepareUpload( filevalue ){
document.getElementById('logo').value =filevalue;
var mform = document.getElementById('sleeker');
ajaxUpload( mform,'<?php echo base_url(); ?>'); // a methods to upload...
}
<input class="input-file-upload" type="file" size="20" name="logodummy" id="logodummy" onchange="prepareUpload( this.value );" />
<form action="" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" onbeforesubmit="return false;">
<p><input type="hidden" name="logo" id="logo" /></p>
</form>
Anything other thatn file input are working fine, and I could receive with $_POST, but $_FILES doesn't have values. And this code alone working fine too. I think this coe is enough?

Yes, you can place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
However in modern browsers, you will only be able to access the file name, and not the full path. You may want to check the following Stack Overflow posts for further information on this topic:
Can’t get the complete address while uploading a file
How to get the file path from HTML input form in Firefox 3
UPDATE:
The original question made me think that you only needed to copy the "file name" to another HTML form, and not the whole <input type="file"> representation.
Further to the update, I assume you meant something like this:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="file" id="hidden_file" value="" />
<input type="submit" />
</form>
Unfortunately the above does not work. Firefox will return "Security error code: 1000" if you try the above example.
As for some workarounds, you may want to the check David Dorward's suggestions:
Using cloneNode
Moving the input field with appendChild before submitting the form

You could move the file input to the other form (with appendChild or insertBefore), submit the form, and then move it back.

I haven't tested this in depth, but it appears to work in Firefox.
Use cloneNode
var copy = file_input.cloneNode(1);
form2.appendChild(copy);

Very much similar to cloneNode except in jQuery
In an xulrunner browser (like firefox) I have successfully used something like the following:
$('input:file').clone().appendTo($('#mainform'));
This should copy all file input objects into the form with id=mainform.
Avoid using the id attribute in the objects to be cloned. id's should always be unique.

I realised that this might be late to the party, but with HTML5, you can use the "form" attribute to target a form, like [form id="the_form"]...[/form]....[input form="the_form type="file" ... /]