CODEWITHSUNDEEP
jqueryhtml
charlie
charlie

Reputation: 481

Get parent divs ID using divs class

I have html code like the below

<div class="box box-default signup_box" id="signup_company">
            <div class="box-header with-border">
                <h4 class="box-title">Company Details</h4>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="form-group">
                    <label class="col-sm-3 control-label">Company Name</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control required" />
                    </div><!-- /.col -->
                    </div><!-- /.form-group -->
                </div><!-- /.row -->

                <div class="row">
                <section class="col-md-12">
                    <div class="box-footer">
                        <a href="javascript:void(0);" class="fusion-button button-flat fusion-button-pill button-large button-default button-1 pull-right" onclick="changeBoxDisplay('signup_financial');">Next</a>
                    </div><!-- /.box-footer -->
                </section><!--/ .col -->
                </div><!--/ .row -->
            </div><!-- /.box-body -->
            </div><!-- /.box -->

<div class="box box-default signup_box" id="signup_contact">
            <div class="box-header with-border">
                <h4 class="box-title">Contact Details</h4>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="form-group">
                    <label class="col-sm-3 control-label">Company Name</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control required" />
                    </div><!-- /.col -->
                    </div><!-- /.form-group -->
                </div><!-- /.row -->

                <div class="row">
                <section class="col-md-12">
                    <div class="box-footer">
                        <a href="javascript:void(0);" class="fusion-button button-flat fusion-button-pill button-large button-default button-1 pull-right" onclick="changeBoxDisplay('signup_financial');">Next</a>
                    </div><!-- /.box-footer -->
                </section><!--/ .col -->
                </div><!--/ .row -->
            </div><!-- /.box-body -->
            </div><!-- /.box -->

When the Next / Back buttons are pressed, i am calling a function where i want to get the ID of the parent .signup_box

I tried the following code, but that is returning the id of the div below rather than the parent

$("#" + name).closesr('.signup_box').attr('id')

jQuery function:

function changeBoxDisplay(name) {
    console.log( $("#" + name).find('.signup_box').attr('id') );
    var inputs = $("#" + current).find('.required');
    inputs.each(function() {
        //console.log($(this).val());
    });

    $(".signup_box").fadeOut();
    $("#" + name).fadeIn();
}

Upvotes: 0

Views: 132

Answers (2)

David Shack
David Shack

Reputation: 131

You can always use the .parents(selector) function which will get a list of all parents that match the selector. I would recommend adding a class to your buttons that will trigger the event, rather than using onclick. In my example I used "next" as my trigger class.

$('a.next').on('click', function(){

    var signupBox = $(this).parents('.signup_box').first(),
        signupBoxID = signupBox.attr('id');

    ...
});

Hopefully this helps! :)

Edit: I'm assuming you are making something along the lines of a wizard. An extra bit of advice, to show the next 'box' use signupBox.next() to grab the next sibling and signupBox.prev() to grab the previous.

Upvotes: 0

Sindhu
Sindhu

Reputation: 100

I didn't put much work just made a simple fiddle https://jsfiddle.net/udr4zepm/

var parent = $('#companyName').closest('.signup_box').attr("id");

Upvotes: 1

Related Questions