I have a problem with the javascript field. When I type a number in the first form the same number appears in the second form, Please help me solve this.
Thanks before
The first field :
<div class="form-group">
<label>Price</label>
<input type="text" class="form-control" id="formattedNumberField" name="price" placeholder="IDR. .." required>
</div>
Second Field :
<div class="form-group">
<label>Insurance</label>
<input type="text" class="form-control" id="formattedNumberField2" name="insurance"
placeholder="IDR. .." required>
</div>
Javascript :
var fnf = document.getElementById("formattedNumberField");
fnf.addEventListener('keyup', function(evt) {
var n = parseInt(this.value.replace(/\D/g, ''), 10);
fnf.value = n.toLocaleString();
}, false);
Related
Html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
Paid Balance</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control" />
</div>
<div class="col-md-2" >
Balance</strong>: <input type="text" name="balance" id="balance" class="form-control" value="200" readonly/>
</div>
Hello, Can anyone help me with this problem. How to limit the input based on the value of another input using javascript .
For Example the Value of Balance Input is 200 so that the possible input in PaidBalance is within 0-200 only.
Sorry, I'm just a student. Thanks :):)
Something like this?
$("#paidbalance").keyup(()=>{
const balance = parseFloat($("#balance").val())
const paidBalance = parseFloat($("#paidbalance").val())
if( paidBalance > balance)
$("#paidbalance").val(balance)
else if(paidBalance < 0)
$("#paidbalance").val(0)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Paid Balance
</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control" />
Balance
</strong>: <input type="text" name="balance" id="balance" class="form-control" value="200" readonly/>
This is with pure javascript without jquery. Also, note that the accepted answer doesn't work if user paste some value with mouse right-click: paste option.
function f1()
{
var max = Number(document.getElementById("balance").value);
var paid = document.getElementById("paidbalance");
var v = Number(paid.value);
//if(isNaN(v)) {...} //input is not a number
if(v>max) {
paid.focus(); //to keep focus on input
paid.value=max; //you may comment out this line to don't override value
}
}
<div class="col-md-2">
Paid Balance</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control" oninput="f1()" />
</div>
<div class="col-md-2" >
Balance</strong>: <input type="text" name="balance" id="balance" class="form-control" value="200" />
</div>
You might wanna change the type to number in this case and add max property in input. If the value of balance Input is different every time. You might considering assign it to a variable and pass it to the max property
Paid Balance</strong>:
<input type="number" name="paidbalance" id="paidbalance" max="200" class="form-control" />
Change the input to type="number" and add jQuery like this:
var balance = $('#balance')
var paidBalance = $('#paidbalance')
paidBalance[0].setAttribute('max', balance.val())
Example:
https://jsfiddle.net/Daniel_Knights/t4hb0z7p/8/
I have the following input form where the user can dynamically add more input fields when pressing a button. What I want to do with jquery is to update all of the total_cost[] fields whenever I have a .keyup event on the respective replaced_part_qty[] or replaced_part_price[]
<div class="form-group col-xs-1">
<label>Part price</label>
<input type="number" class="form-control" name="replaced_part_price[]" id="replaced_part_price">
</div>
<div class="form-group col-xs-1">
<label>Part Qty</label>
<input type="number" class="form-control" name="replaced_part_qty[]" id="replaced_part_qty">
</div>
<div class="form-group col-xs-1">
<label>Total cost</label>
<input type="number" class="form-control" name="total_cost[]" id="total_cost" readonly>
</div>
I made a .click event on the new entry button since I didn't get it to work properly on the .keyup event.The problem with the event on the .add_more_lines button is that the user needs to add a new line when he wants to see the total cost for the previous line and in addition if I change something on a previous line then the values will not get updated because the code memorizes only the values from the last line.
The ideal situation would be that whenever the user changes the price or quantity on a line, it will recalculate the total_cost for that line.
Jquery
$(document).ready(function() {
window.z = 0;
$('.add_more_button').click(function(){
$('input[name="replaced_part_qty[]"]').each(function() {
window.product_quantity = $(this).val();
});
$('input[name="replaced_part_price[]"]').each(function() {
window.product_price = $(this).val();
});
$('input[name="total_cost[]"]').each(function() {
$('input[name="total_cost[]"]').eq(window.z).val(window.product_quantity*window.product_price);
});
window.z++;
});
});
I have found the answer in this post : Jquery multiply data in textbox array and adapted it to work with dinamically added fields
Code below:
<div id="container1">
<button class="btn btn-primary btn-md add_more_button" id="add_form_field">New Line <span>+ </span></button>
<div class="form-group col-xs-3">
<label>Price</label>
<input type="number" class="form-control a" name="pret_piesa_inlocuita[]">
<label>Qty</label>
<input type="number" class="form-control b" name="cantitate_piesa_inlocuita[]">
<label>Piece Price</label>
<input type="number" class="form-control price" name="cost_piese[]" readonly>
</div>
</div>
New Line jQuery:
$(add_button).click(function(e){
var wrapper = $("#container1");
$(wrapper).append('<div class="form-group col-xs-3">\
<label>Price</label>\
<input type="number" class="form-control a" name="pret_piesa_inlocuita[]">\
<label>Qty</label>\
<input type="number" class="form-control b" name="cantitate_piesa_inlocuita[]">\
<label>Piece Price</label>\
<input type="number" class="form-control price" name="cost_piese[]" readonly>\
</div>');
}
});
Calculate fields function:
$(document).on('keyup', '.a,.b', function() {
var textValue1 = $(this).parent().find('.a').val();
var textValue2 = $(this).parent().find('.b').val();
$(this).parent().find('.price').val(textValue1 * textValue2);
var sum = 0;
$('.price').each(function() {
sum += +$(this).val();
});
});
Im fill data into the model and it shown like this way.
after click input field display this way.
this is blade (model-edit-users)
<div class="md-form col-md">
<input type="text" id="name" name="name" class="form-control" required>
<label for="name" class="">User Name</label>
</div>
this is javascript code i used.
$('#users_view_table tbody').on('click', '#editUser', function (e) {
e.preventDefault();
var data = oTable.row($(this).parents('tr')).data();
var dataname = data.name;
$("#model-edit-users").modal('show');
$('#model-edit-users').on('shown.bs.modal', function () {
$('#name').val(dataname);
});
});
anyone help me to solve this UI issue
You can try to use <md-input-container> like following
<md-input-container>
<label>User Name </label>
<input type="text" id="name" name="name" class="form-control" required>
</md-input-container>
I am pretty new in HTML 5 and I have the following doubt.
I have a form like this:
<form class="form-horizontal" action="/IDES/salvaRegistrazione" method="POST" name="formRegistrazione">
<div class="form-group">
<label class="control-label col-sm-2" for="inputNome">Nome</label>
<div class="col-sm-10">
<input id="inputNome" class="form-control" type="text" value="" required="required" placeholder="Nome" name="nome">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="inputEmail">E-mail</label>
<div class="col-sm-10">
<input id="inputEmail" class="form-control" type="email" value="" required="required" placeholder="E-mail" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="inputEmail2">E-mail</label>
<div class="col-sm-10">
<input id="inputEmail2" class="form-control" type="email" placeholder="Inserisci nuovamente E-mail" name="inputEmail2">
</div>
</div>
<input id="submitRegistrazione" class="btn btn-default pull-right" type="submit" value="Registrati" name="submitRegistrazione">
</form>
As you can see the input tag have setted the required="required" attribute and as you can see in this JSFiddle if you don't insert the value into the input tag it is automatically shown an HTML error message popup:
https://jsfiddle.net/fntwyn9j/
Now my problem is that into my form I have also 2 field having type="email".
My problem is that I want that if the second email value (the one inserted in the field having id="inputEmail2") is not equal to the first email value (the one inserted into the field having id="inputEmail") appear a custom message (in the same HTML5 style) that say to me that the 2 fields have not the same value and the form is not submitted.
Searching on the web I found this example that use event listener to add custom message: http://jsfiddle.net/B4hYG/9/
But is seems to me that don't work and I have no idea about how to implement the previous requirement.
How can I solve this issue and implement this kind of HTML5 custom validation?
Solved by myself:
$(document).ready(function() {
document.getElementById("inputEmail2").addEventListener("input", function (e) {
valoreInpitEmail = $('#inputEmail').val();
valoreInpitEmail2 = $('#inputEmail2').val();
//alert("value inputEmail: " + valoreInpitEmail + " value inputEmail2: " + valoreInpitEmail2);
//if (e.target.value != "") {
if(valoreInpitEmail != valoreInpitEmail2) {
alert("EMAIL DIVERSE");
//alert("BLABLABLA");
e.target.setCustomValidity("Le E-mail inserite non corrispondono, per favore inserirle nuovamente");
}
else {
// Let the browser decide whether this is a valid email address
// This actually prevents that the call of setCustomValidity()
// in the IF doesn't get removed thus the user cannot submit the form
//alert("ELSE");
e.target.setCustomValidity("");
}
});
});
I'm generating the empId using Servlet but my boss wants that when the user is typing, he will see the empId instantly based on what he inputs. And I'm not really familiar with JavaScript or JQuery, but I think it's the right tool to do this. Please help?
empId contains the first character in the first name, middle name, and surname plus a dash and the date of birth. Sample would be JHD-01011990.
Here's a simplified version of my HTML form:
<form method="post" action="../profile/SaveProfile">
<label for="empId">Employee ID</label>
<input id="empId" name="empId" type="text" placeholder="FML-MMDDYYYY" required readonly>
<label for="title">Title</label>
<select id="title" name="title">
<option value="0"></option>
<option value="1">Attorney</option>
<option value="2">Doctor</option>
<option value="3">Professor</option>
<option value="4">Engineer</option>
</select>
<label for="fname">Name</label>
<input id="fname" name="fname" type="text" placeholder="* First Name" required>
<input id="mname" name="mname" type="text" placeholder="* Middle Name" required>
<input id="lname" name="lname" type="text" placeholder="* Surname" required>
<input id="ename" name="ename" type="text" placeholder="Ext">
<label for="dob">* Date of Birth</label>
<input id="dob" name="dob" type="text" required>
<label for="doa">Date of Original Appointment</label>
<input id="doa" name="doa" type="text">
<button type="button">Close</button>
<button type="submit">Save</button>
</form>
And if needed, here's also my Java code for generating the empId
public String generateEmployeeId(String dateOfBirth, String firstName, String middleName, String surname) {
String[] birthdate = dateOfBirth.split("-");
String empId = firstName.charAt(0) + middleName.charAt(0) + surname.charAt(0);
empId += "-" + birthdate[1] + birthdate[2] + birthdate[0];
return empId;
}
I'd like to post a sample screen shot of my form but I can't. Please tell me if you need it.
Thank you!
Here's the jQuery code:
$(function() {
$("#fname,#mname,#lname,#dob").keyup(function() {
var birthdate = $("#dob").val().split('-');
var fname = $("#fname").val();
var lname = $("#lname").val();
var mname = $("#mname").val();
var empId = fname.charAt(0) + mname.charAt(0) + lname.charAt(0) + '-' + birthdate.join('');
$("#empId").val(empId);
});
});
It's a straightforward translation of your Java code, wrapped in a jQuery event handler, and using .val() to get the values from the input fields.
DEMO
Beaten to it but still posting. This is same solution using jQuery
$(function(){
$( "#fname,#mname,#lname,#dob").keyup(function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
//you probably want to do a bit more checking of the DOB value - such as length etc., I am merely stripping all non numerics from it
id = $("#fname").val().charAt(0) + $("#mname").val().charAt(0) + $("#lname").val().charAt(0) + "-" + $("#dob").val().replace(/\D/g,'');
$("#empId").val(id);
});
})
Demo