Question

我现在拥有的是一个表单和一个容器，它显示提交的数据，并且使用ajax请求进行提交而不刷新，显示数据的表单和容器位于同一页面上。

我尝试使用$("id").val();在表单中获取输入值并使用$('#display').html();

显示

但是我在表单中有很多输入字段，我不想复制粘贴jquery中的所有输入值，因为它看起来像是不专业和肮脏而且效率不高。

的javascript

$(document).ready(function(){
    $("#add_rec").click(function(e){
        var me = $(this);
        e.preventDefault();
        if ( me.data('requestRunning') ) {
            return;
        }
        var inputs = $("#u_rec_form").serialize();

        me.data('requestRunning', true);
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: inputs,
            success: function(data){
                    alert(data);

                },
                 complete: function() {
                    me.data('requestRunning', false);
                }
            });

        return false;

    });
});

HTML

<form id="u_rec_form">
        <div class="row">
          <div class="form-group col-xs-5 col-lg-7">
            <label for="code">Patient's Username</label>
            <input type="text" name="cust_username" placeholder="Username" class="form-control" />
          </div>
        </div>
        <div class="row">
          <div class="form-group col-xs-5 col-lg-7 ">
            <label for="code">Patient's Password</label>
            <input type="password" name="cust_password" placeholder="Password" class="form-control input-normal" />
          </div>
        </div>
         <div class="row">
          <div class="form-group col-xs-5 col-lg-7">
            <label for="code">Patient's First Name</label>
            <input type="text" name="cust_fname" placeholder="First name" class="form-control" />
          </div>
        </div>
         <div class="row">
          <div class="form-group col-xs-5 col-lg-7">
            <label for="code">Patient's Last Name</label>
            <input type="text" name="cust_lname" placeholder="Last name" class="form-control" />
          </div>
        </div>
         <div class="row">
          <div class="form-group col-xs-5 col-lg-7">
            <label for="code">Patient's Date of Birth</label>
            <input type="text" name="cust_age" placeholder="DD/MM/YYYY" class="form-control" />
          </div>
        </div>
        <div class="row">
            <input type="hidden" name="submitted" value="1">
            <button type="submit" id="add_rec" class="btn btn-default">Submit</button>
        </div>
    </form>

还有其他办法吗？

我有这些输入

<label for="code">First Name: <span id="view_<?php echo $row['id']?>"><?php echo $row['cust_fname']?></span></label><br><br>
<label for="code">Last Name: <span id="view_<?php echo $row['id']?>"><?php echo $row['cust_lname']?></span></label><br><br>
<label for="code">Age: <span id="view_<?php echo $row['id']?>"><?php echo $row['cust_age']?></span></label>

我试过用这个 $（＆＃39;输入＆＃39）。每一（功能（）{ var inputVal = $（this）.val（）; $（＆＃39;跨度＆＃39;）。追加（inputVal）; }）; 我将在每个标签中显示所有输入值，这不是我想要的

Answer 1

使用“.append（）”方法代替.html（）。

更新：

如果要获取输入的所有数据然后显示它，您可以迭代到每个输入字段然后显示它。首先在输入元素中添加一个类，以便它可以轻松编辑。

$('.input-class').each(function(){
      var inputVal = $(this).val();
      $('#display').append(inputVal);
})

如何在不使用ajax jquery刷新的情况下显示插入的查询数据

1 个答案: