2017-02-23 39 views
1

enter image description here我怎麼能去到預覽頁面,從註冊頁面並返回從預覽頁面註冊頁面進行修改

我要註冊在MySql數據庫的基本信息。但是在註冊數據之前,我希望用戶預覽值,如果他符合他所返回的值,則返回並修改其信息。我想用Ajax來做,而不需要重新加載頁面。

utils.js 

    function createRequest() { 
     try { 
     request = new XMLHttpRequest(); 
     } catch (tryMS) { 
     try { 
      request = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (otherMS) { 
      try { 
      request = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (failed) { 
      request = null; 
      } 
     } 
     } 
     return request; 
    } 


    function getActivatedObject(e) { 
     var obj; 
     if (!e) { 
     // early version of IE 
     obj = window.event.srcElement; 
     } else if (e.srcElement) { 
     // IE 7 or later 
     obj = e.srcElement; 
     } else { 
     // DOM Level 2 browser 
     obj = e.target; 
     } 
     return obj; 
    } 

    function addEventHandler(obj, eventName, handler) { 
     if (document.attachEvent) { 
     obj.attachEvent("on" + eventName, handler); 
     } else if (document.addEventListener) { 
     obj.addEventListener(eventName, handler, false); 
     } 
    } 

    Validation.js 

    window.onload = initPage; 
    function initPage() { 
     document.getElementById("register").onclick = registerUser; 
    } 

    function registerUser() { 

     document.getElementById("register").value = "Processing..."; 
     registerRequest = createRequest(); 
     if (registerRequest == null) { 
     alert("Unable to create request."); 
     } else { 
     var url = "register-feedback.php"; 
     var requestData = "username=" + 
      escape(document.getElementById("username").value) + "&firstname=" + 
      escape(document.getElementById("firstname").value) + "&lastname=" + 
      escape(document.getElementById("lastname").value) + "&email=" + 
      escape(document.getElementById("email").value) + "&tastes=" + 
      escape(document.getElementById("tastes").value); 
     registerRequest.onreadystatechange = registrationProcessed; 
     registerRequest.open("POST", url, true); 
     registerRequest.setRequestHeader("Content-Type", 
      "application/x-www-form-urlencoded"); 
     registerRequest.send(requestData); 
     } 
    } 

    function registrationProcessed() { 
     if (registerRequest.readyState == 4) { 
     if (registerRequest.status == 200) { 
      document.getElementById('wrapper').innerHTML = 
      registerRequest.responseText; 
     } 
     } 
    } 

    registration.php 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Mike's Movies</title> 
     <link rel="stylesheet" href="css/movies.css" /> 
     <script src="scripts/utils.js" type="text/javascript"></script> 
     <script src="scripts/validation.js" type="text/javascript"></script> 
    </head> 
    <body> 
    <div id="wrapper"> 
     <h1>Please register to access reviews:</h1> 
     <form action="register.php" method="POST"> 
     <ul> 
      <li><label for="username">Username:</label><input id="username" type="text" name="username" /></li> 

      <li><label for="firstname">First Name:</label><input id="firstname" type="text" name="firstname" /></li> 
      <li><label for="lastname">Last Name:</label><input id="lastname" type="text" name="lastname" /></li> 
      <li><label for="email">Email:</label><input id="email" type="text" name="email" /></li> 


      <li><label for="tastes">Message:</label><textarea name="tastes" cols="60" rows="2" id="tastes"></textarea></li> 
      <li><label for="register"></label><input id="register" type="button" value="Register" name="register" /></li> 

     </ul> 
     </form> 

    </div> 
    </body> 
    </html> 

register-feedback.php 

    <?php sleep(1); 

     echo "<h1>Welcome to Mike's!</h1>"; 
     echo "<p>Here's what you entered, " . $_REQUEST['firstname'] . ":</p>"; 
     echo "<p>Username: " . $_REQUEST['username'] . "</p>"; 
     echo "<p>Name: " . $_REQUEST['firstname'] . " " . $_REQUEST['lastname'] . "</p>"; 
     echo "<p>Email: " . $_REQUEST['email'] . "</p>"; 

     ?> 

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
      <title>Mike's Movies</title> 
      <link rel="stylesheet" href="css/movies.css" /> 
      <script src="scripts/utils.js" type="text/javascript"></script> 

     </head> 
     <body> 

     <input id="cancelm" type="button" value="back" name="cancelm" onclic=cancelUser()/> 
     <input id="sendm" type="button" value="send" name="sendm" /> 
     <div id="coverBar"> 

     </div> 
     </body> 
     </html> 
+0

你能張貼你到目前爲止試過嗎? –

+0

好的,謝謝! – Jona

+0

看看[jQuery Wizard](http://www.jquery-steps.com/),它可以幫助你實現你需要的東西 –

回答

0

這裏是你如何能做到這一點:

1)當用戶點擊「註冊」按鈕先得到所有用戶的詳細信息,並沒有提交,而是打開一個模式,並填寫用戶信息與數據在表格上輸入。

2)當用戶點擊「發送」時,您將傳遞特定數據上的數據並用ajax發送。

我推薦使用JQuery代替

0

沒有任何ajax和額外的後端。

按鈕應該是這樣的:

<input type="submit" id="btn-submit" value="Register"> 
<input type="submit" id="btn-edit" value="Edit" style="display: none;"> 
<input type="submit" id="btn-preview" value="Preview"> 

和JS如下:

<script type="text/javascript"> 
    document.addEventListener('DOMContentLoaded', function(){ 
     document.getElementById('btn-preview').addEventListener('click', showPreview); 
     document.getElementById('btn-edit').addEventListener('click', cleanPreview); 

     function cleanPreview() { 
      // Show preview button 
      document.getElementById('btn-preview').style.display = 'initial'; 
      // Hide edit button 
      document.getElementById('btn-edit').style.display = 'none'; 

      var previews = document.querySelectorAll('span[id^="view"]'); 
      for (var i = 0; i < inputs.length; i++) { 
       var el = inputs[i]; 
       el.remove(); 
      }    
      var inputs = document.querySelectorAll('input[type="hidden"]'); 
      for (var i = 0; i < inputs.length; i++) { 
       var el = inputs[i]; 
       el.setAttribute('type', 'text'); 
      } 
     } 

     function showPreview() { 
      // Hide preview button 
      document.getElementById('btn-preview').style.display = 'none'; 
      // Show edit button 
      document.getElementById('btn-edit').style.display = 'initial'; 

      // Displaying inputs preview 
      var inputs = document.querySelectorAll('input:not([type="submit"])'); 
      for (var i = 0; i < inputs.length; i++) { 
       makePreview(inputs[i]); 
      } 
     } 

     function makePreview(input) { 
      // Hide input 
      input.setAttribute('type', 'hidden'); 
      // Get value and name 
      var val = input.value; 
      var key = input.getAttribute('name'); 

      // Make span 
      var span = document.createElement('span'); 
      span.id = 'view-' + key; 
      span.innerText = val; 

      // Display preview 
      input.insertBefore(span) 
     } 
    }); 
</script> 
+0

謝謝你的迴應。但我想用Ajax和使用兩種形式。 – Jona