一个页面上有两个AJAX表单，一个清除另一个表单

Question

我在一个页面上使用ajax有两个表单，一个用于上传图像，另一个用于通过邮件发送信息。

当我提交一个时，它会清除另一个的内容。

我的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">

我的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>

首先，用户填写字段，之后他可以上传图像并进行预览。 当您在图像上传表单上单击提交时，它会清除第一个表单的所有值。