CODEWITHSUNDEEP
javascript
Kauan
Kauan

Reputation: 20

Best way to get value of an button with JavaScript

I need to get the value of the value attribute of the button element and write this value into another modal.

I have a loop in my PHP which writes the following HTML:

<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="1">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="2">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="3">Confirm</button>

When I click on a button it shows a modal with two buttons, one to continue and one to cancel. I want store the value of the value attribute of the first button in the href attribute of the "continue" button in the second modal.

My modal:

<div class="modal-body">
    <div class="text-center">
        <div class="i-circle danger"><i class="fa fa-times"></i></div>
        <h4>Are you sure?!</h4>
        <p>If yes click on Continue!</p>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <a href="IWANTGETIDHERE">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Continue</button>
            </a>
        </div>
    </div>
</div>

Here is a demo of my modal.

Upvotes: 0

Views: 1027

Answers (3)

The Alpha
The Alpha

Reputation: 146191

You may try this, add a data-customId attribute and remove the value from all of your buttons:

<button data-customId="1" data-toggle="modal"  data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="2" data-toggle="modal"  data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="3" data-toggle="modal"  data-target="#mod-error" type="button" class="myclasses btn" >Confirm</button>

Also, add an id to your modal div like:

<div id='confirmAction' class="modal-body">
    <!-- Markup -->
</div>

Then register a handler for bootstrap show event:

$('#confirmAction').on('show.bs.modal', function (e) {
    $id = $(e.relatedTarget).attr('data-customId'); // Get the customId
    $(this).find('a:first').attr('href', $id);
});

Upvotes: 0

Tiago Barreto
Tiago Barreto

Reputation: 822

Using jQuery:

$(document).ready(function() {
    $('.btn').click(function() {
        alert($(this).attr("value"));
    });
});

Instead of alert, use:

$('.modal-footer a').attr("href", $(this).attr("value"));

See the JSFiddle

Using Pure Javascript

document.getElementById('btn').onclick = function() {
    document.getElementById('link').setAttribute('href', this.value);
}

See the JSFiddle

Upvotes: 3

VoronoiPotato
VoronoiPotato

Reputation: 3173

button = document.getElementById("buttonID");
button.onclick = function(){
document.getElementsByClassName("class")[0].href =  document.getElementById("buttonID").value
}

If you are looking for no dependancies.

Upvotes: 0

Related Questions