2016-10-10 2 views
0

создать многофазную форму (мастер из), и я хочу, чтобы показать, на последнем шаг всей информацию в вводе тексте (вы можете изменить его), прежде чем подтвердитьМультифазного Form (мастер) показать всю информацию, прежде чем представить

я стараюсь много, но без какого-либо результата, как я могу это сделать?

Мой код

var fname, lname, age; 
 

 
function _(x) { 
 
    return document.getElementById(x); 
 
} 
 

 
function processPhase1(){ 
 
    fname = _("firstname").value; 
 
    lname = _("lastname").value; 
 
    if(fname.length > 2 && lname.length > 2){ 
 
     _("phase1").style.display = "none"; 
 
     _("phase2").style.display = "block"; 
 
    } 
 
    else {alert("Please Enter All Information");} 
 
} 
 

 
function processPhase2(){ 
 
    age = _("age").value; 
 
    if(age.length >= 1){ 
 
     _("phase2").style.display = "none"; 
 
     _("show_info").style.display = "block"; 
 
    } 
 
    else {alert("Please Enter All Information");} 
 
}
<body> 
 
    <div id="phase1"> 
 
    First Name : <input id="firstname" name="firstname"><br> 
 
    Last Name : <input id="lastname" name="lastname"><br> 
 
    <button onclick="processPhase1()">Next</button> 
 
    </div> 
 
    <div id="phase2"> 
 
    Age : <input id="age" name="age"><br> 
 
    <button onclick="processPhase2()">Next</button> 
 
    </div> 
 
    <div id="show_info"> 
 
    First Name : <input id="firstname" name="firstname" value = ""><br> 
 
    Last Name : <input id="lastname" name="lastname" value = ""><br> 
 
    Age : <input id="age" name="age" value = ""><br> 
 
    <button onclick="submit()">submit</button> 
 
    </div>

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

function processPhase2(){ 
 
    age = _("age").value; 
 
    if(age.length >= 1){ 
 
     _("phase2").style.display = "none"; 
 
     _("show_info").style.display = "block"; 
 
     _("display_fname").innerHTML = fname; 
 
     _("display_lname").innerHTML = lname; 
 
     _("display_age").innerHTML = age; 
 
    } 
 
    else {alert("Please Enter All Information");} 
 
}
<div id="show_info"> 
 
    First Name : <span id="display_fname"></span><br> 
 
    Last Name : <span id="display_lname"></span><br> 
 
    Age : <span id="display_age"></span><br> 
 
    <button onclick="submit()">submit</button> 
 
</div>

ответ

0

Я бы сделал это совершенно по-другому, но так вы бы сделали это на основе того, что вы уже написали. Когда вы щелкаете по следующей кнопке в каждой функции, вы хотите захватить это значение (fname, lname или age) и установить значение этого значения для последнего набора входов. Я изменил код немного и сделал вам JS BINhttp://jsbin.com/sopikuzuri/edit?html,output

В простых терминах

Каждый раз, когда вы вызываете новой функции фазы (processPhase1), вы хотите, чтобы захватить значения что пользователь только что ввел.

Затем вы хотите установить эти значения для правильного <input />

Итак, самый простой пример, который я могу дать это:
Ниже, пользователь будет вводить какие-то данные в поле. При нажатии на submit phase 1 button мы захватим ценность того, что они только что вошли и установить, что значение последнего ввод (для них, чтобы увидеть/редактировать)

<input type="text" id="firstName"/> 
<button id="submit">Submit Phase 1</button> 

<input type="text" id="displayInput"/> 
<script> 
    $("#submit").click(function() { 

      // getting the value of what the user typed in 
      var fname = $("#firstName").value; 

      // setting the value of the final box to the var above 
      $("#displayInput").val(fname); 

    }); 
</script> 
+0

Это работа отлично, но если вы можете объяснить, что и использовать простые слова, потому что я начинаю на английском языке – saadsaad

+0

@saadsaad Я только что переработал ответ – James

+0

Это очень хорошо, но у меня есть в моем коде (флажок, радио, выберите), как я могу показать это значение в своем коде. Я стараюсь без результата: '( – saadsaad

Смежные вопросы