I have two forms usin ajax on one page, one for uploading an image and the other sending information via mail.
When I submit one it clears the content of the other one.
My html:
<form class="inputform">
<input required size="60" maxlength="80" class="form-control" name="Location[zendernaam]" id="Location_zendernaam" type="text">
<!--more input fields-->
<input type="submit" class="submit" style="display:none;">
</form>
<form id="form" class="imageuploadform" action="<?php echo get_home_url(); ?>/wp-content/themes/PandoraBox/ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="image" />
<input id="button" class="image-upload" type="submit" value="Upload">
</form>
<div id="preview" style="display:none"></div>
<input id="submitform" type="button" value="Verzend">
My javascript/jquery:
<script type="text/javascript">
$("#submitform").click(function(){
$('.inputform .submit').click();
return false;
});
$(".inputform").submit(function( event ){
event.preventDefault();
post_data = {
'titel' : $("#Location_title").val(),
'hoofdcategorie' : $("#Location_hoofd1").val(),
//more fields
};
$.ajax({
type: "POST",
url: "<?php echo get_home_url(); ?>/wp-content/themes/PandoraBox/verzend-inzending.php",
data: post_data,
success: function(){
alert('top!');
}
});
});
</script>
First the user fills in the fields, after that he can upload an image and preview it. When you click submit on the image upload form it clears all the values of the first form.