Question

我对jQuery有一个快速的问题，我被困在小问题上。我创建的表单基本上就是当你按下提交时它会显示价值下行。我想要实现的是使用前一个值和当前值创建块，并且只要输入更多值，它将向右移动。我不想使用任何插件

所以改为用户输入值

＆＃13;

//to display the name below
$('#btn').click(function() {
  $('#print').html($('#fname').val())
  $('#lname1').html($('#lname').val())
  $('#phone1').html($('#phone').val())
  $('#email1').html($('#email').val())
    // to print the value
  $('#lname').val("")
  $('#fname').val("")
  $('#phone').val("")
  $('#email').val("")
})

//validation check 
function checkforblank() {
    //  if(document.getElementById('fname').value ())
    if ($('#fname').val() == '') {
      // alert("please enter your first name");
      //document.getElementById('fname').style.borderColor= "red";

    }
    /* if ($('#lname').val() == ''){
          alert("please enter your last name");
          // breaking the action 
      }
          
           if ($('#phone').val() == ''){
          alert("please enter your Phone Number");
          // breaking the action 
      }
           if ($('#email').val() == ''){
          alert("please enter Email");
          // breaking the action 
     }*/
  } //closing function brackets

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Validation Form</h1>

<label>First Name:
  <input type="text" id="fname" name="fname">
</label>
<br>

<label>Last Name:
  <input type="text" id="lname" name="lname">
</label>
<br>

<label>Phone:
  <input type="text" id="phone" name="phone">
</label>
<br>

<label>Email:
  <input type="text" id="email" name="email">
</label>
<br>

<!-- dont forget to give the form id to connect-->
<button onClick="checkforblank()" id="btn">submit</button>

<div id="print"></div>
<div id="lname1"></div>
<div id="phone1"></div>
<div id="email1"></div>

＆＃13;

例如以前的值是等等。我的问题是你能用jquery来实现这个吗？

New Value : xyz             Previous value : danny
ax                                           texas
23                                           asdf
kj@gmail.com                                 asdf@gmail.com

我尝试了几个函数，如appendTo，prepend，clone但是我没有什么属性可以帮助我实现结果。

谢谢

Answer 1

作为一个简单的解决方案，您可以在此使用prepend而不是replace。 prepend()

html：创建一个div标记，这些详细信息将转移到

<div id ="foo"></div>

脚本：

$('#btn').click(function () {
    $("#foo").prepend($('#fname').val())
    $("#foo").prepend($('#lname').val())
    $("#foo").prepend($('#phone').val())
    $("#foo").prepend($('#email').val())
        //rest of your code..
})

Answer 2

创建了结果的基本模板，默认情况下会隐藏

一旦输入值，它就会克隆模板，当前值将附加到结果中，它将具有当前类

并且对于所有其他过去的值，我已删除当前并添加了过去的类。

为了造型目的，我使用了flex。 div.Results将有当前和过去的div，它将是flex-direction：row和current / past divs将具有列方向，并且我已使用order来确保默认情况下currentResults将首先显示以及所有其他过去的结果将遵循代码中的当前结果（检查changeOrder）功能

检查此代码段

//to display the name below
$('#btn').click(function() {
  var Results = $(".Results");
  var ResultDiv = Results.find('div.colFlex');
  var currTemplate = $(" .current");
  var pastTemplate;
  var order = 1;
  if (ResultDiv.length > 0) {


    order = order + 1;

    pastTemplate = currTemplate.clone();
    pastTemplate
    pastTemplate.find('.headerStatus').html("Past Values:");
    pastTemplate.find('.headerStatus').show();
    pastTemplate.removeClass('current');
    pastTemplate.addClass("past");
    pastTemplate.addClass('colFlex')
    pastTemplate.appendTo(Results);
  }


  Results.addClass('flexclass');


  currTemplate.find('#print').html($('#fname').val());
  currTemplate.find('#lname1').html($('#lname').val());
  currTemplate.find('#phone1').html($('#phone').val());
  currTemplate.find('#email1').html($('#email').val());
  currTemplate.addClass('colFlex');
  currTemplate.appendTo(Results);
  currTemplate.find('.headerStatus').show();
  // to print the value
  $('#lname').val("")
  $('#fname').val("")
  $('#phone').val("")
  $('#email').val("");
  changeOrders();
});

function changeOrders() {
    var Results = $(".Results");
    var colFlexDiv = Results.find('div.past');
    var length = colFlexDiv.length;

    $('.Results .current').addClass('order');
    for (var i = 0; i < length; i++) {
      $(colFlexDiv[i]).css({
        'order': i
      });
    }
  }
  //validation check 

function checkforblank() {
    //  if(document.getElementById('fname').value ())
    if ($('#fname').val() == '') {
      // alert("please enter your first name");
      //document.getElementById('fname').style.borderColor= "red";

    }
    /* if ($('#lname').val() == ''){
          alert("please enter your last name");
          // breaking the action 
      }
          
           if ($('#phone').val() == ''){
          alert("please enter your Phone Number");
          // breaking the action 
      }
           if ($('#email').val() == ''){
          alert("please enter Email");
          // breaking the action 
     }*/
  } //closing function brackets

.Results {
  display: none;
}
.flexclass {
  display: flex;
}
.colFlex {
  display: flex;
  flex-direction: column
}
.order {
  order: -1;
}
.headerStatus {
  color: blue;
  display: none;
}
.Results div.colFlex {
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Validation Form</h1>

<label>First Name:
  <input type="text" id="fname" name="fname">
</label>
<br>

<label>Last Name:
  <input type="text" id="lname" name="lname">
</label>
<br>

<label>Phone:
  <input type="text" id="phone" name="phone">
</label>
<br>

<label>Email:
  <input type="text" id="email" name="email">
</label>
<br>
<!-- dont forget to give the form id to connect-->
<button onClick="checkforblank()" id="btn">submit</button>
<div class="current">
  <label class="headerStatus">current values:</label>
  <div id="print"></div>
  <div id="lname1"></div>
  <div id="phone1"></div>
  <div id="email1"></div>
</div>
<div class="Results">

</div>

希望这有帮助

将前一个值与当前值一起浮动到jquery表单中

2 个答案: