选择具有多个ID的特定输入以将其解析为表单

时间:2018-11-14 19:04:10

标签: javascript jquery cordova hybrid-mobile-app

您好,其他开发人员

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

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

  1. 我正在尝试从服务器到界面显示15张图像供用户选择
  2. 我使用输入标签成功显示了具有唯一值和唯一ID的图像。结果是(输入id ='1'值='1')(它会根据在我的服务器上找到的图像数量而增加。)
  3. 这是我的死胡同... ,我意识到jQuery选择器只能专注于一个ID并赋值$(#ID).val(),但我试图实现的目标这是用户选择输入的图像,并通过AJAX调用记录了要解析的适当ID,并将其记录到我的服务器上。

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();
        }
    });   
}

1 个答案:

答案 0 :(得分:0)

您应为每个图像输入添加一个类,例如<input class='image-input' type='image' id=...(在所有图像输入上应具有相同的类名),然后在单击时使用以下脚本将变量设置为等于输入的ID:< / p>

<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请求中的数据之前,我会做一些输入验证,以确保您输入有效。