How to Generate Random Number of Barcode in Jquery - javascript

I need a code generator in jQuery that when clicking on the button it appears in the input text a number of 13 digits, start in number 7.
This is the code in my view:
<div class="form-group <?php echo !empty(form_error('barcode')) ? 'has-error':'';?>">
<label for="barcode">Barcode:</label>
<div class="input-group barcode">
<div class="input-group-addon">
<button class="fa fa-barcode" title="Generate Random Barcode"></button>
</div>
<input type="text" class="form-control" id="barcode" name="barcode" required value="<?php echo set_value('barcode');?>">
</div>
<?php echo form_error("barcode","<span class='help-block'>","</span>");?>
</div>
This is the input text + button:
The generated number like this:

You can do this :
$(document).on('click', '#barcode_btn', function(e){
e.preventDefault();
var val1 = Math.floor(100000 + Math.random() * 999999);
var val2 = Math.floor(10000 + Math.random() * 99999);
$('[name="barcode"]').val('7 '+val1+' '+val2);
})
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" name="barcode" value="">
<button id="barcode_btn">Generate Barcode</button>
</form>
</body>
</html>

Related

javascript - jQuery functions not working on cloned

I have a problem with j query function calculate date after clone,
i need to auto calculate how many days after user select check in and check out date and put it in textbox , its working for first row but not working with cloned rows
DEMO
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetDays(){
var dropdt = new Date(document.getElementById("drop_date").value);
var pickdt = new Date(document.getElementById("pick_date").value);
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
function cal(){
if(document.getElementById("drop_date")){
document.getElementById("numdays2").value=GetDays();
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var genroomid = 2;
$( ".add-row" ).click(function(){
var $clone = $( "ul.personal-details" ).first().clone();
var $input = $clone.find('#roomid');
$input.val(genroomid).attr('genroomid' , +genroomid)
$clone.append( "<button type='button' class='remove-row'>-</button>" );
$clone.insertBefore( ".add-row" );
genroomid++; // increase id by 1
});
$( ".form-style-9" ).on("click", ".remove-row", function(){
$(this).parent().remove();
genroomid--;
});
});
</script>
</head>
<body>
<form name="form_reservations" method="post" action="add.php">
<span class="form-style-9">
<ul class="personal-details">
<label for="roomid">RoomID</label>
<input name="roomid[]" type="text" class="stretchnights" id="roomid" readonly="readonly" value="1">
<label for="chkin">Check IN</label>
<input class="stretchdate" size="15" width="15" id="pick_date" type="date" name="chkin[]" onchange="cal()" required/>
<label for="chkout">Check Out</label>
<input class="stretchdate" id="drop_date" type="date" name="chkout[]" onchange="cal()" required/>
<label for="nights">Nights
<input class="stretchnights" type="text" id="numdays2" name="nights[]" readonly /></label>
</ul>
<button type="button" class="add-row">+ New Client</button>
</span>
</form>
</body>
There are lot of issues in the snippet you shared, you are trying to using ID in the original element and cloning it, this is a bad idea for your use case. What you can do is convert it to class, and pass the target element in cal(). by doing that you can find the element. And your label for nights is not closed properly
replace your exiting script block
<script type="text/javascript">
function GetDays(target){
var dropdt = new Date($(target).find(".drop_date").val());
var pickdt = new Date($(target).find(".pick_date").val());
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
function cal(target){
console.log($(target).parent(), $(target).parent().find('numdays2'));
$(target).parent().find('.numdays2').val(GetDays($(target).parent()));
}
</script>
and replace your .personal-details html block with this
<ul class="personal-details">
<label for="roomid">RoomID</label>
<input name="roomid[]" type="text" class="stretchnights" id="roomid" readonly="readonly" value="1">
<label for="chkin">Check IN</label>
<input size="15" width="15" id="pick_date" class="pick_date" type="date" name="chkin[]" onchange="cal(this)" required/>
<label for="chkout">Check Out</label>
<input id="drop_date" type="date" name="chkout[]" class="drop_date" onchange="cal(this)" required/>
<label for="nights">Nights </label>
<input class="numdays2" type="text" id="numdays2" name="nights[]" readonly />
This should solve the problem
You are using the same id in function call for the clones.

Get javascript values from calculation and insert them into mysql database

i want to make calories calculator.the code below shows the result. and it is good. but i want the result in input field, so that i can submit the result of the calculation into mysql database. this calculation was automatically calculate. i want the calculation was not auto calculate and the result was in input field.
<?php
session_start();**strong text**
include 'dbconnection.php';
if(isset($_POST['submit'])){
$jantina = $_POST['jantina'];
$umur = $_POST['umur'];
$berat = $_POST['berat'];
$tinggi = $_POST['tinggi'];
$totalCals = $_POST['totalCals'];
//yg bmr ni , nilai yang dah dikira auto
$query = "INSERT INTO kalori (jantina, umur, berat, tinggi, totalCals)";
$query .= "VALUES ('$jantina', '$umur', '$berat', '$tinggi', '$totalCals')";
$create_post_query = mysqli_query($connection, $query);
echo"<script language=javascript type=text/javascript> alert ('Anda berjaya
daftar.')
</script>";
}
?>
<form class="form" method="post" action="kalori1.php" autocomplete="off">
<div class="form-group">
<label for="gender">Jantina</label>
<div class="input-group" data-toggle="buttons" >
<label class="btn btn-default active"><input id="female" type="radio" name="jantina" onchange="calsPerDay()" checked="checked">Perempuan</label>
<label class="btn btn-default"><input id="male" type="radio" name="jantina" onchange="calsPerDay()" >Lelaki</label>
</div>
</div>
<div class="form-group">
<label for="age">Umur</label>
<div class="input-group" data-validate="number">
<input id="age" type="number" oninput="calsPerDay()" placeholder="tahun" name="umur" required>
</div>
</ <div class="form-group">
<label>Berat</label>
<div class="input-group" data-validate="number">
<input id="weight" type="number" oninput="calsPerDay()" placeholder="in kg" name="berat" required>
</div>
</div>
<div class="form-group">
<label>Tinggi</label>
<div class="input-group" data-validate="number">
<input id="height" type="number" oninput="calsPerDay()" placeholder="in cm" name="tinggi" required>
</div>
</div>
<br>**strong text**
<label><span id="totalCals" ></span></label><br>
<input id="totalcals">
<br>
<input name="submit" type="submit" id="submit" value="Submit" >
</form>
function calsPerDay() {
function find(id) { return document.getElementById(id) }
var age = find("age").value
var height = find("height").value
var weight = find("weight").value
var result = 0
if (find("male").checked)
result = 66.47 + (13.75 * weight) + (5.0 * height - (6.75 * age))
else if (find("female").checked)
result = 665.09 + (9.56 * weight) + (1.84 * height - (4.67 * age))
find("totalCals").innerHTML = Math.round( result )
}
calsPerDay()

Show value in a field from javascript

I have a input field that is readonly that shows the user the money they have left over after spending. They first have to enter their income and in the spending field, it will show the value from the database. My problem is after calculating the money left over in javascript, the value does not show in the leftOver field. I am not sure what I am doing wrong. Here is my code:
<script type="text/javascript">
$(document).ready(function(){
$("#addRecord").hide();
$("#btnAdd").click(function(){
$("#addRecord").show();
});
});
</script>
<script type="text/javascript">
function getTotalIncome(){
var income = parseFloat(document.getElementById("income").value);
var otherIncome = parseFloat(document.getElementById("otherIncome").value);
var totalIncome = income + otherIncome;
document.getElementById("totalIncome").value = '$' + totalIncome;
}
</script>
<script type="text/javascript">
function getLeftOver(){
var totalIncome = parseFloat(document.getElementById("totalIncome").value);
var totalSpending = parseFloat(document.getElementById("totalSpending").value);
var leftOver = totalIncome - totalSpending;
document.getElementById("leftOver").value = '$' + leftOver;
}
</script>
</head>
<body>
<button id="btnAdd" type="button" name="btnAdd">Create A Budget</button>
<form id="addRecord" name="addRecord" action="Budget" method="post">
<h3>Income</h3>
<label>Income:</label>
<input type="text" name="income" id="income" onchange="getTotalIncome()"> <br>
<label>Other Income:</label>
<input type="text" name="otherIncome" id="otherIncome" onchange="getTotalIncome()"><br>
<hr>
<h3>Spending</h3>
<label>Total Amount Of Spending</label>
<input type="text" name="totalSpending" value="$${totalSpending}" disabled=disabled>
<hr>
<h4>You've budgeted</h4>
<label>Income</label>
<input type="text" name="totalIncome" id="totalIncome" readonly="readonly" onchange="getLeftOver()">
<label>Spending</label>
<input type="text" name="totalSpending" id="totalSpending" value="$${totalSpending}" readonly="readonly" onchange="getLeftOver()">
<label>Left Over</label>
<input type="text" name="leftOver" id="leftOver" readonly="readonly">
</form>
</body>

How do I add/remove text boxes with JQuery changing the variable name to keep the name attributes different?

I want to make a book catalog with JQuery to add books to a author. In the code That I have I am trying to add a author and have his books be in a array with his number only. Separated by other authors and their own arrays of books.
For example, when I press the button to add a author a input box appears so that I can add the authors name also a button to add a book that when I press that button I get an input box to add a books name.
When I press the add author again I want to be able to add another author with the same input boxes as before (adding more books to that author).
Also to add multiple books assigned to that author.
I have already done this in the pics but I get an array of everything. I want it to be separated by author.
author1 has an array of {book1, book2, book3...}
author2 has an array of {book13, book14, book15}
(i'm a beginner at JQuery)
This is the code that I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<button class="add_author">Add Author</button>
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author" value="" id="author1" />
<br/>
<button class="add_book">Add book</button>
<div>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function($){
var wrapper = $(".all_fields"); //Fields wrapper
var commonPart = $("#commonPart");
var add_author = $(".add_author"); //Add button ID
var add_subButton = $(".add_book"); //Add sub button ID
$('.my-form .add-box').click(function(){
var n = $('.all_fields').length + 1;
if( 15 < n ) {
alert('Stop it!');
return false;
}
$(add_author).click(function(e){
e.preventDefault();
var htmlToAdd = $('<label for="author' + n + '">Author <span class="author-number">' + n + '</span></label><br/><input type="text" name="author' + n + '" value="" id="author' + n + '" /><br/><button class="add_book">Add book</button><a class="add-book" href="#">Add Book</a><div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$(add_book).click(function(e){
e.preventDefault();
var htmlToAdd = $('<div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
updated code(fixed some bugs..), try this....
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<button onclick="addAuthor()" >Add Author</button><br><br>
<div id="addAuth"></div>
<br><br>
<button onclick="submit()" >Submit</button>
</div>
<div id="result" ></div>
</div>
<script type="text/javascript">
var authors = 0;
function addAuthor(){
authors++;
var str = '<div id="auth'+authors+'"><input type="text" name="author" id="author'+authors+'" />'
+'<button onclick="addMore(\'auth'+authors+'\')" >Add Book</button>'
+'</div>';
$("#addAuth").append(str);
}
var count=0;
function addMore(id){
count++;
var str = '<div id="bookDiv'+count+'">'
+'<input class="'+id+'" type="text" name="book'+id+'" />'
+'<span onclick="addMore(\''+id+'\')" style="font-size: 20px; background-color: green; cursor:pointer;">+</span>'
+'<span onclick="removeDiv(\'bookDiv'+count+'\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">-</span>'
+'</div>';
$("#"+id).append(str);
}
function removeDiv(id){
var val = confirm("Are you sure ..?");
if(val){
$("#"+id).slideUp(function(){$("#"+id).remove();});
}
}
function submit(){
var arr = [];
for(i=1; i<=authors; i++){
var obj = {};
obj.name = $("#author"+i).val();
obj.books = [];
$(".auth"+i).each(function(){
var data = $(this).val();
obj.books.push(data);
});
arr.push(obj);
}
$("#result").html(JSON.stringify(arr));
}
</script>
</body>
</html>
Please try this code and include jquery min js :
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number"></span></label>
<input type="text" name="author" value="" id="author1" />
<br/>
<div>
<label for="author1">book <span class="author-number"></span></label>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
<button type="button" class="add_author" onclick="AddCustomMOre();">Add More</button>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
<script> function AddCustomMOre(){
$(".all_fields ").append('<div id="commonPart" class="commonPart"><label for="author1">Author <span class="author-number"></span></label> <input type="text" name="author" value="" id="author1" /> <br/> <div><label for="author1">book <span class="author-number"></span></label> <input type="text" class="bookName" name="authBook[]"/></div> Remove</div>');
} </script>
You can try this....
<p class="all_fields">
<button class="add_author">Add Author</button>
<div class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author1" value="" id="author1" />
<br/>
<button div-id="1" class="add_book">Add book</button>
<div id="books1">
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<script>
var c=1;
$(".add_author").on("click",function(){
c++;
$(".all_fields").append('<div class="commonPart"><label for="author'+c+'">Author <span class="author-number">'+c+'</span></label><br/><input type="text" name="author'+c+'" value="" id="author'+c+'" /><br/><button class="add_book" div-id="'+c+'">Add book</button><div id="books'+c+'"><input type="text" class="bookName" name="authBook[]"/></div></div>');
});
$(".add_book").on("click",function(){
var id=$(this).attr("div-id");
$("#books"+id).append('<input type="text" class="bookName" name="authBook[]"/>');
});
</script>

How do i add fileds dynamically using codeIgniter with script?

i need add fields dynamically in my view form. i have a script function for that.. but i don't know how to include in that script into codeIgniter.
my controller -
class uploadfile extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper('url');}
//index function
function index()
{
//load file upload form
$this->load->view('upload_file_view');}}
my view -
<script type="text/javascript" src="<?php echo base_url("assets/js/myscript.js");?>" ></script>
</head>
<body>
<label for="doc" class=" control-label">SUPPORT DOCUMENT</label>
<div class="multi-field-wrapper ">
<div class="multi-fields">
<div class="multi-field">
<input id="doc" type="text" class="form-control" name="attachment[]">
</div> </div>
<button type="button" class="add-field">Add field</button> </div>
and my script path - C:\xampp\htdocs\samplecod\assets\js
i found a easy way to add multiple fields in view page
`<div class="form-group">
<div class="row colbox">
<div class="col-sm-offset-2 col-lg-8 col-sm-8 text-left">Description</div>
<div class="field_wrapper">
<input type="textarea" name="descrip[]" value="" size="35px" /><input type="text" name="voucher_no[]" value="" size="7px"/><input type="text" name="price[]" value=""size="7px"/>
<img src="<?php echo base_url('images/add-icon.png'); ?>"/>
</div></div></div>`
for this form this is the script:
<script type="text/javascript">
$(document).ready(function(){
var maxField = 20; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><input type="text" name="descrip[]" value="" size="35px"/><input type="text" name="voucher_no[]" value="" size="7px"/><input type="text" name="price[]" value="" size="7px"/><img src="<?php echo base_url('images/remove-icon.png'); ?>"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML); // Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>

Categories

Resources