How can i get the from id on click of the saveData funtion button

Question

Using jQuery how can I get the form tag id on click of the button which is outside of the form called function saveData. i tried $(this).closeset('form').attr('id) gives me undefined. calling a function saveData I get undefined by the code above

<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Hero</h4>
            </div>
            <div class="modal-body">
                        **<form id="formHero" method="POST" action="http://127.0.0.1:8000/admin/heroes">**
            <input type="hidden" name="_token" value="STtrxWsLVCd1rvRnxI0suH59ZJwcrJD65jTNGvYV">            <div class="box-body">
                <div class="form-group">
    <label
    for="title"
>
    Title
</label>

    <label for="title"></label>
    <input class="form-control" name="title" id="title"
        required="required"
    >
</div>
                <div class="form-group">
    <label
    for="content"
>
    Content
</label>

    <textarea class="form-control"
              name="content"
        id="content"
        required
        required="required"
    >
    </textarea>
</div>
                <div class="form-group">
    <label
    for="image"
>
    Image
</label>

    <label for="image"></label>
    <input class="form-control" name="image" id="image"
        type="file" required="required"
    >
</div>
            </div>
        </form>
                </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Close</button>
                **<button type="button" class="btn btn-primary" onclick="saveData()">Save</button>**
            </div>
        </div>
        <!-- /.modal-content -->
    </div>

Answer 1

With closest() you get closest parent element (.modal-footer).

With prev() you get the previous element (.modal-body).

Then you need to find form in, so you can use find().

$(':button.btn-primary:contains("Save")').click(function() {
  let getPrevForm = $(this).closest('.modal-footer').prev('.modal-body').find('form').attr('id');
  console.log(getPrevForm);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Hero</h4>
            </div>
            <div class="modal-body">
                        **<form id="formHero" method="POST" action="http://127.0.0.1:8000/admin/heroes">**
            <input type="hidden" name="_token" value="STtrxWsLVCd1rvRnxI0suH59ZJwcrJD65jTNGvYV">            <div class="box-body">
                <div class="form-group">
    <label
    for="title"
>
    Title
</label>

    <label for="title"></label>
    <input class="form-control" name="title" id="title"
        required="required"
    >
</div>
                <div class="form-group">
    <label
    for="content"
>
    Content
</label>

    <textarea class="form-control"
              name="content"
        id="content"
        required
        required="required"
    >
    </textarea>
</div>
                <div class="form-group">
    <label
    for="image"
>
    Image
</label>

    <label for="image"></label>
    <input class="form-control" name="image" id="image"
        type="file" required="required"
    >
</div>
            </div>
        </form>
                </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Close</button>
                **<button type="button" class="btn btn-primary" onclick="saveData()">Save</button>**
            </div>
        </div>
        <!-- /.modal-content -->
    </div>