jquery selection problem

Question

On some View page I have two partial views (their html is the same). With first one work this script but with second not work .

<script type="text/javascript">
   $(document).ready(function() {

    $('input:radio').click(function() {

        var location = $("input:checked").val();
        var article_number = $("input[id=MArticleNumber]").val();

        $.post("/ImportXML/DevAccEditTempTable", { location: location, article_number: article_number }, function(data) {

            if ($("input[id='check']:checked").val() == 'a') {
                alert("page for new device")    
            }
            else {
                window.location.href = "/" + data.redirect;
            }
        },"json");
    });
});
</script>

Problem occurs when try to get article_number because I have two input boxes with some id (id=MArticleNumber). If change the second id to id=MArticleNumber1 then have two article numbers but I have to pass to action DevAccEditTempTable only one article number.

Answer 1

Firstly, you can use the much more short-hand call to get the value from an element with an id (* see explanation below):

var article_number = $("#MArticleNumber").val();

Secondly, it isn't valid to have to elements with the same id. The id MUST be unique as per the HTML specifications: www.w3.org

By making your id unique, your problem will go.

(*) Explanation of why you should use the # selector instead of the [id=...] selector in jQuery.

 $("#myElementId")

Using #id will result in a simple getElementById call, which is fast and simple. The id must be unique, so the type of element isn't relevant.

$("input[id=myElementId]")

To perform this lookup, you first get all input elements, then loop around to find a match based on the attribute search specified.