Я столкнулся с проблемой, когда при отправке формы второго раздела, она возвращается в первый раздел вместо того, чтобы обновить содержимое текущей страницы

Пользователь Это мой скрипт для одной страницы с сайдбаром, в котором 4 четыре кнопки независимо для страницы 1 страница 2 страница 3 страница 4, эти четыре страницы находятся в одном шаблоне и содержат соответствующий контент, страница содержит две формы, первая форма показывает выпадающий список loc_ids, как я выбираю значение из выпадающего списка и отправляет форму он должен обновить текущий контент страницы, как вторая форма из файла представления рендеринга того же шаблона, который содержит четыре страницы, Когда вид отправляет значение в шаблон, на переднем плане, когда загрузка страницы завершается, он показывает мне первую страницу, которая приветствует страницу, вместо этого, как я могу остаться на текущей странице (определенный раздел шаблона), это связано с тем, что вид рендеринга шаблона и при отправке предыдущей формы он переключается на вид второй формы, которая рендеринга шаблона и при загрузке он показывает шаблон с самого начала. На этой странице у меня есть несколько форм, здесь у меня также есть те же формы, но рендеринг из разных представлений.

<script>
  window.addEventListener('load', function() {
    var urlPath = window.location.pathname;

    if (urlPath === "{% url 'display_table' %}") {
      showPage('page1');
    } else if (urlPath === "{% url 'get_loc_id_for_table' %}") {
      showPage('page2');
    } else if (urlPath === "{% url 'get_loc_id' %}") {
      showPage('page3');
    }
  });

  var pages = document.querySelectorAll('.page');

  function showPage(pageId) {
    pages.forEach(function(page) {
      if (page.id === pageId) {
        page.classList.remove('hidden');
      } else {
        page.classList.add('hidden');
      }
    });
  }

  function submitForm(event, formId) {
    event.preventDefault(); // Prevent default form submission behavior
    var form = document.getElementById(formId);
    var formData = new FormData(form);

    // AJAX request to submit the form data
    var xhr = new XMLHttpRequest();
    xhr.open('POST', form.action);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); // Add this line to identify the request as AJAX
    xhr.onload = function() {
      if (xhr.status === 200) {
        // Update the page content with the received HTML
        document.getElementById('selected-tables').innerHTML = xhr.responseText;
      } else {
        // Handle errors if needed
      }
    };
    xhr.send(formData);
  }
</script>

вот моя страница 2 conent также, когда я отправляю первую выпадающую форму вместо обновления раздела contebt (страница2), она возвращается на страницу приветствия,

<div id="page2" class="page hidden">

<form id="loc_id_form" method="post" action="{% url 'get_db_by_loc_id_for_table' %}" onsubmit="submitForm(event, 'loc_id_form', 'selected-tables');">
        {% csrf_token %}
        <label for="loc_id"></label>
        <select name="loc_ids_t1" id="loc_id" style="width: 150px;">
            {% for loc_ids in dis_loc_id %}
                <option value="{{ loc_ids }}">{{ loc_ids }}</option>
            {% endfor %}
        </select>
        <button type="submit">Submit</button>
    </form>
    
    
    {% comment %} ...........second form .................. {% endcomment %}
    
        
    <form id="select-table-form" method="post" action="{% url 'save_selected_tables_tables' %}"  >
            {% csrf_token %}
            <div class="container">
                <!-- Left partition for available tables -->
                <div class="partition left-partition">
                    <h3></h3>
                    <select id="available_tables" size="12" multiple>
                        {% for tables_all in tables %}
                            <option value="{{ table }}">{{ table }}</option>
                        {% endfor %}
                    </select>
                </div>
    
                    <input type="hidden" name="selected_loc_id" value="{{ selected_loc_id }}">
                    <input type="hidden" name="db_name" value="{{ db_name }}">
                    <input type="hidden" name="accounting_system" value="{{ accounting_system }}">
                    <input type="hidden" name="ip" value="{{ ip }}">
                    <input type="hidden" name="port" value="{{ port }}">
                    <input type="hidden" name="source_table_name" value="{{ source_table_name }}">
                    {% for table in tables %}
                    <input type="hidden" name="available_tables" value="{{ table }}">
                    {% endfor %}
    
                <!-- Arrow buttons for moving options -->
                <div class="toggle-arrows">
                    <button id="move-to-right" type="button">→</button>
                    <button id="move-to-left" type="button">←</button>
                </div>
    
                <!-- Right partition for selected tables -->
                <div class="partition right-partition">
                    <h3></h3>
                    <select id="selected-tables" name="selected_table" size="12" multiple></select>
                </div>
            </div>
            
            <button id="submit-button" type="submit" style="display: none;">Submit</button>
        </form> 

    </div>`

Вернуться на верх