Event focus on select with Materialize - javascript

I want to add a class when a select has event select, this is my code:
$("form").find("input,select").on('focus',function(){
$(this).addClass("focus");
});
$("form").find("input,select").on('blur',function(){
$(this).removeClass("focus");
});
This is my HTML:
<form id="formEdit" method="post" action="<?=current_url();?>" enctype="multipart/form-data">
<div class="form-pad">
<div class="row">
<!--<div class="col s12 m8 push-m4">-->
<div class="col s12">
<div class="input-field">
<input id="nombre" name="nombre" type="text" class="validate" onkeypress="return valid_text(event)" maxlength="20" value="<?=$nombre;?>" required>
<input name="userID" type="hidden" value="<?=$userID;?>">
<input name="status" type="hidden" value="<?=$status;?>">
<label for="nombre" class="active">Nombres</label>
</div>
<div class="input-field">
<input name="apellidos" type="text" class="validate" onkeypress="return valid_text(event)" maxlength="30" value="<?=$apellidos;?>" required>
<label for="apellidos" class="active">Apellidos</label>
</div>
<div class="input-field">
<input name="email" type="email" class="validate" maxlength="49" value="<?=$correo;?>" required>
<label for="email" class="active">Correo Electrónico</label>
</div>
<div class="input-field">
<select id="select_privilegios" name="FK_id_rol" required>
<?=($id_rol=='') ? '<option value="" disabled selected>Seleccionar</option>': ''?>
<?php
foreach ($roles as $role) {
echo '<option value="'.$role->roleId.'" '.(($id_rol == (int)$role->roleId) ? 'selected': '').'>'.$role->role.'</option>';
}
?>
</select>
<label>Privilegios</label>
</div>
<div id="div_empresas" class="input-field">
<select name="id_empresa[]" id="select_empresas" multiple required>
<?php
$ids = array_map(function($e) {
return is_object($e) ? $e->id_empresa : $e['id_empresa'];
}, $id_empresa);
foreach ($empresas as $empresa) {
echo '<option value="'.$empresa->id_empresa.'" '.(in_array($empresa->id_empresa, $ids) ? 'selected': '').'>'.$empresa->nombre .'</option>';
}
?>
</select>
<label>Empresas</label>
</div>
</div>
</div>
<!-- Save Cancelar -->
<div class="row">
<div class="col s12 m12 l12 buttons" style="padding: 0">
<div id="botones">
<button class="waves-effect waves-light btn" type="submit" name="action1"><i class="material-icons right">done</i>Guardar</button>
<?php if($userID>0): ?>
<span href="#warningModal" class="modal-trigger waves-effect waves-light btn <?=($status)? "red lighten-1" : "blue darken-4";?>"><i class="material-icons right"><?=($status)? "delete" : "lock_open";?></i><?=($status)? "Eliminar" : "Habilitar";?></span>
<button type="submit" name="action2" class="hide"></button>
<?php endif; ?>
<i class="material-icons right">clear</i>Cancelar
</div>
</div>
</div>
</div>
</form>
This code work very well in input text or other types of input but, in select elements don´t detect the focus event. If someone could help me,
I would appreciate it very much.

Related

If checkbox is checked then enable all input field

I'm having a trouble with enabling the input fields via a checkbox in the modal dialog. I tried using the code below but it only works with the first data in the modal. When I closed the modal and select the other user, it is not working.
FIRST DATA: Works fine!
SECOND DATA: As you can see the EDIT button was enabled but the input fields is not.
SCRIPT:
<script>
function enableFields() {
var cb_edit=document.getElementById("cb_edit");
if(cb_edit.checked) {
document.getElementById("user_type").disabled = false;
document.getElementById("stat").disabled = false;
document.getElementById("dept").disabled = false;
document.getElementById("fname").disabled = false;
} else {
document.getElementById("user_type").disabled = true;
document.getElementById("stat").disabled = true;
document.getElementById("dept").disabled = true;
document.getElementById("fname").disabled = true;
}
}
</script>
CHECKBOX BUTTON:
<input class="form-check-input" type="checkbox" id="cb_edit" onclick="enableFields();">
<label class="form-check-label" for="flexSwitchCheckDefault">Edit</label>
MODAL
<div class="modal-body">
<div class="col-md-12 col-12">
<div class="card">
<div class="card-content">
<div class="card-body">
<div class="form-body">
<div class="row">
<form class="form form-vertical" method="post" action="db_user_update.php">
<div class="form-body">
<div class="row">
<div class="col-6">
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">User ID</span>
<input type="text" class="form-control" aria-label="User ID" name="u_id"
aria-describedby="inputGroup-sizing-default" id="u_id" value="<?php echo $row['u_id']; ?>" readonly>
</div>
</div>
<div class="col-6">
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Status</label>
<select class="form-select el_dis" id="stat" name="stat" value="<?php echo $row['stat']; ?>" >
<option value="" disabled>Choose...</option>
<option value="0" <?php if($row['stat']==0) echo 'selected="selected"'; ?>>Active</option>
<option value="1" <?php if($row['stat']==1) echo 'selected="selected"'; ?>>Deactivated</option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">First Name</label>
<div class="position-relative">
<input type="text" class="form-control el_dis" name="fname"
placeholder="First Name" id="fname" value="<?php echo $row['fname']; ?>">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">Middle Name</label>
<div class="position-relative">
<input type="text" class="form-control el_dis" name="mname"
placeholder="Middle Name" id="mname" value="<?php echo $row['mname']; ?>">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">Last Name</label>
<div class="position-relative">
<input type="text" class="form-control el_dis" name="lname"
placeholder="Last Name" id="lname" value="<?php echo $row['lname']; ?>">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">Suffix</label>
<div class="position-relative">
<input type="text" class="form-control el_dis" name="suffix"
placeholder="Suffix" id="suffix" value="<?php echo $row['suffix']; ?>">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">Department</label>
<div class="position-relative">
<fieldset class="form-group">
<select class="form-select el_dis" id="dept" name="dept" value="<?php echo $row['dept']; ?>">
<option value="" disabled selected>Choose...</option>
<option value="GS" <?php if($row['dept']=="GS") echo 'selected="selected"'; ?>>Elementary</option>
<option value="JHS" <?php if($row['dept']=="JHS") echo 'selected="selected"'; ?>>Junior High School</option>
<option value="SHS" <?php if($row['dept']=="SHS") echo 'selected="selected"'; ?>>Senior High School</option>
</select>
</fieldset>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">User Type</label>
<div class="position-relative">
<fieldset class="form-group">
<select class="form-select el_dis" id="user_type" name="user_type" value="<?php echo $row['user_type']; ?>">
<option value="" disabled selected>Choose...</option>
<option value="S" <?php if($row['user_type']=="S") echo 'selected="selected"'; ?>>Student</option>
<option value="E" <?php if($row['user_type']=="E") echo 'selected="selected"'; ?>>Employee</option>
<option value="P" <?php if($row['user_type']=="P") echo 'selected="selected"'; ?>>Parent</option>
</select>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer justify-content-between">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="cbEdit" name="cbEdit" onclick="terms_changed(this)">
<label class="form-check-label" for="flexSwitchCheckDefault">Edit</label>
</div>
<input type="hidden" class="form-control" name="u_id" id="u_id" value="<?php echo $row['u_id']; ?>">
<button type="submit" class="btn btn-primary ml-1 el_dis" id="btnUpdate" value="update" name="update">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block"><i class="fa fa-paper-plane" aria-hidden="true"></i> Update</span>
</button>
<button type="button" class="btn btn-light-secondary" data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block"><i class="fa fa-times" aria-hidden="true"></i> Close</span>
</button>
<div>
</form>

I have a problem when I click collapse button

I have a problem. The view is like this :
When I click button see more the view is like this :
The problem is, I want the view is like this :
city beside state,
country beside zip code
How to fix this ? and what should I have to do ?
<div class="row col-md-12 col-12 mb-20 collapse" id="registerform">
<div class="col-md-6 mb-20">
<label>City</label>
<input class="mb-0" type="text" name="city" placeholder="City" value="<?= set_value('city'); ?>">
<?= form_error('city', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-md-6 mb-20">
<label>State</label>
<input class="mb-0" type="text" name="province" placeholder="State" value="<?= set_value('province'); ?>">
<?= form_error('province', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-md-6 mb-20">
<label>Country</label>
<input class="mb-0" type="text" name="country" value="Indonesia" readonly>
</div>
<div class="col-md-6 mb-20">
<label>Zip Code</label>
<input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="<?= set_value('zipcode'); ?>">
<?= form_error('zipcode', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-md-6 mb-20">
<label>Phone Number</label>
<input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="<?= set_value('phonenumber'); ?>">
<?= form_error('phonenumber', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<input class="mb-0" type="text" name="date_created" value="<?= date('Y-m-d H:i:s');?>" hidden>
<div class="col-12">
<button type="submit" name="register" class="register-button mt-0">Register</button>
</div>
</div>
<a class="cokcok" data-toggle='collapse' href='#registerform' style="margin-left: 15px;">See more...</a>

<div class="row col-md-12 col-12 mb-20 collapse" id="registerform">
<div class="row">
<div class="col-md-6 mb-20">
<label>City</label>
<input class="mb-0" type="text" name="city" placeholder="City" value="">
</div>
<div class="col-md-6 mb-20">
<label>State</label>
<input class="mb-0" type="text" name="province" placeholder="State" value="">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-20">
<label>Country</label>
<input class="mb-0" type="text" name="country" value="Indonesia" readonly>
</div>
<div class="col-md-6 mb-20">
<label>Zip Code</label>
<input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-20">
<label>Phone Number</label>
<input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="">
</div>
</div>
<input class="mb-0" type="text" name="date_created" value="" hidden>
<div class="col-12">
<button type="submit" name="register" class="register-button mt-0">Register</button>
</div>
See more...

You're using col-md-6 so I think you should actually get the result you want in larger viewports. You could use col-6 which should work even in small viewports:
<div class="row col-md-12 col-12 mb-20 collapse" id="registerform" >
<div class="row mb-20">
<div class="col-6">
<label>City</label>
<input class="mb-0" type="text" name="city" placeholder="City" value="<?= set_value('city'); ?>">
<?= form_error('city', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-6">
<label>State</label>
<input class="mb-0" type="text" name="province" placeholder="State" value="<?= set_value('province'); ?>">
<?= form_error('province', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
</div>
<div class="row mb-20">
<div class="col-6">
<label>Country</label>
<input class="mb-0" type="text" name="country" value="Indonesia" readonly>
</div>
<div class="col-6">
<label>Zip Code</label>
<input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="<?= set_value('zipcode'); ?>">
<?= form_error('zipcode', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
</div>
<div class="col-md-6 mb-20">
<label>Phone Number</label>
<input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="<?= set_value('phonenumber'); ?>">
<?= form_error('phonenumber', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<input class="mb-0" type="text" name="date_created" value="<?= date('Y-m-d H:i:s');?>" hidden>
<div class="col-12">
<button type="submit" name="register" class="register-button mt-0">Register</button>
</div>
</div>
<a class="cokcok" data-toggle='collapse' href='#registerform' style="margin-left: 15px;">See more...</a>

Javascript event.preventDefault() not working on Safari, but working on Chrome and Firefox

Hi, guys:
For some resaon the event.preventDefault() function not working on safari browser, but working fine on Google Chrome and Firefox. What I want to do is prevent the user to submit the form, unless they finish the google reCAPTCHA(Version 2). Please let me know how can I fix this issue. Appreciate you help.
Here is the code:
<div class="row">
<h4>
<center></center>
</h4>
<form action="http://g/r59jr" method="POST" id="form">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="firstname">First Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="First" placeholder="First Name" value="<?php echo set_value('First'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label for="firstname"> Last Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="Last" placeholder="Last Name" value="<?php echo set_value('Last'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="email">Email<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email" autocomplete="email" value="<?php echo set_value('email'); ?>" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="phone">Phone Number</label>
<input type="text" class="form-control" id="phone" placeholder="Phone Number" name="Phone" autocomplete="cellphone" value="<?php echo set_value('Phone'); ?>">
<span><small></small></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row top30 ">
<div class="col-sm-12">
<label for="agreeTOS">
<input type="checkbox" id="agreeTOS" name="agreeTOS" value='1' <?php echo set_checkbox('agreeTOS','1'); ?> required> I agree to the Privacy Policy<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small>
</label>
</div>
</div>
<div class="row top30 ">
<div class="col-sm-12">
<!--change-->
<div class="g-recaptcha" data-sitekey="6example.........."></div><br>
<button type="submit" value="<?php echo set_value('Submit'); ?>" class="btn btn-success btn-primary btn-lg signup submit_information_request btn-block" name="submitBtn" id="submitBtn">Sign-Up</button>
</form>
<!--change-->
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('#form').submit(function(event) {
var verified = grecaptcha.getResponse();
if (verified.length === 0) {
event.preventDefault();
}
});
});
</script>
</div>
</div>
</div>
</div>

How to run jQueryValidation plugin without using a form tag?

I am using jQueryValidation plugin and I read some of the documentation but I don't know if you can run jqueryvalidator without a form. What I need is run the jqueryvalidator using the event in the button.
Here's some of my code:
<div class="row" id="form-validate">
<div class="col-md-3">
<div class="form-group">
<label for="usernamedata">Username</label>
<select name="username" class="usernamedata form-control" style="width: 100%;">
<?php if(isset($filter_username)) { ?>
<option value="<?php echo $filter_username; ?>"><?php echo $get_username; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email_address" placeholder="sample#email.com" value="<?php echo $filter_email; ?>" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Date Added</label>
<div class='input-group date' id='date-added'>
<input type="text" class="form-control datepicker" name="date_added" placeholder="YYYY-MM-DD" value="<?php echo $filter_date_added; ?>" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Status</label>
<select class="form-control" name="status">
<option value=""></option>
<option value="1" <?php ($filter_status == 1) ? 'selected="selected"' : ''; ?>>Enabled</option>
<option value="0" <?php ($filter_status == 0) ? 'selected="selected"' : ''; ?>>Disabled</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group text-right">
<button type="button" class="btn btn-primary" id="filter-data"><i class="fa fa-search"></i></button>
</div>
<div class="clearfix"></div>
</div>
</div>
I wrap all my needed textfields in the ID #form-validate
And I want this onclick event to process the validation
$("#filter-data").on('click', function(){
//do the validation here
if(!myValidation) {
//success
} else {
//display error
}
});

Javascript to add subtotal and gratuity to get a total charge

I'm working on this form and I've been trying to add a field to get gratuity added in. I wanted to get a field with grand total to populate with the sum of the total and gratuity together so customers can see what they will be charged. I can not seem to get the field to run the total. I would love any help on this. Thanks!
FORM
<form method="post" action="" id="payment-form">
<div class="col-sm-12">
<div class="container">
<div class="row-fluid">
<?php foreach ($products as $product) : ?>
<div class="col-sm-6 container-cart">
<div class="thumbnail">
<?php if ($product->image_url): ?>
<img class="img-responsive" src="<?=$product->image_url ?>" />
<?php endif // image_url ?>
<div class="caption">
<div class="well">
<h3 class="product-title"><?= $product->title ?></h3>
<p class="product-description"><?= $product->description ?></p>
</div>
<div class="row-fluid">
<div class="input-group input-group-sm scrow">
<p class="lead">
<span id="item-price">$<?= money_format('%i', $product->price) ?></span>
<input type="hidden" class="price-integer form-control" value="<?= money_format('%i', $product->price) ?>">
</p>
</div>
<div class="input-group input-group-sm scrow">
<span class="input-group-addon">Quantity</span>
<input type="text" name="products[<?=$product->id ?>]" id="quantity" class="quantity form-control" autocomplete="off" value="<?=$_POST['products['. $product->id . ']'] ?>">
</div>
<div class="input-group input-group-sm scrow">
<span class="input-group-addon">Delivery Date</span>
<input type="text" name="delivery" id="delivery" class="form-control date-picker" autocomplete="off" value="">
</div>
<div class="input-group input-group-sm scrow">
<span class="input-group-addon">$</span>
<input type="text" name="base-total" id="base-total" class="readonly base-total form-control" value="" readonly>
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</div>
</div>
<?php endforeach // products ?>
</div>
</div>
</div>
<div class="containter">
<div class="row-fluid">
<div class="col-sm-6 col-sm-offset-3">
<span>Total :</span>
<div class="input-group scrow">
<span class="input-group-addon">$</span>
<input type="text" name="total-cart" id="total-cart" class="readonly total-cart form-control" value="" disabled="disabled">
<span class="input-group-addon">.00</span>
</div>
<span>Gratuity :</span>
<div class="input-group scrow">
<span class="input-group-addon">$</span>
<input type="text" name="gratuity" id="gratuity" class="gratuity form-control" value="">
<span class="input-group-addon">.00</span>
</div>
<span>Grand Total :</span>
<div class="input-group scrow">
<span class="input-group-addon">$</span>
<input type="text" name="grand-total" id="grand-total" class="readonly grand-total form-control" value="" disabled="disabled">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group input-group-sm scrow">
<button class="btn btn-default" type="submit">Submit Payment</button>
</div>
</div>
</div>
</div>
</form>
JAVASCRIPT
$('.quantity').on('keyup', function() {
var sum = 0;
$(".container-cart").each(function(i,o){
total = parseInt($(o).find("#quantity").val(), 10) * parseInt($(o).find("input.price-integer").val(), 10);
if(!isNaN(total) /*&& total.length!=0**/) {
$(o).find("#base-total").val(total);
sum += total;
}
});
$("#total-cart").val(sum);
});
$('#gratuity').on('keyup', function() {
grandTotal = parseInt($(o).find('#gratuity').val(), 10) += parseInt($(o).find('#total-cart').val(), 10);
$('$grand-total').val(grandTotal);
});

Change
$('$grand-total').val(grandTotal);
to
$('#grand-total').val(grandTotal);
Id selector is used as #id
Also, remove += in case to adding the values use just +
$('#gratuity').on('keyup', function() {
grandTotal = parseInt($(o).find('#gratuity').val(), 10) + parseInt($(o).find('#total-cart').val(), 10);
$('#grand-total').val(grandTotal);
});

Categories