<input type="button" class="btn btn-primary btn-lg btn-block" value="(AAP)" data-toggle="modal" href="#teklif{$foo}">
I want to send foo value.
foo == number
like 0,1,2..
<div id="teklif" class="chat_modal modal fade hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<section class="welly form_align">
<br/>
<br/>
<span id="status"> {$foo}</span>
<br/>
</section>
</div>
<div class="modal-footer">
<span id="statusteklifc"></span>
</div>
</div>
How to send value to modal ? and i sended value smarty variable.
i want to equal value:
<span id="status"> {$foo} == 2</span>
i wan to make it.
modal is simply part of your DOM so You can change it simply:
$('#status').html(any_variable);
But You need add some information when do You want to send this value.
If You want to read value from button when modal is displayed You can:
$('#teklif').on('shown.bs.modal', function (e) {
$('#status').html($('#button_ID').html());
});
Related
So i got a problem that when i click a submit button of a form, my action attribute link was added a new line that i don't want it
Here is modal that contain the form:
<!--modal-->
<div class="modal fade" id="changepass" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Password changing</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<form action="" id="passchange">
<div class="modal-body">
<div class="row">
<div class="form-password-toggle">
<label class="form-label" for="basic-default-password12">Enter New
Password</label>
<div class="input-group">
<input type="password" class="form-control"
id="basic-default-password12"
placeholder="············"
aria-describedby="basic-default-password2" name="newpass" />
<span id="basic-default-password2"
class="input-group-text cursor-pointer"><i
class="bx bx-hide"></i></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary"
data-bs-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary btn-ok">Yes</button>
<!--Get id function-->
</div>
</form>
</div>
</div>
</div>
<!--/modal-->
Here is the button when i click, it will open modal box:
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="mb-0"><?=$detail['last_name']?>'s Information</h5>
<small class="text-muted float-end"><button type="button" class="btn btn-primary"
data-id="<?=$detail['id']?>" onclick="changepassword(this)">Change
password</button></small>
</div>
Here is jquery i'm using to pass a php value to the modal:
<script>
function changepassword(elm) {
let id = $(elm).data('id');
let modal = $('#changepass');
$('#passchange').attr('action',
`http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/${id}`);
modal.modal('show');
}
</script>
So the link i want it to be on the url bar is (id is changable):
http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/id
here is the link that i don't expect it to be:
http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/30?newpass=test
i want to call a php function and it will grab the input but the line "?newpass=test" prevent it to run.
Your form is using GET method to send data to server. Form with GET method will append a list of name/value pairs after the question mark (?) at the end of your URL and each one separated by an ampersand (&). You can change method to POST so you will get no data appended to the URL and sensitive data such as password changes should use POST.
<form action="" method="POST" id="passchange">
You can learn more about sending data to server in here
<script>
function changepassword(elm) {
let id = $(elm.target).attr('data-id');
let modal = $('#changepass');
$('#passchange').attr('action',
`http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/${id}`);
modal.modal('show');
}
</script>
Im trying to fix a strange error with my code with the Bootstrap 4 Modal code. I've simply just copied and pasted the code from here: https://getbootstrap.com/docs/4.0/components/modal/#events
This is for an automotive website and Im trying to pass stock and VIN via the data attribute as requested. The question is how this works with a foreach loop. It works on a single Wordpress page or post but won't pull the data from each section of the loop.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-stock="<?php echo $vehicle['stock_number'];?>">Check Availability</button>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Stock</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>
<input type="text" class="form-control" id="recipient-name">
</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>
And my Jquery code
(function($) {
$('#exampleModal').on('modal.fade.show', function (event) {
alert( "clicked" );
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('stock') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use $ here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})})( jQuery );```
Functionality wise this works, just not within the dynamic pages that are being generated in the foreach loop. The buttons have the proper data-attribute applied but the data doesn't seem to pass to the modal from the loop. I have a development page up where you can take a live look here, the button in question is the "Check Availability" http://windsor.sixomedia.ca/inventory/New/
Try this
var recipient = button.data('data-stock');
Hope that helps.
I am trying to disable a button if input is not valid. I tried to use PHP but I think its not the right approach. Any suggestions guys? The code is here below:
<form action="" method="" enctype="multipart/form-data" data-toggle="validator">
<div class="modal fade" id="qtyModal" tabindex="-1" role="dialog" aria-labelledby="qtyModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="qtyModal">Quantity</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="form-group col-md-6">
<label for="quantity<?=$i;?>">Quantity:</label>
<input type="number" name="quanitity" id="quantity" value="<?= $quantity ;?>" min="0" class="form-control" data-minlength="1" pattern="([0-9]|[1-8][0-9]|9[0-9]|100)" data-error="Please enter a Positive Number between 0 - 100!!!">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<?php if(($quantity == '') || ($quantity >= 0 )) :?>
<button type="button" class="btn btn-primary" onclick="updateQtyFunction();jQuery('#qtyModal').modal('toggle');return false;">Save changes</button>
<?php endif;?>
</div>
</div>
</div>
</div>
</form>
This button (shown below) I am trying to disable (taken from the code above):
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<?php if(($quantity == '') || ($quantity >= 0 )) :?>
<button type="button" class="btn btn-primary" onclick="updateQtyFunction();jQuery('#qtyModal').modal('toggle');return false;">Save changes</button>
<?php endif;?>
</div>
Below also find the jQuery Function:
function updateQtyFunction(){
var qtyNumber='';
if(jQuery('#quantity')!=''){
qtyNumber = jQuery('#quantity').val();
}
jQuery('#qtyPreview').val(qtyNumber);
}
This is very easy to do with Javascript and you don't really need jQuery for it.
Just give the button you want to disable an id and in your function set the disabled attribute of the button to true.
<!DOCTYPE html>
<html lang="nl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="modal-footer">
<!-- Add an id to the button -->
<button type="button" id="button_1" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="updateQtyFunction();">Save changes</button>
</div>
<script>
function updateQtyFunction()
{
var qtyNumber='';
if (jQuery('#quantity') != '')
{
qtyNumber = jQuery('#quantity').val();
$('#button_1').attr('disabled', 'true'); // Disable the button (jQuery)
document.getElementById('button_1').disabled = 'true'; // Disable with Javascript
}
jQuery('#qtyPreview').val(qtyNumber);
}
</script>
</body>
</html>
For PHP, something like this could work:
if(isset($_POST['button']))
echo '<button type="button" name="button" />';
If the form action is "post" and an input tag with name of "button" has a value. Then this button will show up and not if otherwise.
If you need to disable the button based on a condition that can change without reloading the page, and you are using bootstrap (which it seems you are) you can add the class .disabled to the button with jQuery. Then you can remove it to enable it when the condition is met.
On another side if the page requires to be reloaded for the button to be enabled, instead of adding / removing the class with jQuery, you can do it in PHP.
I have a button and I am trying to pass value to a model.Inside button I have name="className" value="CPS210-CompSci-I (4)" button is type submit.
<button type="submit" data-toggle="modal" data-target="#myModal"
class="btn btn-info btn-md" name="className" value="CPS210-CompSci-I (4)">
<span class="glyphicon glyphicon-comment"></span> Comment
</button>
I have a model. Inside model I have php $className =$POST['className'];
echo "$className";
<div ng-app class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?php echo "Note for $firstname $lastname" ?></h4>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form-control" ng-model="note"
placeholder="Here you can write a a note for the student. " id="message"
required data-validation-required-message="Please enter a Goal"></textarea>
<p class="help-block text-danger"></p>
<label class="light">
</div>
<hr>
<?php $className = $_POST['className'];
echo "$className";
?>
<h4>Note Regarding:{{note}} </h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Variables are only added to the $_POST array after a form has been submitted. You're page must "refresh" before the array is filled. When the modal triggers and opens a new modal box on the scree, this is not considered a page refresh, therefore the value of the button you clicked is not added to the array.
You either need to put your button inside a form tag, which will trigger the modal to open when the page "refreshes" and the value in that key exists. This would be annoying and defeat the whole purpose of bootstrap modals.
You're other, more likely option, is to use javascript to move the value in the button to the spot in the modal when the button is clicked.
$('button[name="className"]').click(function(){
var className = $(this).val();
$('#class-name').html(className);
});
And edit your modal where you want the class name to this:
<hr>
<p id="class-name"></p>
<h4>Note Regarding:{{note}} </h4>
I'm trying to get an input value passed via jquery and setting into a php variable, but I don't know how to do that.
This button have the value that I want to send:
<button type='button' data-a='".$fila['idPlaza']."' href='#editarUsuario' class='modalEditarUsuario btn btn-warning btn-xs' data-toggle='modal' data-backdrop='static' data-keyboard='false' title='Editar usuario'><img src='../images/edit.png' width='20px' height='20px'></button>
Then I have this js code to send the value:
$(document).on("click", ".modalEditarUsuario", function (e) {
e.preventDefault();
var self = $(this);
$("#a").val(self.data('a'));
$(self.attr('href')).modal('show');
});
Finally I have this bootstrap modal
<!-- MODAL EDITAR-->
<div id="editarUsuario" class="modal fade modal" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Editar usuario</h2>
</div>
<form name="formularioModificaUsuario" method='post' action="usuarios.php">
<div class="modal-body">
<input type="text" class="form-control" name="idPlaza" id="a">
<?php
$valueA = ???
?>
</div>
<div class="modal-footer">
<button type="reset" id="cancelar" class="btn btn-danger" data-dismiss="modal" value="reset"><img src='../images/cancel.png' width='20px' height='20px'> Cancelar</button>
<button type="submit" name="submitModifica" id="submit" class="btn btn-primary" value="submit"><img src='../images/save_changes.png' width='20px' height='20px'> Guardar cambios</button>
</div>
</form>
</div>
</div>
</div>
</div>
My question is, how could I get the value of id='a' input into php variable $valueA to use after?
<button type='button' data-a="<?echo $fila['idPlaza'];?>" href='#editarUsuario' class='modalEditarUsuario btn btn-warning btn-xs' data-toggle='modal' data-backdrop='static' data-keyboard='false' title='Editar usuario'>
<img src='../images/edit.png' width='20px' height='20px'>
</button>
Put below code in footer before end of </body> tag.
<!-- MODAL EDITAR-->
<div id="editarUsuario" class="modal fade modal" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
</div>
</div>
</div>
</div>
Use Script like this.
<script>
$('.modalEditarUsuario').click(function(){
var ID=$(this).attr('data-a');
$.ajax({url:"NewPage.php?ID="+ID,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
Create NewPage.php, and paste the below code.
(Remember, this page name NewPage.php is used in script tag also. if you are planning to change the name of this page, change page name there in script tag too. Both are related.)
<?
$ID=$_GET['ID'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Editar usuario</h2>
</div>
<form name="formularioModificaUsuario" method='post' action="usuarios.php">
<div class="modal-body">
<input type="text" class="form-control" name="idPlaza" id="a">
<?php
$valueA = $ID;
?>
</div>
<div class="modal-footer">
<button type="reset" id="cancelar" class="btn btn-danger" data-dismiss="modal" value="reset">
<img src='../images/cancel.png' width='20px' height='20px'> Cancelar</button>
<button type="submit" name="submitModifica" id="submit" class="btn btn-primary" value="submit">
<img src='../images/save_changes.png' width='20px' height='20px'> Guardar cambios</button>
</div>
</form>
Php loads before anything on your page, so you cannot set a php variable using jQuery or javascript, but the opposite can be done.
If you have the value of the text field initially when loading then you can set it via php on load, otherwise you will need to submit your form to use the value of the input in php.
The following code is valid, php setting javascript
<?php
$valueA = "I am value A";
?>
<script language="javascript">
var jsValueA = "<?php echo $valueA; ?>";
alert(jsValueA); // alerts I am value A
</script>
The following code is invalid, javascript setting php
<input type="text" class="form-control" name="idPlaza" id="a">
<?php
$valueA = $("#a").val();
?>
This is wrong because when PHP executed the input field would not have been created yet, besides jQuery cannot be executed within PHP scope. javascript and jQuery are used at browser level to manage user interaction and DOM objects and events while PHP is used at server level and not browser.
So if you want to set a php variable, you can only set it when the server script loads, i.e php gets executed, which comes before anything else in the page. Or you can grab a value from a posted form $_POST or URI query string $_GET