Submit a form with drag and drop by javascript

81 Views Asked by pret71 At 09 October 2023 at 21:27

I'm implementing a drag and drop functionality. When I move a card with elements and form I want change a select value and then submit the form for changing for keep the div permanently in new position (by my status field). I can get the element, the form, the select and change the value but after subit the value is not changed.

<script>
function allowDrop(ev) {
  ev.preventDefault();
}  

function drag(ev) {
  ev.dataTransfer.setData("text/html", ev.target.id);
}  

function drop(ev) {  
  ev.preventDefault();  
  var data = ev.dataTransfer.getData("text/html");  
  ev.target.appendChild(document.getElementById(data));
  var taskCardModal = document.getElementById(data);
  var taskForm = taskCardModal.getElementsByTagName("form")[0];
  var selectState = taskForm.getElementsByTagName("select")[0];
  //alert(selectState.value);
  selectState.value="todo";
  //alert(selectState.value);
  document.forms[taskForm.id].submit();
  //alert(selectState.value);
}  
<script>

<html>
<div class="card-body" id="divtesting" style="min-height: 200PX;" ondrop="drop(event)" ondragover="allowDrop(event)">
  ...
  <div class="card" style="width: 15rem; font-size:13px" id="pagina-di-visualizzazione-delle-informazioni-del-profilo"
    draggable="true" ondragstart="drag(event)">
    <div class="card-body">
      ...
      <!-- Modal body edit-->
      <div class="modal fade" id="pagina-di-visualizzazione-delle-informazioni-del-profiloedit" tabindex="-1"
        role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        ....
        <div class="modal-body">
          <form id="cred_form_144_1_1" class="cred-form cred-keep-original"
            action="/wpscrum/index.php/sprintboard/sprint-1-backlog-novel/?projectid=276&amp;sprintid=275&amp;_tt=1696883457"
            data-form="{&quot;form_id&quot;:&quot;cred_form_144_1_1&quot;,&quot;use_ajax&quot;:&quot;0&quot;,&quot;wpv_page&quot;:1}"
            data-conditionals="&#091;&#093;" method="post">
            ....
            <select id="cred_form_144_1_1_state" class="form-control wpt-form-select form-select select"
              output="bootstrap" preset_value="" urlparam="" preview="" previewsize="" select_label="" edit_label=""
              value_escape="" make_readonly="" placeholder="" select_text="" data-wpt-type="select" name="wpcf-state">
              <option value="todo" class="wpt-form-option form-option option" data-wpt-type="option"
                data-wpt-id="cred_form_144_1_1_cred_form_144_1_1_state" data-wpt-name="wpcf-state">To do</option>
              <option value="working" class="wpt-form-option form-option option" data-wpt-type="option"
                data-wpt-id="cred_form_144_1_1_cred_form_144_1_1_state" data-wpt-name="wpcf-state">Working</option>
              <option value="testing" class="wpt-form-option form-option option" data-wpt-type="option"
                data-wpt-id="cred_form_144_1_1_cred_form_144_1_1_state" data-wpt-name="wpcf-state" selected="selected">
                Testing
              </option>
              <option value="done" class="wpt-form-option form-option option" data-wpt-type="option"
                data-wpt-id="cred_form_144_1_1_cred_form_144_1_1_state" data-wpt-name="wpcf-state">Done</option>
            </select>
            ...
          </form>
          ...

</html>

Original Q&A

Submit a form with drag and drop by javascript

There are 0 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in DRAG-AND-DROP

Related Questions in SUBMIT

Trending Questions

Popular # Hahtags

Popular Questions