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.
Related
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 use modal for validation
<div class="modal-body">
<div class="row">
<div class="col-lg-8">
<div class="form-group margin-top-20">
<p><strong>Do you want to join this group?</strong></p>
</div>
</div><br>
<button type="button" name="join" id = "join" class="btn btn-black">Join</button>
<button type="button" class="btn btn-black" data-dismiss="modal">Cancel</button>
<?php
$db = new Group($conn);
$gid = '';
if(isset($_POST['join'])){
if ( !empty($_GET['gr_id'])) {
$gid = $_GET['gr_id'];
$inserted = $db->insertgroup($session_id, $gid);
?>
<script>
window.location = '../views/groups.php';
</script>
<?php
}
}
?>
</div>
</div>
using this script im getting the id of a certain group and insert it into my db but it seems that the gid is not getting fetch so what happens is that when i tried to click the join button
<script>
window.location = '../views/groups.php';
</script>
this script supposed to run but did not..
im getting the ID from here:
<?php
$res = $db->g_viewlist();
$gid ='';
foreach ($res as $key => $value){
$gid = $value['g_id'];
?>
<div class="col-lg-12" align="center" style="border:1.5px solid #59960b;padding-bottom:10px;padding-top:10px;">
<button class="btn2 btn-2" data-toggle="modal" data-target="#joinModal" style="padding: 2px 2px; margin-left:50%"><strong> Join</strong></button>
<input id="gr_id" type="hidden" name="gr_id" value="<?php echo $gid ?>">
</div>
<?php
}
?>
the gid is from outside the modal form.. is there a way to fetch the id for me to be able to insert it into my db?.
You method of doing is wrong. You cannot get the gr_id value using $_GET method and $_POST.. one more you are posting any form in modal therefore $_POST will not work.
Calling Modal HTML :
<button class="btn2 btn-2 join" data-id="<?php echo $value['g_id']; ?>"
data-toggle="modal" data-target="#joinModal" style="padding: 2px 2px;
margin-left:50%"><strong> Join</strong></button>
I have added new class 'join' and added a attribute 'data-id'.
Revise your modal structure code :
<div class="modal fade" id="joinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
</div>
<div class="modal-body">
Do you want to join this group?
</div>
<div class="modal-footer">
<button type="button" name="join" id = "join" class="btn btn-black" onclick="joinGroup()">Join</button>
<button type="button" class="btn btn-black" data-dismiss="modal">Cancel</button>
<input type="hidden" name="join_id" id="join_id">
</div>
</div>
</div>
</div>
I have added <input type="hidden" name="join_id" id="join_id"> and onclick="joinGroup()" to store the join_id value and save it the database respectively.
Using javascript click function, you can assign the data-id value to input hidden field of modal box. After that when someone clicks on JOIN button ajax will trigger and save the data into database.
<script type="text/javascript">
$('.join').click(function(){
var id = $(this).attr('data-id');
$('#join_id').val(id);
});
function joinGroup(){
var join_id = $('#join_id').val();
$.ajax({
url:"insertvalue.php", // ajax call to insert data
data: 'join_id=' + join_id,
success:function(data) {
window.open('your url','_self');
}
});
}
</script>
Basically I'd like to have the modal button check if the textboxes before it are empty and if they are then the user cannot proceed until they are filled.
Here's the code:
<form class="form-horizontal form-signin-signup" action="signup.php" method="post">
<input data-toggle="tooltip" title="Enter a valid email address." type="email" name="email" required placeholder="Email Address">
<input type="password" required name="password" placeholder="Password">
<input type="password" required name="password_confirmation" placeholder="Repeat Password">
<div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal2">Sign up as an Jobseeker</button>
<button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Sign up as an Employer</button>
<!-- Modal:Jobseeker -->
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Finalization</h4>
</div>
<div class="modal-body">
<p>Hello! Please add some additional information to finish the Sign up process.</p>
<i class="icon-question-sign" data-toggle="tooltip" title="This is required to receive notifications from the system."></i> <input type="text" required name="cellno" placeholder="63905XXXXXXX"><br>
<input type="submit" name="register" value="Finish" class="btn btn-primary btn-large">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Modal:Jobseeker -->
<!-- Modal:Employer -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Finalization</h4>
</div>
<div class="modal-body">
<p>Hello! Please add some additional information to finish the Sign up process.</p>
<input type="text" required name="fname" placeholder="Company Name">
<input type="text" required name="bpermit" placeholder="Business Permit"><br>
<label><i>Optional:</i></label>
<input type="text" name="url" placeholder="Website"><br>
<input data-toggle="tooltip" title="Click here to finish" type="submit" name="register" value="Finish" class="btn btn-primary btn-large">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Modal:Employer -->
</div>
</form>
A big thank you to anyone who can answer my question.
$(".form-horizontal").submit(function() {
//in case if all Available Text boxes within the form are mandatory
var checkEmptyInput = $(this).find("input[type=text]:visible").filter(function() { if($(this).val()=="") return $(this); }).length;
if(checkEmptyInput>0) {
alert("Missed Entering a Mandatory Field");
$(this).find("input[type=text]:visible").filter(function() { if($(this).val()=="") return $(this); })[0].focus();
return false;
}
});
you can use the above jQuery function to validate your form (in case, if all visible text fields are mandatory)
Terms Used
$(".form-horizontal") a jquery class selector has been used to target the element with the class .form-control, here in your case it is your targeting HTML Form. know more about jQuery Selectors
.submit(function() an event to target when the form is submitted
$(this) here targets current element, know more about $(this)
.filter() this is used to filter the selected elements with a callback, here in this case, this filters only the empty text boxes
.find() this is fastest jQuery selector, here used to find only visible textboxes within the main Element (.form-horizontal)
The simplest of validation, without jquery or any other library, could look like this:
if (document.getElementById("inputID").value !== ''){
// proceed...
}
You leave yourself open to potentially malicious code, so additional regex'ing is recommended (script tags, etc);
A resource : js validation
You can use a simple jQuery for that.
$(".SUBMIT-BUTTON-CLASS").click(function(){
//replace the "SUBMIT-BUTTON-CLASS for a class which involves all submit buttons
//don't forget the period marker
if ($('#elementID').val()==''){...}
//this check's if the HTML referenced value is equal to empty string, you can make a check for every input field you want to compare
}
More info here
OR...
You can put the required keyword on the end of the input element. This will avoid that the form will be submitted with empty input. Example:
<input type="text" name="something" required>
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
I'm using twitter's bootstrap to make a WebApp, on one of the features of the App I need to have some modals with form's inside. Those forms will be filled with data through some PHP scripts. I'm having problems using the modal feature with forms, the data for edition is correctly displayed in the fields, but I'can't seem to submit the form.
This is my code:
<a href="#edit_user_<?php echo $row['id_user'] ?>" role='button' data-toggle='modal' data-original-title='Edit User' class='btn btn-small btn-info time-link'><i class='icon-pencil icon-white'></i></a>
<button data-toggle='tooltip' data-original-title='Delete User' class='btn btn-small btn-danger time-link'><i class='icon-trash icon-white'></i></button>
<?php
echo "</td>";
echo "</tr>";?>
<div id="edit_user_<?php echo $row['id_user']; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<form action="" method="POST">
<label for="name">Name</label>
<input type="text" name="name" value="<?php echo $row['name']?>"/>
<label for="email">Email</label>
<input type="text" name="email" value="<?php echo $row['email']?>">
<button type="submit" name="update_btn">Submit</button>
<?php
if (isset($_POST['update_btn'])) {
if (isset($_POST['name']) && $_POST['name'] !="") {
if (isset($_POST['email']) && $_POST['email'] !="") {
$qstr_updateuser = "UPDATE `host_register`.`users` SET `name`=".$_POST['name'].", `email`= ".$_POST['email']." WHERE `users`.`id_user` = ".$row['id_user']."";
echo $qstr_updateuser;
$update_user = mysqli_query($dbc,$qstr_updateuser);
}
}
}?>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
And for some reason I can't understand, the browser output's this:
<div class="modal-body">
<form method="POST" action=""></form>
<label for="name">Name</label>
<input type="text" value="Pedro Oliveira" name="name">
<label for="email">Email</label>
<input type="text" value="pedro.oliveira#est.pt" name="email">
<button name="update_btn" type="submit">Submit</button>
</div>
I'm kind of clueless here! Is it a problem with bootstrap or with my code?
Fortunately, I found out that, since the Modal was inside a tag because of a while loop was causing this disturbance, but I could quite understand why that was happening. Fortunately I restarted my work from scratch and decided to create a different while loop to do the same Job, as it seems the problem was really the table tag.
If browser output's is that, you can't submit because submit button is not inside the form tag, even the inputs. Unless that your problem is really that.