Select 具有多个 ID 的特定输入以解析为表单

Question

各位开发者大家好

我是一名学生，正在为一个学校项目使用 cordova 开发混合移动应用程序，我遇到了一个需要帮助的问题。

关于我的死胡同的背景信息。

我正在尝试从我的服务器向用户界面显示 15 张图像 select
我使用输入标签成功显示了具有唯一值和唯一 ID 的图像。结果是 (input id='1' value='1') （它将根据在我的服务器上找到的图像数量递增）。
这是我遇到的一个死结... 我意识到 jQuery selector 只能关注一个 ID 和值 $( #ID).val() 但我想在这里实现的是用户 select 图像输入和适当的 ID 被记录下来，通过对我的服务器的 AJAX 调用进行解析并记录到数据库.

function showAvatarResult(arr) {
    //if i is less than the total number of artefacts, increment by 1
    for (i = 0; i < arr.length; i++) {
        var avatarimage;
        var avatarid;
       
        avatarid = arr[i].avatarid;
        avatarimage = "<input type='image' id='" + avatarid +"' value='" + avatarid +"' src='" + serverURL() + "/images/avatars/" + arr[i].image + "' width=17%' height='17%'  />";


        
        $("#avatar").append(avatarimage);

    }
}

<form name="RegisterForm1" id="RegisterForm1">
<center>
<div id="avatar"></div>
</center>

</form>

function registerGroup() {
    username = $("#newusername").val();
    password = $("#newpassword").val();
    email = $("#emailaddress").val();
    school = $("#school").val();
    contactdetails = $("#contactdetails").val();
    groupname = $("#newgroupname").val();
    member1 = $("#member1").val();
    member2 = $("#member2").val();
    member3 = $("#member3").val();
    member4 = $("#member4").val();
    member5 = $("#member5").val();
    member6 = $("#member6").val();
    member7 = $("#member7").val();
    member8 = $("#member8").val();
    avatarid = //stuck here

    url = serverURL() + "/register.php"; 

    var JSONObject = {
        "username": username,
        "password": password,
        "email": email,
        "school": school,
        "phone": contactdetails,

        "groupname": groupname,
        "leader": member1,
        "member2": member2,
        "member3": member3,
        "member4": member4,
        "member5": member5,
        "member6": member6,
        "member7": member7,
        "member8": member8,
        "avatarid": //this is where I am stuck
    };

    $.ajax({
        url: url,
        type: 'GET',
        data: JSONObject,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (arr) {
            _getRegisterGroupResult(arr); 
        }, error: function () {
            validationMsg();
        }
    });   
}

Answer 1

您应该为每个图像输入添加一个 class，例如 <input class='image-input' type='image' id=...（这应该是所有图像输入上相同的 class 名称），然后使用以下脚本设置一个单击时等于输入 ID 的变量：

<script>

var selectedImageId;

$('.image-input').click(function(){
    selectedImageId = $(this).attr('id');
});

</script>

然后，在您的 registerGroup() 函数中，像这样访问变量：

...
member8 = $("#member8").val();
avatarid = selectedImageId;

url = serverURL() + "/register.php"; 
...

...
    "member8": member8,
    "avatarid": avatarid
};
...

我会做一些输入验证，以确保您在 AJAX 请求中发送数据之前输入有效。

Select 具有多个 ID 的特定输入以解析为表单

Select specific input with multiple ID to parse as form

javascript

jquery

cordova

hybrid-mobile-app