I am trying to get it where if there is an error when the user registers it will pop up with a modal like this. (I have it right now with a button to test it out)
So my question is how do I get it to pop up with out a button? Like if someone happened to forget their username, the modal would pop up with the error, But How do I get it where If there is an error the modal will pop up with it.?
<div class="buttonWrapper">
<button type="button" class="btn btn-success btn-df float-button-dark waves-effect waves-effect waves-button waves-float waves-dark" data-toggle="modal" data-target="#myModal2">Primary</button>
<div class="modal modal-default fade" id="myModal2" 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="myModalLabel1">Whoops! Something Happened.</h4>
</div>
<div class="modal-body">
<?php
//check for any errors
if(isset($error)){
foreach($error as $error){
echo '<p> - '.$error.'</p>';
}
}
//if action is joined show sucess
if(isset($_GET['action']) && $_GET['action'] == 'joined'){
echo "<h2 class='alert alert-success'>Registration successful, please check your email to activate your account.</h2>";
}
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Maybe this could be useful:
<html>
<body>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('#idForm').on('submit', function (e) {
e.preventDefault();
var inputs = {
user : {
field : $('#fieldUser'),
error : 'field user required !'
},
password : {
field : $('#fieldPassword'),
error : 'field password required !'
},
email : {
field : $('#fieldEmail'),
error : 'field email required !'
}
};
var errors = new Array();
for(input in inputs) {
//console.log(inputs[input].field.empty())
if(inputs[input].field.val() === "") {
//alert(inputs[input].error)
errors.push(inputs[input].error);
}
}
// errors var contain all errors
if(errors.length > 0) {
// here show your modal with errors.
//$('#idModal').show();
//alert(errors);
var errorsJoin = errors.join('\n');
alert('please review this errors : \n' + errorsJoin);
} else {
alert('sign up successfully');
}
})
})
</script>
<form method="POST" id="idForm">
user : <input type="text" id="fieldUser"> <br>
pass :<input type="text" id="fieldPassword"> <br>
email :<input type="text" id="fieldEmail"> <br>
<input type="submit" value="Sign Up">
</form>
</body>
</html>
Related
First of all sorry for my bad english. I've created a form that can update a data from a column using laravel and I created the form in a modal.
The Modal:
<!-- Modal -->
<div class="modal fade" id="edit_kesempatan_modal" 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">Edit Kesempatan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="editForm" method="POST">
#csrf
{{ method_field('POST') }}
<div class="modal-body">
<input type="hidden" name="peserta-id" id="peserta-id">
<input type="hidden" name="ujian-id" id="ujian-id">
<input type="number" id="input_kesempatan" name="input_kesempatan" class="form-control" placeholder="Masukkan Kesempatan">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
but when I click the submit button the The GET method is not supported for this route. Supported methods: POST error occurs. I have checked the route and the javascript.
The Route:
Route::post('/cat_system/users/peserta/edit/status', 'AdminController#editStatusNew')->name('cat_system.peserta.ujian.edit.status');
Route::get('/cat_system/users/peserta/get-status', 'AdminController#getStatus')->name('cat_system.peserta.ujian.get.status');
The Js:
<script>
$(document).on('click', '.edit-kesempatan-button', function() {
var peserta_id = $(this).data('peserta-id');
var ujian_id = $(this).data('ujian-id');
var status = $(this).data('status');
$('#peserta-id').val(peserta_id);
$('#ujian-id').val(ujian_id);
$('#editForm').attr('action', '/cat_system/users/peserta/edit/status/');
$('#edit_kesempatan_modal').modal('show');
$.ajax({
url: '/cat_system/users/peserta/get-status',
type: 'GET',
data: { peserta_id: peserta_id,
ujian_id: ujian_id
},
success: function(data) {
$('#input_kesempatan').val(data.status);
}
});
});
</script>
the js is for submitting the form and the ajax is to get the status from the database and pass it to the value of the input.
the controller:
public function editStatusNew(Request $request)
{
$kesempatan = $request->input('input_kesempatan');
$peserta_id = $request->input('peserta-id');
$ujian_id = $request->input('ujian-id');
$affected = DB::table('peserta_ujian')
->where('peserta_id', $peserta_id)
->where('ujian_id', $ujian_id)
->first();
if(!$affected){
abort(404);
}
$update = DB::table('peserta_ujian')
->where('peserta_id', $peserta_id)
->where('ujian_id', $ujian_id)
->update(['status' => $kesempatan]);
return redirect('/cat_system/users/peserta')->with('success', 'Kesempatan updated successfully');
}
public function getStatus(Request $request)
{
$peserta_id = $request->query('peserta_id');
$ujian_id = $request->query('ujian_id');
$peserta_ujian = DB::table('peserta_ujian')->where('peserta_id', $peserta_id)->where('ujian_id', $ujian_id)->first();
return response()->json(['status' => $peserta_ujian->status]);
}
I have make sure that all the codes are the same in the server, but still the error occurs and the error only occurs on the server, It works fine on my local
I made a form for newsletter subscription in my footer website. The code for this is:
<h4>Newsletter Subscribe:</h4>
<form method="POST" action="<?php URL::show("Newsletter", "create") ?>">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="form-control" name="subscriber" placeholder="john.doe#domain.com">
<input type="submit" class="btn btn-primary" value="Subscribe">
</div>
</div>
</form>
When I click on the submit button will call the createAction method from NewsletterController that looks like this:
public function createAction(){
if($_SERVER["REQUEST_METHOD"] == "POST"){
$validation = true;
$error = "";
if(trim($_POST["subscriber"]) == ""){
$validation = false;
$error = "The field 'subscriber' is required!";
}
if(trim($_POST["subscriber"]) != ""){
if(!preg_match('/^([a-z0-9]+([_\.\-]{1}[a-z0-9]+)*){1}([#]){1}([a-z0-9]+([_\-]{1}[a-z0-9]+)*)+(([\.]{1}[a-z]{2,6}){0,3}){1}$/i', $_POST["subscriber"])){
$validation = false;
$error = "The field 'subscriber' must contain a valid input!";
}
}
if($validation){
$checkSubscriber = $this->newsletterRepository->checkSubscriber($_POST["subscriber"]);
if(!$checkSubscriber){
$newsletter = new Newsletter();
$newsletter->setEmail($_POST["subscriber"]);
$result = $this->newsletterRepository->insert($newsletter);
if(!$result){
$error = "There was an error in the newsletter
}
}else{
$error = "The e-mail already registered for newsletter!";
}
}
}else{
URL::redirect("Restaurants", "listAll");
}
}
Now, after I made all the validations and inserting the data in database, I don't want to go to another webpage, I want to display a popup with confirmation message if everything was ok or an error message if there was an error. Something like this:
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Newsletter Subscription</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">
<?php if($result): ?>
<p style="color:green">Newsletter subscription successfuly!</p>
<?php elseif($error): ?>
<p style="color:red"><?php echo $error; ?></p>
<?php endif; ?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But I don't know how to trigger the modal after all the operations and validation are done. Can anyone help please?
One of the easiest ways I can think is using javascript. After the validation is done successfully you can call a javascript function like this:
echo "<script type="text/javascript">the_function_you_want_to_call_from_javascript_file();
</script>";
Than in your javascript file you can call the modal and make your own customization.
Hope it helps :)
i've tried looking at the source code and changing this but still have no luck! Hope someone can spot the mistake i've made.
Im basically just trying to submit a form with just 1 input field for now using AJAX and PHP to post using PDO method.
Here is my code:
Connection to database
<?php
define('HOST', 'localhost');
define('DB_NAME','test');
define('USER','root');
define('PASS','');
$dsn = 'mysql:host='.HOST.'; port='.PORT.'; dbname='.DB_NAME;
try {
$bd = new PDO($dsn, USER, PASS);
// $bd->setAttribute(PDO::ATT_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo 'Problem connecting to database, contact admin';
}
?>
Bootstrap Form
<div class="modal fade" id="add_new_record_modal" 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">Add New Record</h4>
</div>
<div class="modal-body">
<div class="form-group">
<form id ="myform">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Name" class="form-control" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-default" id="submit" value="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
AJAX Script
$(document).ready(function(){
$('#myform').submit(function(){
var data = $(this).serialize();
$.ajax({
url: "insert.php",
type: "POST",
data: data,
success: function( data )
{
alert( data );
},
error: function(){
alert('ERROR');
}
});
return false;
});
});
insert.php Script
<?php
require_once('config.php');
if(isset($_POST['submit'])){
$name = $_POST['name'];
$sql = 'INSERT INTO people(name) ';
$sql .= ' VALUES (:name)';
try {
$query = $bd->prepare($sql);
$query->bindValue(':name', $name, PDO::PARAM_STR);
if($query->execute()){
echo "recorded added sucessfully";
}else{
echo "Problem adding new record";
}
} catch (Exception $e) {
echo $e->getMessage();
}
}
?>
In your html code, you don't have any form. So you can't directly use .submit() or .serialize()
Consider closing you form elements within <form>
Change your html to this:
<div class="modal fade" id="add_new_record_modal" 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">Add New Record</h4>
</div>
<div class="modal-body">
<div class="form-group">
<form id ="myform">
<label for="name">Name</label>
<input type="text" name="name" placeholder="Name" class="form-control" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-default" id="submit" value="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
Update:
Add name attribute in input tag.
Serialize labels items by its name attribute.
Try to read about submit() to fully understand how it works: https://api.jquery.com/submit/
You are not using the <form> tag, so submit() doesn't catch any event.
Try wrapping your input and buttons in the same form tag, with id=myform and try again.
Also you are not using event.preventDefault(), without which the page will be refreshed.
I'm using modal to display form. I want to validate form and show possible errors after clicking submit button. I don't want to close my modal after validation so I decided to use Ajax. Here is my code:
Modal:
<div class="modal fade" id="form-modal" 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">Modal title</h4>
</div>
<div class="modal-body">
<form name="offer-form" id="offer-form" action="offers.php" method="post">
<label for="name-input">Name</label><br>
<?php
if (isset($_SESSION["name-error"])) {
echo "<p>".$_SESSION["name-error"]."</p>";
unset($_SESSION['name-error']);
}
?>
<input type="text" id="name-input" name="name"><br>
<input type="submit" id="submit-input" name="submit" value="Submit">
</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">Save changes</button>
</div>
</div>
</div>
Script:
<script type="text/javascript">
$(document).ready(function(){
$("#offer-form").submit(function(e){
e.preventDefault();
$.ajax({
type : 'POST',
data: $("#offer-form").serialize(),
url : 'validate.php',
success : function(data){
}
});
return false;
});
})
PHP:
<?php
session_start();
$_SESSION["name-error"] = "Error";
?>
The problem is that I have to refresh website to see error being displayed. How can I fix this?
Display the error with JQUERY... If you want PHP to process your $_SESSION you will need to reload the page (because PHP in on the server side).
Do an echo in your PHP file and catch the data in your success function
<?php
session_start();
$_SESSION["name-error"] = "Error";
echo "ERROR";
success : function(data){
if(data = "Error")
{
}
}
Your validation.php file
session_start();
$_SESSION["name-error"] = "Error";
$error = array('error' => $_SESSION["name-error"]);
echo json_encode($error);
Your Html
<label for="name-input">Name</label><br>
<p class='sessionError'></p>
Your ajax success funcion
success : function(data){
$('.sessionError').text(data.error);
}
return the value of the session to your ajax and using jquery append the error to the page:
Add the following to your success function
success : function(data){
$('label[for="name-input"]').html('</br>'+data.message)
}
in your php
<?php
session_start();
header('Content-Type: application/json');
$_SESSION["name-error"] = "Error";
echo json_encode(["message"=>$_SESSION["name-error"]]);
?
please i need someone to help me check if i'm missing something. The form in the Bootstrap modal wont submit.
my HTML codes for the modal (sidebar.php)
<!-- start Joel's modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">E-Logbook Entry</h4>
</div>
<div class="modal-body">
<form id="modal-form" method="post" action="notes_functions.php">
<fieldset>
<label>Log Entry</label>
<textarea rows="4" cols="50" class="form-control" name="note_content" placeholder="What have you learnt today?..."></textarea>
</form>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<input type="submit" name="submit" class="btn btn-default" id="submitnote" value="Submit" />
</div>
</div>
</div>
</div>
<!-- end Joel's modal -->
codes for the PHP file (notes_functions.php)
<?php
include_once 'database-config.php';
if (isset($_POST['submitnote'])) {
$noteContent = strip_tags($_POST['note_content']);
$sql = "INSERT INTO account_notes (note_contents) VALUES ('$noteContent')";
$dbh->exec($sql);
echo "New record created successfully";
echo "Log details = ".$note_contents;
}
?>
my AJAX codes for submitting the form
<script type="text/javascript">
var frm = $('#modal-form');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
dataType: "JSON",
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
</script>
I can't seem to spot the error :-(
your submit button is not in the form. place it in the form or add this to the button
form="modal-form"
like so:
<input type="submit" name="submit" class="btn btn-default" id="submitnote" value="Submit" form="modal-form" />
Two things:-
1.Instead of if (isset($_POST['submitnote'])) { use if (isset($_POST['submit'])) {
2.Put ev.preventDefault(); before $.ajax({