Develop Reference

Only text values being posted to php file but not files

I have the following code for an HTML form:
<form id="idForm" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<input type="submit" name="submit" value="Submit" />
</form>
and the following Javascript code on the same page where the form is located. Also, this code is written below the form code:
$("#idForm").submit(function() {
alert("hi");
var url = "submit.php";
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(),
success: function(data) {
alert(data);
}
});
return false;
});
And here is the PHP code that I'm using to see if the form data is being posted:
if (isset($_FILES['image'])) {
$image = $_FILES['image'];
echo $image;
}
if (isset($_POST['first'])) {
$name = $_POST['first'];
echo $name;
}
With the above code, it seems as though the attached file is not being sent to the PHP file. Only the values are being sent, since they are echoed when I inspected the element using Google Chrome dev tool.
I want to be able to post both text value and files to the PHP file for processing.
Why am I getting this problem? How do I fix this?
Also, as part of the solution, I want to prevent the page from being refreshed when the submit button is clicked.
Thanks much!

Unfortunately input[type='file'] cannot be submitted by .serialize(), you have to manipulate by formData.
You will find a very good formData example in here

How to prevent browser from opening a new page on form submit?

There's an email subscription form in a web page, When someone enters his email and clicks on submit button, We don't want this page to be redirected to form action url, We just want it's submit button text value to be converted to another text, something like "Thank You!". How is it possible? Should I go through ajax? or javascript?
Here's the form:
<form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/myownID" data-code="myownID" method="POST" target="_blank">
<div class="form-group ml-field-email ml-validate-required ml-validate-email">
<input class="newsletter-email" type="email" name="fields[email]" placeholder="Email*"/>
</div>
<input type="hidden" name="ml-submit" value="1" />
<p>
<input class="newsletter-submit" type="submit" value="Get Updates!"/>
</p>

For starters remove target="_blank" from your form tag.
Then, within your jQuery, do something along the lines of this:
$(".ml-block-form").submit(function(){
var vals = $(this).serialize();
$.ajax({
url: "postpage.php",
method: "POST",
data: vals,
success: function(data) {
$("#formsubmit").val("Thank you!");
}
});
return false; // prevent from submit
});
I've altered your HTML as well, as it was originally very messy. You can of course add the other elements back if you need:
<form class="ml-block-form" action="" data-code="myownID" method="post">
<input id="mainval" type="email" name="fields[email]" placeholder="Email*">
<input id="hiddenval" name="ml-submit" value="1" />
<input id="formsubmit" type="submit" value="Get Updates!"/>
</form>

You can simply remove target="blank" because blank value opens the linked document in a new window.

Instead of
<input class="newsletter-submit" type="submit" value="Get Updates!"/>
use
<button id="newsletter-submit" value="Get Updates!"/>
(note that I changed class for id)
And then use jQuery to handle the click on the button:
$("#newsletter-submit").click(function () {
$(this).prop("value", "Thank You!");
// do something else with the input values e.g. send them via ajax to a server script
});

Submitting form data through ajax not working

sorry for the dumb question but I can't seem to get this going and I figured I best give you more info than not enough -
I have a form that I am running inside a loop in php like this:
<form name="primaryTagForm'.$post->ID.'" id="primaryTagForm'.$post->ID.'" method="POST" enctype="multipart/form-data" >
<fieldset class="tags">
<label for="post_tags'.$post->ID.'">Tags:</label>
<input type="text" value="" tabindex="35" name="postTags'.$post->ID.'" id="postTags'.$post->ID.'" />
</fieldset>
<fieldset>
<input type="hidden" name="submitted" id="submitted" value="true" />
'.wp_nonce_field( 'post_nonce', 'post_nonce_field' ).'
<button class="button" type="submit">Tag</button>
</fieldset>
</form>
I have tried adding my ajax under that form (Still within the loop so I can grab the post_id) and in my console it my tag-ajax.php file is posted just fine. Here is my weak attempt at that based on this: Save data through ajax jQuery post with form submit and other like questions.
<script>
jQuery(document).ready(function($) {
$(".button").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "'.get_stylesheet_directory_uri().'/tags-ajax.php",
data: "primaryTagForm'.$post->ID.'",
success: function(data){
//alert("---"+data);
alert("Tags have been updated successfully.");
}
});
});
});
</script>
And lastly here is what is in my tags-ajax.php file -
if(isset($_POST['submitted']) && isset($_POST['post_nonce_field']) && wp_verify_nonce($_POST['post_nonce_field'], 'post_nonce')) {
wp_set_object_terms( $post->ID, explode( ',', $_POST['postTags'.$post->ID] ), 'product_tag', true );
echo'Success!';
}
So when I try running this a couple of things happen by looking in the console, if I hit submit on one of the forms then all them forms on that page post to tags-ajax.php (Im sure it is because I am doing this in a loop but not sure how else to do it and bring in post->ID on tags-ajax.php)
The second, most important thing is that nothing actually saves, I click the "Tag" but (submit) and I get those success alerts (for each post unfortunately) but when I click through those the tags are not actually saved.
My question: How do I get the data to actually save with the ajax/php and how can I have that post refresh without reloading the page so the user sees they actually were added?
Latest Update: After making the serialize edits mentioned below I submit my form and check the console and see the post method is getting a 500 internal server error.. Im thinking if my problem is coming from because I have the form and an inline script with the ajax running in a loop? So there are technically 20 posts/forms/inline scripts on a page and when you submit one, all of them submit which may be causing the 500 internal error?

The data: option in ajax should be
data: $("#primaryTagForm'.$post->ID.'").serialize(),

Use serialize
You have to change
data: "primaryTagForm'.$post->ID.'",
to
data: $("#primaryTagForm'.$post->ID.'").serialize(),

Simplify your markup. You dont have to use id attributes everywhere. Just include a hidenn tag in your form with the value of $post->id. Also echo the ajax url at the form's acton attribute.
So the html should be similar to this:
<form method="POST" action="' . get_stylesheet_directory_uri() .'/tags-ajax.php" >
<input type='hidden" name="id" value="'.$post->ID.'">
<fieldset class="tags">
<label>Tags:</label>
<input type="text" value="" tabindex="35" name="tags" />
</fieldset>
<fieldset>
<input type="hidden" name="submitted" id="submitted" value="true" />
'.wp_nonce_field( 'post_nonce', 'post_nonce_field' ).'
<button class="button" type="submit">Tag</button>
</fieldset>
</form>
Then you can use a script like this:
jQuery(document).ready(function($) {
$(".button").click(function(e) {
e.preventDefault();
var $target = $(e.target),
$form = $target.closest('form');
$.ajax({
type: "POST",
url: $form.prop('action'),
data: $form.serialize(),
success: function(data){
//alert("---"+data);
alert("Tags have been updated successfully.");
}
});
});
});

I have 1 form with 2 submit buttons

I am trying to set-up a form that has 2 buttons, accept and deny. It doesn't seem to be working. Any thoughts on what I should fix?
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" action="formapprovedeny" class="iform">
Form content here.
<input type="button" onclick="submitForm('html_form_approve.php')" class="submit_button" value="Approved" name="Approved" />
<input type="button" class="submit_button" onclick="submitForm('html_form_deny.php')" value="Denied" name="Denied" />
</form>
Here is the script part.
<script>
function submitForm(action)
{
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>

Your Javscript is trying to submit a form with an id of formapprovedeny but your form does not have an id. Try adding id="formapprovedeny" to your form

It should id="formapprovedeny" not action="formapprovedeny"
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" id="formapprovedeny" class="iform">

You have a problem with your naming.
You try to get the form by it's id, but it is not set. It's name is.
You should use either getElementByName or give your form an id.

The type of button must be 'submit' and the value whatever you want, look this:
<input type="submit" class="submit_button" value="Approved" name="Approved" />
<input type="submit" class="submit_button" value="Denied" name="Denied" />

What do you want to achieve using the 2 buttons? What do you expect?
http://jsfiddle.net/xaW5P/
<script>
function submitForm(action)
{
alert('hello submitForm '+action);
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
if I use your code (added an alert) this seems to work...whatever it should be doing ;)

Form submit problem using JavaScript in Internet Explorer 6

I have just done the code for submit the form using JavaScript.
It works in all browsers except in Internet Explorer 6.
I have pasted my HTML form and JavaScript code below.
Can you please find what's the problem with it?
JavaScript:
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
}
</script>
HTML Code:
<form name="del_form" id="del_form" method="post">
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>
Function Call Code:::
<p class="video">
<a href="javascript:void(0)" onclick="dodelete('<?php echo $row['image_id']?>')">
<img src="<?php echo $cfg->admin_image_path; ?>/delete_icon1.gif" border="0" alt="Delete"/>
</a>
</p>

What is returned by:
document.getElementById('image_id')
It returns one INPUT element of collection of elements?
Try to replace:
document.getElementById('image_id').value=image_id;
with:
document.del_form.image_id.value=image_id;

OnSubmit call for javascript would help.
<form name="del_form" id="del_form" onsubmit="dodelete(value);" >
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>

There are two things I'd like to try, I'm not sure why or when this doesn't work it seems random, first try to set a timeout for the submit :
document.doSubmit = function() {
document.del_form.submit();
}
setTimeout("document.doSubmit();", 100);
Sometimes, just return something after the click works :
<input type="hidden" name="image_id" id="image_id" onclick="submitFormFunction(); return false;” />

What happens if you replace:
document.del_form.submit();
with:
document.getElementById('del_form').submit()

Try to move method='POST' to the beginning of form element definition.
I mean -- method attribute should be the first attribute of form element.
If I remember well, this fixed some problems with submitting forms on IE6.

I have edited your code a little bit.
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
return false;
}
</script>
and the HTML with some test Image ID and it works in IE6
<form name="del_form" id="del_form" method="post" onSubmit="return(dodelete('2'));">
<input name="do" id="do" value="delete" />
<input name="image_id" id="image_id" />
<input type="submit" value="Submit">
</form>

Let's try again :).
What happen after replacing:
onclick="dodelete('<?php echo $row['image_id']?>')">
with:
onclick="dodelete('<?php echo $row['image_id']?>'); return false;">
What exactly doesn't work with your code? Throw JS error, there is no server request, values in request are empty?
And (maybe the most important question) -- where is action attribute for your del_form form?

replace
<a href="javascript:void(0)"
with
<a href="#"
IE have problem with that for the dom that fires the JS submit.