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>

从另一页的输入中预填写表单数据

1 个答案: