Twitter's bootstrap Form inside Modal - php

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.

Related

How to pass value of a form to another form PHP?

I have a form A in index.php which I need to pass the value of 'notebook_id' to formB in create_new_note.php. I used POST method to do this but it is not working.
form A in index.php
<!-- Modal -->
<div class="modal" id="newNotebookModal" tabindex="-1" aria-labelledby="newNotebookModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<center><h5 class="modal-title" id="newNotebookModalLabel">Create a New Notebook</h5></center>
</div>
<div class="modal-body">
<form class="forms-sample" method="post">
<div class="form-group">
<label for="notebook_name_label">Notebook Name</label>
<input type="text" class="form-control" name="notebook_name" id="notebook_name" placeholder="Notebook Name">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline-secondary btn-fw">Cancel</button>
<input type="submit" class="btn btn-primary" name="submit" value="Create"/>
</div>
</form>
</div>
</div>
</div>
</div>
Form B
<form class="forms-sample" method="post">
<div class="form-group">
<label for="note_title_label">Title</label>
<input type="hidden" name="notebook_id" value="<?php echo $notebook_id; ?>">
<input type="text" class="form-control" name="note_title" id="note_title" placeholder="Title">
</div>
<div class="form-group">
<textarea class="form-control" name ="note_content"id="note_content" rows="40"></textarea>
</div>
<button class="btn btn-outline-secondary btn-fw">Cancel</button>
<input type="submit" class="btn btn-primary" name="submit" value="Create"/>
</form>
I used MVC framework, hence this is my Controller code and Model code
// Controller
function addNotebook($std_id) {
$notebook = new ManageNotesModel();
$notebook->std_id = $std_id;
$notebook->notebook_name = $_POST['notebook_name'];
if($notebook->addNotebook() > 0) {
$message = "Your notebook has been created!";
echo "<script type='text/javascript'>alert('$message');
window.location = '../ManageNotesView/create_new_note.php'</script>";
}
}
// Model
function addNotebook(){
$sql = "insert into notebook(std_id, notebook_name)values(:std_id, :notebook_name)";
$args = [':std_id'=> $this->std_id, ':notebook_name'=>$this->notebook_name];
$stmt = DB::run($sql, $args);
$count = $stmt->rowCount();
return $count;
}
Please help me, I'm new to this I tried to make way through it, but cant seem to figure out whats wrong
As I see your code is creating a new row in the database. After saving row into database you want to know the last inserted id of the entity called Notebooks. Reuse that value and pass it into your template of creating titles. If your MVC framework does not know the last inserted id, you should customize it and add functionality to do that.
Check last_inserted_id

Save info from a form in a Bootstrap modal into a PHP session

I'm trying to use the modal component from Bootstrap to get some info from it and save them into a session.
I want people to put their first name, last name and email adress into that form and when they click on submit, these info are saved into the session so I can use them on an other page. Also, when they click on the button, they are sent on Paypal's website and after paying, they are sent back on my website where I should display their info. Problem is : I can't get the infos.
This is the first time I use the Session function in PHP and I managed to save a variable and use it from a page to another. Also, I successfully stored a data from a form and used it. But when I put that form into the modal, I have an error on the website.
<div class="modal fade" id="myModal" 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">Entrez vos informations</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body d-flex justify-content-center">
<form name="identifiants" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<p>Nom :
<input type="text" name="nom" size="20" required /></p>
<p>Prénom :
<input type="text" name="prenom" size="20" required /></p>
<p>Adresse email :
<input type="email" name="email" size="20" required /></p>
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="WNNJPMXAANNPY">
<input class="btn btn-outline-warning" type="submit" name="Submit" value="Submit!" />
<?php if (isset($_POST['Submit'])) {
$_SESSION['nom'] = $_POST['nom'];
$_SESSION['prenom'] = $_POST['prenom'];
$_SESSION['email'] = $_POST['email'];
}
?>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is the code of my other page :
echo $_SESSION['logiciel'];
echo $_SESSION['nom'];
echo $_SESSION['prenom'];
echo $_SESSION['email'];
?>
I did put a session_start(); at the beggining of all my pages, it still doesn't work.
I tried to put the php part of the first page out the form, out of the div and out of the modal but nothing works. Yet, I still display the 'logiciel' variable on the other page because I save it earlier in the code.
It's the best to use a db for these cases but to answer your question, you need to add a code session_start() on top of your file before you call a session variable.
Example
File1:
Set session name and its value
<?php
session_start();
$_SESSION['firstname'] = 'Your Firstname';
?>
File2:
print the session variable value that was set before
<?php
session_start();
echo $_SESSION['firstname'];
?>
To check all sessions just use var_dump($_SESSION)

Stuck on how to disable this button if value is not valid

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.

Can someone show me a way to validate if my textboxes are not empty before the bootstrap modal can be activated/clicked/opened in php?

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>

Passing data via Modal Bootstrap and getting php variable?

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

Categories