2017-10-16 13 views
-3

ユーザーがデータ(名前、年齢、州、国)を入力した後、submit.vpをクリックしてabout.phpにリダイレクトするファイルindex.phpがあります。 about.phpに彼の情報が表示されます。どのようにjqueryを使用して達成する。私は、ウェブ開発に新しいです、ここに私のコードです:両方で約含まjqueryを使用して別のWebページのデータに基づいて動的Webページを作成

<div class="table-responsive"> 
<table class="table table-bordered" id = "about-table"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>name</th> 
      <th>age</th> 
      <th>state</th> 
      <th>country</th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

script.js(about.php
のindex.php

<div class="row"> 
    <div class="col-md-3 no-padding"> 
     <input type="text" id = "name" > 
</div> 
<div class="col-md-3 no-padding"> 
    <input type="text" id = "age" > 
</div> 
<div class="col-md-3 no-padding"> 
    <input type="text" id = "state" > 
</div> 
<div class="col-md-3 no-padding"> 
    <input type="text" id = "country" > 
</div> 
<a href="about.php"> 
    <button type="submit" class="btn btn-primary center-block col-md-2" id = "submit">Submit</button> 
</a> 

.phpとindex.php)

$("#submit").on("click",function(){ 
var name = $("#name").val() 
var age = $("#age").val() 
var state = $("#state").val() 
var country = $("#country").val() 

var newRow = $("<tr>"); 
var cols = ""; 
cols += '<td>' + name +'</td>'; 
cols += '<td>' + age + '</td>'; 
cols += '<td>' + state + '</td>'; 
cols += '<td>' + country + '</td>'; 
newRow.append(cols); 
$("#about-table").append(newRow); 
}); 
+1

PHPでフォームを処理する方法についていくつかの基礎研究/学習をしてください。 –

+0

クライアント側のページ間でデータを持ち越すことはできません。a)以前にデータを入れたURLを解析する、b)またはc)ローカルまたはセッションストレージを使用する – Cruiser

+0

index.phpからabout.phpにデータを渡す方法は? script.js内のデータを取得しています。このデータを渡してindex.phpを生成する方法を教えてください。助けてください。 –

答えて

0

ウェブストレージ(localStorage)を使用してこれを行うことができます。

localStorageが1セッションだけのデータを保存することをご存知でしょうか! 'page1.html'およびその他の'page2.html'と呼ばれる1 -

私は2つの* .htmlファイルを作成しました。

page1.htmlは、入力フォームで構成され、ウェブ・ストレージへの値SETING:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<form> 
    <input type="text" id="name" placeholder="Your name..." /> 
    <input type="number" id="age" placeholder="Your age..." /> 
    <input type="text" id="state" placeholder="State..." /> 
    <input type="text" id="country" placeholder="Country..." /> 
    <input type="submit" id="submitBtn" value="Submit" /> 
</form> 

<script> 
    (function() { 

     var name, age, state, country; 

     // Get & set data on submit 
     $('form').on('submit', function(e) { 

      // prevent submition 
      e.preventDefault(); 

      // set var values 
      name = $('#name').val(), 
      age = $('#age').val(), 
      state = $('#state').val(), 
      country = $('#country').val() 

      if (typeof(Storage) !== 'undefined') { 
       // Store values to web storage 
       window.localStorage.setItem('name', name); 
       window.localStorage.setItem('age', age); 
       window.localStorage.setItem('state', state); 
       window.localStorage.setItem('country', country); 
      } else { 
       // web storage not supported 
      } 

      // redirect to page2.html 
      window.location.replace('page2.html'); 

     }); 

    })(); 
</script> 

page2.htmlするウェブストレージからデータ及びgeting値を示すためのテーブルで構成されてい

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<table> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>State</th> 
     <th>Country</th> 
    </tr> 
    <tr> 
     <td id="name"></td> 
     <td id="age"></td> 
     <td id="state"></td> 
     <td id="country"></td> 
    </tr> 
</table> 

<script> 
    (function() { 

     // table columns 
     var $name = $('#name'), 
      $age = $('#age'), 
      $state = $('#state'), 
      $country = $('#country'); 

     // get & set values from web storage 
     $name.text(window.localStorage.getItem('name')); 
     $age.text(window.localStorage.getItem('age')); 
     $state.text(window.localStorage.getItem('state')); 
     $country.text(window.localStorage.getItem('country')); 

    })(); 
</script> 

代わりに(&のデータを挿入するなど)phpを使用する必要があります。

関連する問題