javascript - Get select value by name attribute using jQuery

I'm trying to get the selected value from menu into country variable, but I keep getting error: No parameterless constructor defined.

UpdateClient function gets invoke by clicking on the button Save.

I'm using parent() and find() functions to get that control, but I guess I'm using them on the wrong way.

This is my script:

function UpdateClient() {
    var ar = $(this).parent().parent().parent().find('.clientIdValue').val();
    var name = $(this).parent().parent().parent().find($('input[name=cname]')).val();
    var address = $(this).parent().parent().parent().find($('input[name=caddress]')).val();
    var zip = $(this).parent().parent().parent().find($('input[name=czip]')).val();
    var city = $(this).parent().parent().parent().find($('input[name=ccity]')).val();
    var country = $(this).parent().parent().parent().find($('select[name=ccountries] option:selected').text());

    $.ajax({
        type: "POST",
        url: 'clients.aspx/UpdateClient',
        data: JSON.stringify({ "ID": ar, "ClientName": name, "Address": address, "ZipCode": zip, "city": city, "Country": country}),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccessUpdate,
        error: OnErrorUpdate,
    });

    function OnSuccessUpdate(data) {
        window.location.reload();
    }

    function OnErrorUpdate(result) {
        console.log(result);
    }
}

And this is my HTML on aspx page:

<asp:Repeater ID="clientRepeat" runat="server">
    <ItemTemplate>
        <div class="item">
            <div class="heading">
                <span>
                    <asp:Label runat="server" ID="TeamMemberName" Text='<%#Eval("ClientName")%>'></asp:Label></span>
                <i>+</i>
            </div>
            <div class="details">
                <input type="hidden" name="clientID" class="clientIdValue" value="<%#Eval("ClientID")%>" />
                <ul class="form">
                    <li>
                        <label>Client name:</label>
                        <input type="text" class="in-text" name="cname" value="<%#Eval("ClientName") %>" />
                    </li>
                    <li>
                        <label>Zip/Postal code:</label>
                        <input type="text" class="in-text" name="czip" value="<%#Eval("ZipCode") %>" />
                    </li>
                </ul>
                <ul class="form">
                    <li>
                        <label>Address:</label>
                        <input type="text" class="in-text" name="caddress" value="<%#Eval("Address") %>" />
                    </li>
                    <li>
                        <label>Country:</label>
                        <select name="ccountries">
                            <option value="AF">Afghanistan</option>
                            <option value="AX">Aland Islands</option>
                            <option value="AL">Albania</option>
                            <option value="DZ">Algeria</option>
                            <option value="AS">American Samoa</option>
                            <option value="AD">Andorra</option>
                            <option value="AO">Angola</option>
                            <option value="AI">Anguilla</option>
                            <option value="AQ">Antarctica</option>
                            <option value="AG">Antigua and Barbuda</option>
                            <--...And all the others...-->
                        </select>
                    </li>
                </ul>
                <ul class="form last">
                    <li>
                        <label>City:</label>
                        <input type="text" class="in-text" name="ccity" value="<%#Eval("City") %>" />
                    </li>
                </ul>
                <div class="buttons">
                    <div class="inner">
                        <button class="btn green" onclick="UpdateClient.call(this);">Save</button>
                        <button class="btn red" onclick="DeleteClient.call(this);">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

What I'm doing wrong with selecting selected option? Is that even right way to do it? All other variables get right values from textboxes.

I'm trying to get the selected value from menu into country variable, but I keep getting error: No parameterless constructor defined.

UpdateClient function gets invoke by clicking on the button Save.

I'm using parent() and find() functions to get that control, but I guess I'm using them on the wrong way.

This is my script:

function UpdateClient() {
    var ar = $(this).parent().parent().parent().find('.clientIdValue').val();
    var name = $(this).parent().parent().parent().find($('input[name=cname]')).val();
    var address = $(this).parent().parent().parent().find($('input[name=caddress]')).val();
    var zip = $(this).parent().parent().parent().find($('input[name=czip]')).val();
    var city = $(this).parent().parent().parent().find($('input[name=ccity]')).val();
    var country = $(this).parent().parent().parent().find($('select[name=ccountries] option:selected').text());

    $.ajax({
        type: "POST",
        url: 'clients.aspx/UpdateClient',
        data: JSON.stringify({ "ID": ar, "ClientName": name, "Address": address, "ZipCode": zip, "city": city, "Country": country}),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccessUpdate,
        error: OnErrorUpdate,
    });

    function OnSuccessUpdate(data) {
        window.location.reload();
    }

    function OnErrorUpdate(result) {
        console.log(result);
    }
}

And this is my HTML on aspx page:

<asp:Repeater ID="clientRepeat" runat="server">
    <ItemTemplate>
        <div class="item">
            <div class="heading">
                <span>
                    <asp:Label runat="server" ID="TeamMemberName" Text='<%#Eval("ClientName")%>'></asp:Label></span>
                <i>+</i>
            </div>
            <div class="details">
                <input type="hidden" name="clientID" class="clientIdValue" value="<%#Eval("ClientID")%>" />
                <ul class="form">
                    <li>
                        <label>Client name:</label>
                        <input type="text" class="in-text" name="cname" value="<%#Eval("ClientName") %>" />
                    </li>
                    <li>
                        <label>Zip/Postal code:</label>
                        <input type="text" class="in-text" name="czip" value="<%#Eval("ZipCode") %>" />
                    </li>
                </ul>
                <ul class="form">
                    <li>
                        <label>Address:</label>
                        <input type="text" class="in-text" name="caddress" value="<%#Eval("Address") %>" />
                    </li>
                    <li>
                        <label>Country:</label>
                        <select name="ccountries">
                            <option value="AF">Afghanistan</option>
                            <option value="AX">Aland Islands</option>
                            <option value="AL">Albania</option>
                            <option value="DZ">Algeria</option>
                            <option value="AS">American Samoa</option>
                            <option value="AD">Andorra</option>
                            <option value="AO">Angola</option>
                            <option value="AI">Anguilla</option>
                            <option value="AQ">Antarctica</option>
                            <option value="AG">Antigua and Barbuda</option>
                            <--...And all the others...-->
                        </select>
                    </li>
                </ul>
                <ul class="form last">
                    <li>
                        <label>City:</label>
                        <input type="text" class="in-text" name="ccity" value="<%#Eval("City") %>" />
                    </li>
                </ul>
                <div class="buttons">
                    <div class="inner">
                        <button class="btn green" onclick="UpdateClient.call(this);">Save</button>
                        <button class="btn red" onclick="DeleteClient.call(this);">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

What I'm doing wrong with selecting selected option? Is that even right way to do it? All other variables get right values from textboxes.

Share Improve this question asked Nov 26, 2014 at 9:30 nemo_87 4,82116 gold badges65 silver badges104 bronze badges

2 FYI: Read about .closest(). – George Commented Nov 26, 2014 at 9:33
@George Thanks, I just did. And I will try to implement it, but is this format ok: $('select[name=ccountries] option:selected').text() Can I get selected value like that? – nemo_87 Commented Nov 26, 2014 at 9:42
take a look at my updated answer - i think this should do it. – low_rents Commented Nov 26, 2014 at 10:13

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

to get the value of your selected option you don't need such a plicated selector in jquery, plus .text() is not the right function to get the value:

$('select[name=ccountries]').val();

is enough.

update:
I don't know anything about ASP, but in your context this would be:

var country = $(this).parent().parent().parent().find('select[name=ccountries]').val();

I would do this:

function updateClient() {
    // Store the parent in a variable to avoid calling so many functions
    // var $parent = $(this).parent().parent().parent(); // This is not ideal, as your HTML markup could change
    // You already have a class for this, so use it!
    var $parent = $(this).parents('.item').eq(0).find('.details');
    var ar = $parent.find('.clientIdValue').val();
    var name = $parent.find($('input[name=cname]')).val();
    var address = $parent.find($('input[name=caddress]')).val();
    var zip = $parent.find($('input[name=czip]')).val();
    var city = $parent.find($('input[name=ccity]')).val();
    var country = $parent.find($('select[name=ccountries]').val());

    $.ajax({
        type: "POST",
        url: 'clients.aspx/UpdateClient',
        data: JSON.stringify({ "ID": ar, "ClientName": name, "Address": address, "ZipCode": zip, "city": city, "Country": country}),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).then(onSuccessUpdate) // Use promise-like feature of $.ajax
    .fail(onErrorUpdate); // Use promise-like feature of $.ajax

     // Keep uppercase for functions that are designed to be called as constructors
    function onSuccessUpdate(data) {
        window.location.reload();
    }

    function onErrorUpdate(result) {
        console.log(result);
    }
}

Try this:-

var ParentDiv = $(this).parents('.details')[0];
var country = $('select[name="ccountries"]', ParentDiv).val();

Similarily, you can find other values using this Parent Context:-

var ar = $('.clientIdValue',ParentDiv).val();
var name=$('input[name=cname]',ParentDiv).val();

--and so on..

Since Its a repeater control, Each Item will repeat itself for different items, so we need to find the ParentDiv i.e. the context in which the button was clicked and find the dropdown value present in the same context. So here we are first findind the enclosing Div which holds both Save button & dropdown in that context. After finding ParentDiv just search fro that dropdown in that context.

Please note you need to use select and not input for dropdown.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Get select value by name attribute using jQuery - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)