Блог

Я создал две формы через выпадающий список, в одной из которых есть кнопка отправки, которая принимает текст, а в другой — кнопка отправки, которая принимает файл (изображение в моем случае). Я пытаюсь использовать только один вызов ajax post для отправки любых данных. Я имею в виду, что обе мои кнопки отправки должны выполнять один вызов Ajax. Кто-нибудь может мне помочь, как это сделать?

мой вызов ajax

 $("#uploadImage").on("click", function(e) {
        $("#addImgAlert").hide();
        e.preventDefault();


        var image = document.getElementById('file');
        var formData = new FormData();
        formData.append('image', image);
        $.ajax({
            enctype: 'multipart/form-data',
            url: "<c:url value="/staff/module/slide/content?${_csrf.parameterName}=${_csrf.token}" />",
            type: 'POST',
            data: {
                form: formData
            },
            processData: false, 
            contentType: false,

            success: function(data) {
                console.log("success");
                console.log(data);
            },
            error: function(data) {
                console.log("error");
                console.log(data);
            }
        });     
  });
  

HTML

 function addImage() {
  $("#addImgAlert").show();
}

function addText() {
  alert("inside add text");
  $("#addTextAlert").show();
}  

 <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Add</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <ul>
    <li class="dropdown-item" id="addImage" onclick="addImage()">Add Image</li>
    <li class="dropdown-item" id="addText" onclick="addText()">Add Text</li>
  </ul>
</div>


<form name="photoForm" id="imageUploadForm" enctype="multipart/form-data" method="post">
  <div id="addImgAlert" role="alert" style="cursor:move; width:340px; height: 130px; display:none; position: absolute;>
	<h6><small>Upload Image: </small></h6>
	<input type=" file " name="file " rows="5 " cols="500 " id="file " /><br>
    <p class="mb-0 text-right "><button type="submit " id="uploadImage ">Upload Image</button> amp;nbsp
	<button id="cancelBgImgBtn " type="button " class="btn light btn-xs ">Cancel</button></p>
</div>
</form>

<form name="textForm "  id="textUploadForm " enctype="multipart/form-data " method="post ">
<div id="addTextAlert" role="alert " style="cursor:move; width:340px; height: 180px; display:none; position: absolute; top: 100px; right: 50px; z-index:999 ">
	<h6><small>Enter Text: </small></h6>
    <textarea class="form-control " id="textarea " rows="3 "></textarea>
	<p class="mb-0 text-right "><button type="submit " id="submitText">Submit</button> amp;nbsp
	<button id="cancelSubmitText " type="button " class="btn light btn-xs ">Cancel</button></p>
</div>
</form>  

Добавьте data attribute в свою форму отправки с типом, который вы хотите, а затем в submit listener решите, какое действие вы хотите выполнить.

Для данных формы используйте ближайший метод для нахождения значения в текущей форме.

 $('form button[type="submit"]').click(function(e) {
  e.preventDefault();

  const form = $(this).closest('form'); // find closest form from submit
  let formData;

  // send text value
  if($(this).data('type') === 'text') {
    formData = form.find('input').val();
  }

  // send image
  if($(this).data('type') === 'ajax') {
    formData = form.find('input').val();
  }

  // your ajax
  alert(formData);
});
  

JSFIDDLE

Обновить
Также, если вы хотите Id кнопку отправки, вы можете просто изменить

 if($(this).data('type') === 'ajax') {
  

Для

 if($(this).attr('id') === 'uploadImage') {
  

или, если вы хотите Id формы

 if(form.attr('id') === 'uploadImage') { // with form constant
if($(this).closest('form').attr('id') === 'uploadImage') { // without form constant