We Keep Coding

Problems updating bootstrap 4 model

I'm developing an app in Spring Boot with JSP in frontend. I have the following problem:
I have a table with different rows. I can click a button to update every row if I want. When I click in one row and change some data all works fine. The problem is when I click in one row, close or save this modal and following I open another row and edit again. The modal is good but when I save, I receive 2 POST to update the row behind and the actually row.
I don't use nothing strange... Probably I need to "clean" the modal when I close or save?
One of my modals (this happends in all table with modal to update the row)
Html/JSP:
<!-- UPDATE DISP MODAL -->
<div id="updateDispModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form id="updateDispForm" class="needs-validation">
<div class="modal-header">
<div class="modal-title">
<h5 id="modalTitle">
<spring:message code="shares.displacement.update.btn" />
</h5>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="activityCenter" class="col-form-label"><spring:message code="shares.displacement.table.activity.center" /></label>
<select id="activityCenter" name="activityCenter" class="form-control" required>
<option disabled selected="selected">
<spring:message code="shares.displacement.table.activity.center" />
</option>
<c:forEach items="${teamLeaders}" var="teamLeader">
<option value="${teamLeader.userId}">
<spring:message code="${teamLeader.name} ${teamLeader.surnames}" />
</option>
</c:forEach>
</select>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="displacementDate" class="col-form-label"><spring:message code="shares.displacement.table.total.time" /></label>
<input id="displacementDate" name="displacementDate" type="datetime-local" class="form-control" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="manualHours" class="col-form-label"><spring:message code="shares.displacement.total.time" /></label>
<input type="time" class="form-control" id="manualHours" name="manualHours">
</div>
<div class="col-sm-12 col-md-6">
<label for="roundTrip" class="col-form-label"><spring:message code="shares.displacement.round.trip" /></label>
<input type="checkbox" class="form-control" id="roundTrip" name="roundTrip" style="width: 20px">
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="observations" class="col-form-label"><spring:message code="shares.displacement.observations" /></label>
<textarea id="observations" name="observations" class="form-control" rows="6"></textarea>
</div>
</div>
</div>
<input type="hidden" class="form-control" id="projectId" name="projectId">
</div>
<div class="modal-footer clearfix">
<div class="w-100">
<div class="float-left">
<button type="button" class="btn btn-sm" data-dismiss="modal"><spring:message code="cerrar" /></button>
</div>
<div class="float-right">
<button id="updateDispBtn" type="button" class="btn btn-sm btn-success"><spring:message code="save" /></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /CREATE MODAL -->
JavaScript:
$('#updateDispBtn').click(function () {
$.ajax({
type: "PUT",
url: "/shares/displacement/" + id,
data: $('#updateDispForm').serialize(),
success: function(msg) {
$('#dTableSignings').DataTable().ajax.reload();
showNotify(msg, 'success');
},
error: function(e) {
showNotify(e.responseText, 'danger');
}
});
$('#updateDispModal').modal('hide');
});

Finally, the user Swati help me to solve this problem. I need to unbind the button before clicking event: button onclick function firing twice
Thanks!

span onClick JQuery change text

I'm trying to get a value from the database: SenderDriver->total_trips.
And all great, but I want to get a specific id so I have to put it into onClick(), then it set the value from the database variable: SenderDriver->total_trips.
This is the code
<span onclick="readd( amounts{{$referral_detail->SenderDriver->total_trips}});"
data-target="#addMoneyModel" data-toggle="modal" id="{{$referral_detail->GetterDriver->id }}">
<a data-original-title="Add Money" data-toggle="tooltip" id="{{ $referral_detail->GetterDriver->id }}" data-placement="top" class="btn text-white btn-sm btn-success menu-icon btn_detail action_btn">
<i class="fa fa-money-bill"></i>
</a>
</span>
Now I want the val to change a specific text when it's clicked using the above code. Btw all this is in .blade.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
function readd(){
$("input:text").val(amounts);
}
</script>
I tried a lot nothing working any help?
The input
<div class="modal fade text-left" id="addMoneyModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title text-text-bold-600" id="myModalLabel33">#lang('admin.message200')</label>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('merchant.AddMoney') }}" method="post">
#csrf
<div class="modal-body">
<label>#lang('admin.message203'): </label>
<div class="form-group">
<select class="form-control" name="payment_method" id="payment_method" required>
<option value="1">#lang('admin.message201')</option>
<option value="2">#lang('admin.message202')</option>
</select>
</div>
<label>#lang('admin.message204'): </label>
<div class="form-group">
<input type="text" name="receipt_number" value="0"
class="form-control" required>
</div>
<label>#lang('admin.message205'): </label>
<div class="form-group">
<input type="text" id="amount" name="amount"
class="form-control" required>
<input type="hidden" name="add_money_driver_id" id="add_money_driver_id">
</div>
<label>#lang('admin.message206'): </label>
<div class="form-group">
<input class="form-control" id="title1" rows="3" name="description"
value="Refer Gift">
</div>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Add">
</div>
</form>
</div>
</div>
</div>

Not 100% sure what you're trying to accomplish, but here are my thoughts anyway.
In your onclick implementation you provide an argument to the function readd, which you're not using/defining in your javascript code at the bottom.
It appears that you try to push the value into the input text field of your bootstrap modal with the id="amount"
Here is the improved JavaScript section:
<script type="text/javascript">
function readd(amount){
$("#amount").val(amounts);
}
</script>
I'm not sure if the bootstrap toggle possibly overrides the onclick event of the span element. If that's the case you need to approach that issue a bit different
<script type="text/javascript">
function readd(amount){
$("#amount").val(amounts);
// Do something with the id
const some_important_id = $(this).attr('data-id');
console.log(some_important_id);
$('#addMoneyModel').modal('show');
}
</script>
and remove the modal stuff from your Span element.
<span onclick="readd( {{$referral_detail->SenderDriver->total_trips}});" data-id="{{$referral_detail->GetterDriver->id }}">

Post modal form values to a PHP file

I have a form in a modal. When I press the submit button the php file runs with the following errors:
Notice: Undefined index: phone1 in C:\xampp\htdocs\site\bank.php on line 2
Notice: Undefined index: charge1 in C:\xampp\htdocs\site\bank.php on line 4
Here is the PHP code in bank.php:
<?php
echo $_POST["phone"];
echo "</br>";
echo $_POST["charge"];
?>
Here is the modal contents:
<!-- Modal content-->
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal title here</h4>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" method="POST" action="bank.php">
<div class="form-group col-md-12">
<div class="form-group">
<div class="col-xs-6" style="float:right;">
<label>phone numer:</label>
<input id="phone" type="text" class="form-control" name="phone" value="pre filled value" disabled/>
<span id='display'></span>
</div>
<div class="col-xs-6" style="float:left;">
<label>charge:</label>
<input style="font-size:17px; font-weight:bold;" id="charge" type="text" class="form-control" name="charge" value="some other prefilled value" disabled/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-danger btn-default pull-right" data- dismiss="modal" style="margin-left:10px;">close</button>
<button type="submit" class="btn btn-success"> submit </button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
I would be thankful if some one help me figure out what;s wrong with this

Not relevant anymore, OP edited his question. see edit for relevant answer!
the name of the post variable is defined by the nameattribute of the input, not the id.
therefore in your bank.php you will have $_POST['phone1'] and $_POST['charge1']available.
you can always just var_dump($_POST); to see all available post variables.
Edit: Also, disabled inputs are not being sent on submit. You can work around that fact by just adding a second hidden input for each disabled one like that:
<!-- Modal content-->
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal title here</h4>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" method="POST" action="bank.php">
<div class="form-group col-md-12">
<div class="form-group">
<div class="col-xs-6" style="float:right;">
<label>phone numer:</label>
<input id="phoneDisabled" type="text" class="form-control" name="phoneDisabled" value="pre filled value" disabled/>
<input id="phone" type="hidden" class="form-control" name="phone" value="pre filled value" disabled/>
<span id='display'></span>
</div>
<div class="col-xs-6" style="float:left;">
<label>charge:</label>
<input style="font-size:17px; font-weight:bold;" id="chargeDisabled" type="text" class="form-control" name="chargeDisabled" value="some other prefilled value" disabled/>
<input style="font-size:17px; font-weight:bold;" id="charge" type="hidden" class="form-control" name="charge" value="some other prefilled value" disabled/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-danger btn-default pull-right" data- dismiss="modal" style="margin-left:10px;">close</button>
<button type="submit" class="btn btn-success"> submit </button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
Edit2: Or, just change disabled attribute to readonly

The name in your $_POST variable and the html input name are both different. Please try to make them the same and hopefully, your code will work.
Change name=phone1 to name=phone or whatever.

You have set both of those inputs as disabled. Forms by default won't post those. You probably need to grab the vars with JavaScript, or remove the disabled attributes, again, with JavaScript.

Why is my modal not popping up in the page?

I have a modal which is supposed to pop up when I click the button. However, when I click the button; nothing happens:
Heres what I did:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class = "row text-center">
<input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save">
<input class="btn btn-danger" id="reset-button" type="reset" value="Reset">
<div class="well well-large">
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add transaction</h3>
</div>
<div class="modal-body">
<form class="transaction" name="transaction">
<input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br>
<label class="label" for="trans_payment_mode">Payment mode</label><br>
<select class="form-control" name="trans_payment_mode" id="payment_mode" class="required">
<option value="">Select</option>
<option value="cash">Cash</option>
</select><br>
<label class="label" for="trans_amt">Transaction amount</label><br>
<input type="text" name="trans_amt" class="input-xlarge"><br>
<label class="label" for="trans_details">Transaction details</label><br>
<textarea name="trans_details" class="input-xlarge"></textarea>
<input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br>
<input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send" id="submit_trans">
Cancel
</div>
</div>
</div>
<div id="thanks">
<p><a data-toggle="modal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
</div>
</div>
</body>
I have the above modal containing add-transaction which will populate a modal. Please help.

CSS needs a bit work but you are missing a data_target class in your button. Add a div with an id and another div with the class modal-dialog.
Also change the line
<div id="form-content" class="modal hide fade in" style="display: none;">
to
<div id="modal-content">
Other code changes
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
...
<p><a data-toggle="modal" data-target="#myModal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
You can see it in the fiddle below
https://jsfiddle.net/4peLpye5/1/
EDIT - There is no php in the JSFiddle

It's a combination of a few issues.
No need for the hide class on the modal
No need for the display:none style on the modal
Missing id of add-transaction on the modal

bootstrap3 modal js undefined function

I have a regular bootstrap-modal in HTML. I'm trying to show/hide it with javascript and i get undefined function.
I'm doing as the bootstrap documentation says, still i get undefined function on this row:
$("#registermodal").modal('show');
This is my HTML modal:
<div class="modal fade" id="registermodal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="registerDevice">Klargjøring</h4>
</div>
<div class="modal-body">
<div id="registerContent" class="form-group">
<form class="form-horizontal">
<div class="form-group">
<label for="Enhetsnavn" class="col-lg-4 control-label">UUID</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="uuid" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleID1" class="col-lg-4 control-label">Apple-ID #1</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleID1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleIDPassword1" class="col-lg-4 control-label">Apple-ID Password #1</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleIDPassword1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleID2" class="col-lg-4 control-label">Apple-ID #2</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleID2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleIDPassword2" class="col-lg-4 control-label">Apple-ID Password #2</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleIDPassword2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="SIMpin" class="col-lg-4 control-label">SIM-PIN</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="SIMpin" placeholder="">
</div>
</div>
<div class="form-group">
<label for="losekod" class="col-lg-4 control-label">Låsekod</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="losekod" placeholder="">
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Lokation</label>
<div class="col-lg-10">
<select size="6" class="form-control" id="lokationSelect">
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
</select>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal" onclick="performKlargjoring()">Klargjøring</button>
</div>
</div>
</div>
</div>

One reason you may receive an undefined function would be if you have defined the jquery library more than once.
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<div class="modal fade" id="registermodal" aria-hidden="true">
...
...
</div>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
The bootstrap library gets applied to the first jquery library but when you reload the jquery library, the original bootstrap load is lost (Modal function is in bootstrap).
One common cause of this issue is when including partial blocks of code within a web app as the same javascript file reference could appear in a complete page output in more than one location.
This is especially dangerous when your js definitions are scattered throughout your page ie, in the head, at the top of the body and at the bottom of the body (in a partial template).

I solved my problem changing
$(id).modal("show")
to
jQuery(id).modal("show").

Add following script tag before declaring your own js file. This will solve the error.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

EDIT: I added an on click to hide : DEMO2
DEMO
It is not giving the undefined function like you say. I suggest wrapping your $("#registermodal").modal('show');
in a $(document).ready(function(){});
If that doesn't work (or if you already did that) I suggest adding your js script (or link) right before your </body>
Last case scenario, make sure you have bootstrap.min.js and jquery on your HTML page.

Try:
$("#registermodal").modal();