一起编辑输入字段，而不是单独编辑

editing input fields together instead of separately

本文关键字：编辑 单独 输入 字段 一起      更新时间：2023-09-26

当前场景：

现在我有一个表单，您可以在其中编辑和保存输入字段的每条记录。 即名字、姓氏、电子邮件等。我没有收到任何错误，一切正常。

要求：

现在我想一起保存和编辑firstName和lastName输入字段，而是分别编辑和保存firstName和lastName输入字段。现在它们都是不同的输入 ID。

问题：

如果我想同时使用按钮编辑它们，如何通过为firstName和lastName调用同一类来实现这一点？

这是一种方法吗？谢谢。。。

法典： 

$("#inputFirstName,#inputLastName,#inputEmailAddress,#inputPassword,#inputZipCode").on('keypress',function(e){
        if(e.which == 13) {
            var field = $(this).attr("id");
            var data = {};
            data['ajax']=true;
            data[$('#'+field).attr('name')]=$('#'+field).val();
            $.ajax({
                    method: "POST",
                    url: this.form.action,
                    data: data
                })
            .done(function( msg ) {
                if(msg['status']=='fail'){
                    $('#errormsg span').html(msg['msg']);
                    $('#errormsg').show();
                }
                if($('#'+field).attr('name')=='game_user_profile[userinfo][firstName]')  {
                    $('#userfirstname').text($('#'+field).val());
                }
                if($('#'+field).attr('name')=='game_user_profile[userinfo][lastName]')  {
                    $('#userlastname').text($('#'+field).val());
                }
            });
            $('#'+field+'-edit').show();
            $('#'+field+'-save').hide()
            $('#'+field).attr('disabled',true);
        }
    });
首先。

每次按键保存都是不好的，会耗尽您的服务器。我建议您在更改或提交按钮上使用

提交按钮是更好的解决方案。

让我们假设我们有这个 HTML：

<form id="updateForm">
    <input type="text" id="firstN" name="firstName" data-val="Ris" value="Ris">
    .
    .
    .
    <input type="button" value="submit" id="goBtn">
</form>

首先设置一个等于值的数据值然后在你的JavaScript中

$("#goBtn").click(function(){
    var data = {};
    data["ajax"] = true;
    $("#updateForm input").each(function(){
        var $this = $(this);
        var type = $this.attr('type');
        if(type != "button" && $this.val() != $this.attr("data-val"))
            data[$this.attr("name")] = $this.val();
    });
    if(data.length > 0){
             $.ajax({
                    method: "POST",
                    url: this.form.action,
                    data: data
                })
            .done(function( msg ) {
                if(msg['status']=='fail'){
                    $('#errormsg span').html(msg['msg']);
                    $('#errormsg').show();
                } else {
                    $.each(data, function(index, value){
                        $('updateForm input[name="'+index+'"]').attr("data-val", value);
                    });
                }
                // then do things
            });
    }
});

首先，它检查每个输入是否有更改(data-val保存原始值(，如果有任何更改，它就会将其添加到数据中，它调用 ajax，如果成功，它会更新每个更改值的data-val，否则它会将其留给另一个提交

相关文章：