CODEWITHSUNDEEP
javascriptjqueryhtml
nemo_87
nemo_87

Reputation: 4791

Using parent function in JavaScript

I'm trying to get value of a hidden input field, but I keep geting undefind value for ar variable. Does anyone see what I'm doing wrong, cause I'm stuck?

I use parent 3 times to get to the right div and after that I'm using find by class name.

This is my HTML:

<div class="heading"><span>Sanja Bajic</span><i>+</i></div>
<div class="details">
    <input type="hidden" name="id" class="idValue" value="2" /><ul class="form">
        <li>
            <label>Name:</label><input type="text" class="in-text" /></li>
        <li>
            <label>Hours per week:</label><input type="text" class="in-text" /></li>
    </ul>
    <ul class="form">
        <li>
            <label>Username:</label><input type="text" class="in-text" /></li>
        <li>
            <label>Email:</label><input type="text" class="in-text" /></li>
    </ul>
    <ul class="form last">
        <li>
            <label>Status:</label><span class="radio"><label for="inactive">Inactive:</label><input type="radio" value="1" name="status" id="Radio5" /></span><span class="radio"><label for="active">Active:</label><input type="radio" value="2" name="status" id="Radio6" /></span></li>
        <li>
            <label>Role:</label><span class="radio"><label for="admin">Admin:</label><input type="radio" value="1" name="status" id="Radio7" /></span><span class="radio"><label for="worker">Worker:</label><input type="radio" value="2" name="status" id="Radio8" /></span></li>
    </ul>
    <div class="buttons">
        <div class="inner"><a href="javascript:;" class="btn green">Save</a> <a href="javascript:;" onclick="DeleteMember();" class="btn red">Delete</a> <a href="javascript:;" class="btn orange">Reset Password</a></div>
    </div>
</div>

This is the script I use when I click on the delete link:

<script type="text/javascript">
        function DeleteMember() {
            var ar = $(this).parent().parent().parent().find('.idValue').val();
            $.ajax({
                type: "POST",
                url: 'team-members.aspx/DeleteTeamMember',
                data: JSON.stringify({ "ID": ar }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: fnsuccesscallback,
                error: fnerrorcallback,
            });
        }
            function fnsuccesscallback(data) {
                console.log(data);
                window.location.reload();
            }
            function fnerrorcallback(result) {
                console.log(result);
                alert(result.statusText);
            }
    </script>

What I'm doing wrong during assinging a value to ar variable?

Upvotes: 0

Views: 50

Answers (2)

haim770
haim770

Reputation: 49095

When your DeleteMember() function is invoked the this actually refer to window and not to the element being clicked because you're calling it using onclick="DeleteMember();".

Try this instead:

function DeleteMember(elm)
    {
    var ar = $(elm).parent().parent().parent().find('.idValue').val();

    //...
    }

And in your HTML:

onclick="DeleteMember(this);"

Upvotes: 1

Quentin
Quentin

Reputation: 943686

 onclick="DeleteMember();"

You aren't calling DeleteMember in the context of an object, so it is called in the context of window.

The onclick function will be called in the context of the element it appears on, and you can pass that explicitly:

 onclick="DeleteMember.call(this);"

It would be better to use JavaScript to bind your event handlers though.

Remove the onclick attribute and (since you are using jQuery) use on instead.

$(selector_that_matches_the_element).on('click', DeleteMember);

Also note that href="javascript:;" is a clear sign that you should be using a button, not a link, and that convention for JavaScript function names is that they should start with a lowercase letter unless they are constructor functions (i.e. intended to be called with the new keyword).

Upvotes: 2

Related Questions