Предварительно заполнили данные формы из ввода другой страницы

Question

Я пытаюсь передать некоторые данные с одной веб-страницы на другую, нажимая на кнопку.

Страница блейда:

<div class="container">
  <div class="row">
      <div class="col-md-7 info" style="padding-right: 35px;padding-top: 40px" >
          <h1 style="text-align: right;margin-bottom: 0px; font-style:italic;font-size:28px">"Wǒ bù zhīdào cóng nǎlǐ kāishǐ, píngtái bāng wǒ zhǎodàole zhīchí. Wǒ zhēn de hěn xǐhuān tāmen rúhé gēnjù wǒ de yùsuàn wèi wǒ tígōng duō zhǒng xuǎnzé bìng bāngzhù wǒ pínggū tāmen.</h1>
          <br>
          <p style="text-align:right; font-weight:bold; font-size:16px">Alvin R., Entrepreneur</p>
      </div>
      <div class="col-md-5" style="padding-left: 35px;">
          <div class="card" style="border-radius: 20px !important;">
              <div class="card-head" style="text-align: center;font-weight: bold;padding-top: 25px;">
                  <header style="font-size: 25px;color: #3f9ae5;">GET STARTED</header>
              </div><!--end .card-head -->
              <div class="card-body" style="font-weight: bold;font-size: 16px;padding-left: 30px;">
                  <div class="form" style="padding-left: 15px;padding-right: 15px;">
                      <div class="row">
                          <div class="col-md-12">
                              <div class="form-group"  style="margin-bottom: 20px;">
                                  <select style="margin-top: 15px;font-size: 16px;" id="aops" class="form-control select2-list" name="areas">
                                  </select>
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-md-12" id="req_options">
                              <div class="form-group">
                                  <select style="margin-top: 15px;color: grey;font-size: 16px;" id="request_type" class="form-control select2-list" name="request_types" >
                                  </select>
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-md-12">
                              <div class="form-group">
                                  <input type="text" placeholder="Title " style="margin-top: 10px;padding-left: 10px;font-size: 16px;" class="form-control" name="title" id="title">
                              </div>
                          </div>
                      </div>
                  </div>
                  <a href="submit_query"><button class="btn btn-theme effect standard btn-sm" id="post_request" style="background-color: #3f9ae5 !important;border-style: none;color:#ffffff;font-weight:bold;width: 100%;font-size: 16px">Post a Request</button></a>
                  <p style="font-size: 13px;padding-top: 24px;text-align: center;">By signing up you agree to the <a href="termsofuse"><u> terms of use</u></a> and <a href="privacypolicy"><u>privacy policy</u></a></p>
              </div><!--end .card-body -->
          </div><!--end .card -->
      </div>
    </div>
</div>

У меня есть один простойстраница шаблона, на которой пользователь может выбрать два зависимых раскрывающихся списка, AreaOfPractice и RequestsType, и другой заполненный текст заголовка. Когда пользователь выбирает с самого начала, он перенаправляет на новую страницу, где он будет заполнять форму с 5-6 полями.где 3 поля будут заполнены данными, введенными пользователем с предыдущей страницы.

Я пытался сделать это с помощью jQuery & Ajax.

  $.ajax({
            url:"getAops",
            type: "POST",
            data:{_token:csrf_token},
            success:function (result) {
                var options_grp = "";
                options_grp = "<option></option>";
                for(i=0;i<result.length;i++){
                    options_grp = options_grp + "<option  value='" +result[i].name+"_"+result[i].id+"'>"+result[i].name+"</option>"
                }
                $(options_grp).appendTo('#aops');
                $('#aops').select2({
                    placeholder: "Select Category *"
                });
            }
        });

        $('#aops').on('change',function () {
            $.ajax({
                url:"getRequestTypes",
                type: "POST",
                data:{_token:csrf_token,aop_id:$('#aops').val().split('_')[1]},
                success:function (result) {
                    $('#request_type').empty().trigger('change');
                    $('#req_options').css('display','block');
                    var options = "<option></option>";
                    for (var i = 0;i<result.length;i++){
                        options = options + "<option  value='" +result[i].name+"_"+result[i].id+"'>"+result[i].name+"</option>";
                    }
                    $(options).appendTo('#request_type');
                    $('#request_type').select2({
                        placeholder: "Select Request Type *"
                    })
                }
            });
        });
        $('#post_request').on('click', function () {
            var data = new FormData();
            if($('#aops').select2('data') != null){
                aop = $('#aops').select('data').text;

            }
            if($('#request_type').select('data') != null){
                request_type = $('#request_type').select2('data').text;
            }
            data.append("aop", $('#aops').val());
            data.append("request_type",$('#request_type').val());
            data.append("title",title);
            if(aop == "" || request_type == "" || title == "" ){
                show_notification("error","Please fill all required fields");
                return false;
            }else {
                $.ajax({
                    url: "createNewRequest",
                    type: "POST",
                    async: false,
                    data: data,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function () {
                            $('#aops').html(aop);
                            $('#request_type').html(request_type);
                            $('#title').val(title);
                            return true;
                    },
                    contentType: false,
                    processData: false
                });
            }

        });

Answer 1

Вот основной пример техники.Вы можете сохранить много полей, создав объект, такой как {name-field: name-data, x-field: x-data} и так далее.Вы можете получить это на другой странице и установить для ввода формы.

$("#setbutton").click(()=>localStorage.setItem("form-data",$("#set").val()))

$("#getbutton").click(()=>{
var data=localStorage.getItem("form-data")
$("#get").val(data);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="set"/>
<button id="setbutton">Set</button>
<br><br><br>
<input type="text" id="get"/>
<button id="getbutton">Get</button>