Killing myself here about this error. The function is definitely defined. Chrome keeps saying that it's not.
Stripped down HTML...
<form class="form-signup" id="create_student">
<div class="form-group">
<div class="row">
<div class="col-md-6" style="text-align: left">
<label for="username">Student Username*</label>
<br>
<div style="display: block">
<input class="form-control popover_onfocus" type="text" name="username" id="username" placeholder="Username" value="<?php if (!$form_valid && !empty($_POST)){ echo $username;} ?>" data-toggle="popover" data-placement="top" data-content="Your student can login with this or his/her email address if you provide one. Have this be betwen <?=$settings->min_un?> and <?=$settings->max_un?> characters please." required>
</div>
</div>
<div class="col-md-6" style="text-align: left">
<label for="contact_info">Student's Email (Optional)</label>
<br>
<div>
<input class="form-control popover_onfocus" type="text" name="email" id="email" placeholder="Student's Email" value="<?php if (!$form_valid && !empty($_POST)){ echo $email;} ?>" data-toggle="popover" data-placement="top" data-content="This is optional, but if your student has an email, he/she can login with this and also get important emails that are relevant to them for a course, tutoring, etc.">
</div>
</div>
</div>
<br>
</div>
<button onclick="submit_ajax()" class="btn btn-primary btn-block" id="next_button" style="font-size: 24px" disabled="disabled">Create Student Account</button>
Stripped down Javascript...
//For submitting form data via AJAX
$(document).ready(function(){
function submit_ajax(){
data = {'username':$('#username').val(),'password':$('#password').val(),'confirm':$('#confirm').val(),'fname':$('#fname').val(),'lname':$('#lname').val(),'email':$('#email').val()}
$.ajax({
type: 'POST',
url: '<?php echo AJAX_DIR; ?>/create_student_account.php',
data: data,
success: function() {
//AJAX success
$('#success_fail_icon').html('<span class="glyphicon glyphicon-ok-sign lom_big_success_icon"></span>');
$('#success_fail_message').html('Success! Student account created for ' + data['fname'] + '.');
},
error: function() {
//Ajax failure
$('#success_fail_icon').html('<span class="glyphicon glyphicon glyphicon-remove-sign lom_big_fail_icon"></span>');
$('#success_fail_message').html('Uh oh! Something went wrong. Please try again, or contact us for assistance.');
}
});
}
});
Clearly, the function IS defined. I have no idea why this isn't working. I'd appreciate any assistance.
Note: I know that the data variable has more form elements than are shown. I'm trying to display a stripped down version of my problem instead of the whole thing to make this post not so long.
You define submit_ajax inside another function. it won't be accessible outside it. Just remove $(document).ready(... since it's unnecessary in this case, then you should be good.
Related
I am using laravel and I have an update bootstrap modal. When I clicked the update button, update modal showed up but all the fields are empty like in this picture below
It happened because there is an Enter space in address data from the database. This below is the code of the update button which I copied from inspect element.
<a type="button" class="btn btn-warning btn-circle" data-toggle="modal" data-target="#delivery_update_modal" onclick="delivery_update_modal(
'A9C55478-0BDE-428D-96CA-784A2349F0C7'
, 'packlaring'
, 'pe-ps-18-017'
, 'Document'
, 'Kota Balikpapan'
, 'Perum BDS2, Jl. Merpati Blok S no 14C, RT 33,
Kel. Sungai Nangka, Kec. Balikpapan Selatan,
Kota Balikpapan'
, '2019-05-31 15:00:00.000'
)"><i class="fa fa-edit"></i>
</a>
If I remove the space into one line, it working well.
I tried to remove the space when the user input the data, but it become one row, make the address is difficult to read.
Do you know how to resolve this?
okay. the problem is on this data
'Perum BDS2, Jl. Merpati Blok S no 14C, RT 33,
Kel. Sungai Nangka, Kec. Balikpapan Selatan,
Kota Balikpapan'.
if this is an address. what you need to do is output it using {!! $record->address !!}
you can try this piece of code: apply it to your case and it will work.
//modal form to show all the required inputs and make one field hidden
<div id="updateFormID" class="modal fade" >
<div class="modal-dialog box box-default" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Bank</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal" action="{{ url('/update') }}" method="post" role="form">
{{ csrf_field() }}
<div class="modal-body">
<div class="form-group" style="margin: 0 10px;">
<input type="hidden" class="form-control" id="recordid" name="recordid" value="">
<label> Name </label><input type="text" class="form-control" id="name" name="fname" value="">
<label>UserName: </label><select required class="form-control" id="username" name="userName">
<label>Email: </label><select required class="form-control" id="email" name="email">
<label>Address: </label><input type="text" class="form-control" id="address" name="address" value="">
<label>Phone: </label><input type="text" class="form-control" id="phone" name="phone" value="">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-xs">Update</button>
<button type="button" class="btn btn-secondary btn-xs" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
//link on your view to trigger popup the modal. this link displays record fetch from db. the $record is a array of variable from your controller assign to your view(blade)
<a onclick="updateForm('{{$record->userid}}','{{$record->name}}','{{$record->username}}','{{$record->email}}','{{$record->address}}','{{$record->phone}}')" style="cursor: pointer;"><i class="fa fa-edit"></i>Edit</a>
//javascript function to load modal and assign the record to inputes
function updateForm(r,x,y,z,w,s)
{
document.getElementById('recordid').value = r;
document.getElementById('name').value = x;
document.getElementById('username').value = y;
document.getElementById('email').value = z;
document.getElementById('address').value = w;
document.getElementById('phone').value = s;
$("#updateFormID").modal('show')
}
Might be my opinion but i really do not like your code. It's messy.
But, you can pass your data as json and laravel will escape it.
<a onclick="updateForm(#json($record))" style="cursor: pointer;"><i class="fa fa-edit"></i>Edit</a>
In your javascript
updateForm(object){
//you can use it as object.name or object.whatever
}
Take a look at the laarvel docs on how to pass json data and display it.
https://laravel.com/docs/5.8/blade#displaying-data
You can even use prerry print :-)
-----UPDATE------
If you use jquery, please use jquery!
function updateForm(record)
{
$('#recordid').val(record.userid);
$('#name').val(record.name);
$('#username').val(record.username);
//and so on.
$("#updateFormID").modal('show')
}
This is homework - I'm trying to make a login with cookies so that the browser remembers that you previously logged in but I have no idea how to implement it into my code. And to logout how can I delete cookies to login again?
<?php
session_start();
require_once('conexion.php');
$usuario=$_POST['usuario'];
$contrasena=$_POST['pass'];
$con=md5($contrasena);
$consulta= "SELECT * FROM usuarios WHERE usuario='$usuario' and contrasena='$con'";
$result= mysqli_query($link, $consulta);
$contador=0;
while($fila = mysqli_fetch_array($result))
{
$contador=1;
//cambiar por cookies
$_SESSION['id']=$fila['id'];
$_SESSION['nombre']=$fila['usuario'];
}
if($contador==0)
{
echo '<script type="text/javascript">window.location.assign("login.html");</script>';
}else{
echo '<script type="text/javascript">window.location.assign("index.html");</script>';
}
?>
This is my form:
<form action="validacion.php" method="POST">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Usuario" name="usuario" id="username">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Contraseña" name="pass" id="password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">enter</button>
</div>
<!-- /.col -->
</div>
</form>
You should remember that sessions and cookies are not the same thing:
What is the difference between Sessions and Cookies in PHP?
Still with me?
You have to "set" a cookie on your validacion.php:
$username = $_POST['usuario']; //I would highly recommend that you clean the input.
setcookie("usuario", $username);
On your index.html page simply convert it to a php file by adding the php at the top of the HTML. Add a php listener that detects a user that is logged in. Please also remember to change your index.html to index.php
<?php
if (isset($_COOKIE["usuario"])) {
echo "Welcome ".$_COOKIE["usuario"];
}
?>
On your log out simply "unset" the cookies after making sure they exist.
if (isset($_COOKIE['usuario'])) {
unset($_COOKIE['usuario']);
}
I would highly recommend you lookup:
http://php.net/manual/en/function.setcookie.php &
http://php.net/manual/en/function.unset.php
I have created a login form. It include the Customer Name,Username,Password. Customer Name is list of different customers. I have to update the list from database. Can anyone help to solve this issue. Thanks.
My html code for login page is,
<div id="divcust" class="form-group">
<select class="form-control" id="customerlist" placeholder="Customer Name" autofocus required>
<option value="">Select Customer</option>
</select>
</div>
<div id="divusr" class="form-group has-feedback">
<input type="text" id="txtUid" name="username" data-validation="alphanumeric" class="form-control" placeholder="UserName" tabindex="1"/>
<span class="glyphicon glyphicon-user form-control-feedback"></span> </div>
<div id="divpwd" class="form-group has-feedback">
<input type="password" id="txtPwd" name="password" data-validation="length" data-validation-length="min5" class="form-control" placeholder="Password" tabindex="2"/>
<span class="glyphicon glyphicon-lock form-control-feedback"></span> </div>
<div id="divtc"class="form-group has-feedback" >
<input type="checkbox" id="cbtnc" name="check" data-validation="required" data-validation-error-msg="You have to agree to our Terms and Conditions to access" class="minimal" tabindex="3"/>
I accept the Terms and Conditions of access.
<span class="glyphicon form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-offset-8 col-xs-4">
<button type="button" id="btnLogin" class="btn btn-primary btn-block btn-flat" onclick="verifyLogin();" tabindex="4">Sign In</button>
</div>
I used jQuery to use $.ajax() method.
My JSFiddle: https://jsfiddle.net/m6vrfmw1/2/
To use jQuery in your project, add <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
into your <head> tag.
Inside the $.ajax() method, I used $.each() method to iterate over the JSON data and append them into the <select> tag.
$.ajax({
url: "https://www.json-generator.com/api/json/get/clwcxTNthK?indent=2", // URL to fetch data from DB
success: function(data) {
$.each(data, function(index, item){
$("#customerlist").append('<option value="[Add Custom Value Here]">' + item.name + '</option>');
});
}
});
I validated my form Using AJAX
Here is my form
<p class="login-box-msg">
<?php
echo "<span id='error'>Sign in to start your session</span>";
?>
</p>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Employee ID" name="empid">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" name="pw">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-8">
<button type="button" class="btn btn-primary btn-block btn-flat" id="submit">Sign In</button>
</div>
<!-- /.col -->
</div>
</div>
<!-- /.login-box-body -->
<form>
Then I validated this using my ajax code
$("#submit").click(function(){
var form = $("form").serialize();
$.ajax({
url:'verify',
data: form,
dataType:'json',
type:'post',
success: function(e)
{
console.log(e.length);
if(e.length < 1)
{
$("#error").text("Invalid Login Credentials!");
$("#error").css("color","red");
setTimeout(function(){
$("#error").text("Sign in to start your session!");
$("#error").css("color","black");
},3000);
}
else
{
"What shoud I do"
// I tried $("form").submit() but it just repeat
//$("#submit").click(function())
}
}
});
On else bracket, I want to redirect to Controller on codeigniter called setCredentials() wherein it would set the credentials needed and redirect me to another page when the validation is completed (without error).
In else part enter the below code with the url you want to redirect to:
window.location = "<?php echo 'your/url'; ?>";
I'm trying to set up a login form who redirects the user to another page after submitting the form. However neither window.location.replace(), window.location.href, or window.open() seem to work and I can't figure out why. I checked on the developer tools and it gives me no error.
Here's the javascript:
function loginUtente(){
var email = document.getElementById('loginemail').value;
var password = document.getElementById('loginpassword').value;
var utente = localStorage.getItem(email);
if( utente != null && JSON.parse(utente).password == password){
window.alert("login effettuato!");
window.location.replace("http:/www.google.it");
}
else{
window.alert("Utente o password non corretti");
}
return false;
}
And here's the HTML:
<form class="form-group" id="formlogin" onsubmit="loginUtente()">
<label>Email</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input id="loginemail" type="text" name="nome" class="form-control" placeholder="Indirizzo Email" required ></input>
</div>
<br>
<label>Password</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input id="loginpassword" type="password" name="password" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" ><span class="glyphicon glyphicon-send" ></span> Login</button>
</form>
Putting the return false inside the if is not working either.
The Google url is of course a placeholder url.
In the form tag you missed to add return statement :
<form class="form-group" id="formlogin" onsubmit="return loginUtente()">
So, form is submitted without waiting for response of function. and function code is not executed.