Develop Reference

Get the sum of two span value

Is it possible to get the sum of a text box and a span? I've tried calling the class name of the span but when I tried to alert it. It just says Undefined. Is it possible if I sum span 1 and span 2 it will change the data of span 2 ? ex is Span1 (Additional Price) + Span2(BasePrice)? Or should I just create a 3rd span where the base price will be stored? thank you in advance
https://jsfiddle.net/k5zh9m4d/3/
<section class="py-5">
<br><br>
<div class="container">
<h1 class="display-4">Menu</h1>
<br><br>
<div class="row">
<div class="col-6">
<img src="" class="img-fluid" alt="Sample milk tea">
</div>
<div class="col">
<h3>Item 1</h3>
<p>Item Desc</p>
<hr>
<h4>
<button
type="button"
class="btn btn-secondary btn-lg"
disabled>
<i
class="fa fa-glass fa-lg"
aria-hidden="true">
</i>70.00
</button>
</h4>
<br>
<hr>
<button
type="button"
class="btn btn-outline-danger btn-lg"
data-toggle="modal"
data-target="#MLKT-001">
<i
class="fa fa-cart-plus"
aria-hidden="true">
</i>
Order
</button>
</div>
</div>
<br><br>
<div class="row">
<div class="col-6">
<img src="" class="img-fluid" alt="Sample milk tea">
</div>
<div class="col">
<h3>Item 2</h3>
<p>Item Desc 2</p>
<hr>
<h4>
<button
type="button"
class="btn btn-secondary btn-lg"
disabled>
<i
class="fa fa-glass fa-lg"
aria-hidden="true">
</i>70.00
</button>
</h4>
<br>
<hr>
<button
type="button"
class="btn btn-outline-danger btn-lg"
data-toggle="modal"
data-target="#MLKT-002">
<i
class="fa fa-cart-plus"
aria-hidden="true">
</i>
Order
</button>
</div>
</div>
<!-- Modal -->
<div
class="modal fade"
id="MLKT-001"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="#" id="orderform">
<div class="modal-body">
<b>Size</b> <small>Pick 1</small>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="radiobutton"
id="rbtn1"
value="0.00">
<label class="form-check-label" for="exampleRadios1">
Regular - PHP 0.00
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="radiobutton"
id="rbtn2"
value="10.00">
<label class="form-check-label" for="exampleRadios1">
Regular - PHP 10.00
</label>
</div>
<p>Total: PHP <span id="total" class="total">0</span></p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal">
Cancel
</button>
<button
type="button"
class="btn btn-success">
Order now -
<span>PHP 70.00</span>
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal -->
<div
class="modal fade"
id="MLKT-002"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="#" id="orderform">
<div class="modal-body">
<b>Size</b> <small>Pick 1</small>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="radiobutton"
id="rbtn1"
value="0.00">
<label class="form-check-label" for="exampleRadios1">
Regular - PHP 0.00
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="radiobutton"
id="rbtn2"
value="10.00">
<label class="form-check-label" for="exampleRadios1">
Large - PHP 10.00
</label>
</div>
<p>Total: PHP <span id="total" class="total">0</span></p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal">
Cancel
</button>
<button
type="button"
class="btn btn-success">
Order now -
<span class="baseprice">PHP 80.00</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
\\script
<script>
$(":radio").on("change", function(){
$(this).closest('form').find('.total').text(Number(this.value));
var addprice = document.querySelector('.total').value;
var basepirce = document.querySelector('.basepirce').value;
var totalprice = Number(addprice) + Number(basepirce)
$(".basepirce").text(totalprice);
});
</script>

first of all, you have mistakes in your html layout. <label> shouldn't go into the <input> here for more info.
Second of, using .value to extract text from span will not work, because it only works with inputs, selects or textarea here. Try using another method to get value out of span. And there is also no class named '.basepirce'.

Try to use the correct selector and value in the radio button instead of text .
Did some changes in your fiddle and it is working , you may check the following
https://jsfiddle.net/mfb08h2L/2/
> var addprice = $(this).val(); var basepirce = $(".basepirce").text()
> var totalprice = Number(addprice) + Number(basepirce)
> $(".basepirce").text(totalprice);

Update select input text from dropdown in modal?

I have a sample modal with two components dropdown and input text
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Test Modal</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<select id="inputState" class="form-control">
<option value="john">Person 1</option>
<option value="adam">Person 2</option>
<option value="marcus">Person 3</option>
<option value="anthony">Person 4</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
Whenever the dropdown is changed, I want to put dropdown value to text field.
Ex:
If person 2 is selected its value adam should be in the text field.

You just need to listen for changes in the value of the dropdown and fill it in the textarea:
$( document ).ready(function(){
$('#inputState').on('change', function(){
$('#message-text').val($('#inputState').val())
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Test Modal</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<select id="inputState" class="form-control">
<option value="john">Person 1</option>
<option value="adam">Person 2</option>
<option value="marcus">Person 3</option>
<option value="anthony">Person 4</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>

Bootstrap 4 modal not loading only giving faded screen

I am trying to load a bootstrap modal on a button click.
Already I am have one more Modal in the page which is working fine but on the button click but when I am trying to load another modal on a button click, its just loading faded screen.
<button class="btn btn-green btn-sm" data-toggle="modal" data-target="#addUserModal"><i class="fa fa-plus"></i> <span>Add User</span></button>
<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">Add User</h6>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form action="" method="POST">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">User ID</span>
</div>
<input type="text" class="form-control" id="user_id" value="{{user.UserID}}">
</div>
<div class="input-group mb-3">
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>

Could it be that there is a mistake in your -tags? That may cause an error in your modal-body.
<div class="modal-body">
<form action="" method="POST">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">User ID</span>
</div>
<input type="text" class="form-control" id="user_id" value="{{user.UserID}}">
</div>
//removed orphan tag
</form>
</div>
When removed, the modal works fine.

The code you posted is working fine
Codepen Link
Make sure you have added the jquery, popper.js.

How do I pass button value to modal popup view?

I have a dynamic table, and in the button value I store value of each id.
I want to pass my button value to a modal popup view and do a database query in the backend. I will do that via node.js and EJS template. I know I can probably do this via using jQuery, but I don't know the details.
The <%= ProInfoList[j].Id %> is my node.js loop to get each data id.
This is button code to trigger modal view:
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
value="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
I would like to use a hidden form field to achieve my goal, but it didn't work.
The form action="/delProInfo/del" is my backend node.js function.
This is my modal code:
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>

This may help.
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
title="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
Add a attributes name as title and assign id into title attribute
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" class="hiddenValue" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
</div>
</div>
</div>
When you will click on dropbtn button then you can get attribute name as title and set this value into hidden input type.
<script type="text/javascript">
$(document).ready(function(){
$('.dropbtn').click(function(){
var title = $('.dropbtn').attr('title')
$('.hiddenValue').val(title);
})
})
</script>

Bootstrap Modal - Pass data into Modal using Javascript

I want to pass select/drop-down data into the bootstrap modal with use of java-script. I am using the modal as confirmation message.
My Select/Drop-down is,
<select class="form-control" id="project" name="project_id">
<option value="1"> ABCD </option>
<option value="2"> EFGH </option>
<option value="3"> IJKL </option>
<option selected="selected" value="#">Please Select</option>
</select>
and I am calling the Bootstrap Modal using javascript as below,
$('#project').change(function(){
var e = document.getElementById("project");
var p_id = e.options[e.selectedIndex].value;
var p_name = e.options[e.selectedIndex].text;
$('#myModal').modal('show');
});
The Bootstrap Modal is as below,
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body modal-mt-hgt">
<form action="" method="post">
<p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p>
Enter Your Comment : <textarea rows="3"></textarea>
<input type="hidden" name="country" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add Task</button>
</div>
<?= form_close(); ?>
</div>
</div>
</div>
What I want to do is pass/show var p_id into the hidden field and show var p_name in side the <b id="p_name"></b> of the modal.
Further p_id, p_name can get when user selects any option from the Select/Drop-down using the javascript function above and Only thing I need to do is how to show Project Name on the Modal and assign p_id into the hidden field of the Modal
Best regards

I'm pretty new to all of this so this probably isn't the best solution, but it's a solution.
$('#project').on('change', function() {
var p_id = $(this).val();
var p_name = $(this).find(':selected').text();
$('#myModal').on('show.bs.modal', function ()
{
$(this).find('#p_name').text(p_name);
$(this).find('#p_id').val(p_id);
});
$('#myModal').modal('show');
});
You'll need to add a class or ID to the hidden field so it can be identified. Above I've given it an ID of p_id.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body modal-mt-hgt">
<form action="" method="post">
<p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p>
Enter Your Comment : <textarea rows="3"></textarea>
<input type="hidden" id="p_id" name="country" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add Task</button>
</div>
<?= form_close(); ?>
</div>
</div>
</div>
I think it's all self explanatory but if not, we add the check to see when the project Dropdown changes, we then assign the value and text of the selected item using the $(this) variable to state that it's within the #project drop down ID.
Next up, we add a listener to see when the modal gets shown, from there we can then manipulate the modal how we want. In this example we set the p_name text and set the value of p_id.