Get select value by name attribute using jQuery

Question

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.

@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
– nemo_87, Commented Nov 26, 2014 at 9:42
take a look at my updated answer - i think this should do it. — low_rents
– low_rents, Commented Nov 26, 2014 at 10:13

low_rents · Accepted Answer · 2014-11-26 10:12:24Z

2

to get the value of your selected option you don't need such a complicated 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();

edited Nov 26, 2014 at 10:12

answered Nov 26, 2014 at 9:49

low_rents

4,4813 gold badges30 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rahul Singh Over a year ago

Its a repeater control, you will have multiple dropdown on page.

low_rents Over a year ago

@RahulSingh i am just answering his question: "Get select value by name attribute using jQuery"

nemo_87 Over a year ago

@northkildonan Yep that is working now. Just one more question if I may... How would you implement code if you have to select text instead of selecting value of option?

low_rents Over a year ago

@nemo_87 this would be close to what you have tried in your question: .find('select[name=ccountries] option:selected').text();

laruiss · Accepted Answer · 2014-11-26 09:50:45Z

1

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

edited Nov 26, 2014 at 9:50

answered Nov 26, 2014 at 9:45

laruiss

3,8261 gold badge21 silver badges29 bronze badges

1 Comment

nemo_87 Over a year ago

Thanks for answering and thanks for great advises you gave me in comments :) Still, even when I made this changes I get that same error. :(

Rahul Singh · Accepted Answer · 2014-11-26 10:29:51Z

1

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.

edited Nov 26, 2014 at 10:29

answered Nov 26, 2014 at 10:01

Rahul Singh

21.8k6 gold badges43 silver badges61 bronze badges

6 Comments

nemo_87 Over a year ago

Thanks for answering, unfortunately that didn't solve it... Don't know what the hell is wrong with it...:-/

Rahul Singh Over a year ago

@nemo_87 - How come rest values are populating properly and not country? There is not need to do multiple parent() just find the ParentDiv once and use it as a context. I tried your exact code and its working for me. Can you let me know what is error you are getting?

nemo_87 Over a year ago

That is weird to me too. Maybe it has something to do with the fact that the other controls are input hidden and input textboxes? The error says this: ""Message":"No parameterless constructor defined for type of \u0027" @RahulSingh

Rahul Singh Over a year ago

@nemo_87 - Nope other controls won't affect, as far as all the controls are present in details div, it will not be an issue. Have you tried exactly what i have given? Please comment rest and just put this code and alert out or write the output to console and check.

Rahul Singh Over a year ago

@nemo_87 - For that simply do $('select[name="ccountries"] option:selected', ParentDiv).text();

|

Collectives™ on Stack Overflow

Get select value by name attribute using jQuery

3 Answers 3

4 Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related