I'm trying to write a script where users can type a phone number and store it in the input (which works in this demo: http://bootsnipp.com/snippets/featured/iphone-number-pad) and then update href="" = "tel:" + that-same-value. So for example the if the user types 600 999 999 the href is updated to href="tel:600 999 999" and the user can then click the the button and make a call.
I've been beating myself up trying to figure this out. It seemed really simple because I'm not even trying to use restrict the phone number to 6-7 characters long.
Any help would be greatly appreciated.
$(document).ready(function() {
// Get number
$('.num').click(function() {
var num = $(this);
var text = $.trim(num.find('.txt').clone().children().remove().end().text());
var telNumber = $('#telNumber');
$(telNumber).val(telNumber.val() + text);
$('#call-this').href = "tel:" + $(telNumber).val(telNumber.val() + text)
console.log(text);
console.log(telNumber);
});
// add number to href
var call = $(#call - this).attr('target')
// Other stuff I've tired
// $('#call-this').click(
// $('#call-this').href="tel:" + $(telNumber).val(telNumber.val() + text)
// var call = $('#call-this');
// $('#call-this').href= "tel:" + telNumber;
// console.log(call);
// });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" name="name" id="telNumber" class="form-control tel" value="" />
<div class="num">
<div class="txt">0</div>
</div>
<div class="num">
<div class="txt">1</div>
</div>
<div class="num">
<div class="txt">2</div>
</div>
<div class="num">
<div class="txt">3</div>
</div>
<div class="num">
<div class="txt">4</div>
</div>
<div class="num">
<div class="txt">5</div>
</div>
<div class="num">
<div class="txt">6</div>
</div>
<div class="num">
<div class="txt">7</div>
</div>
<div class="num">
<div class="txt">8</div>
</div>
<div class="num">
<div class="txt">9</div>
</div>
<button class="expand">
Call
</button>
Your function can actually be simplified into this — the reason is that you don't need to actually transverse all the way to the .txt element if it is the one and only child of .num and that it only contains the number of interest.
$(document).ready(function () {
$('.num').click(function () {
// Append trimmed number to current value
$(telNumber).val($(telNumber).val() + $(this).text().trim());
// Update href attribute on #call-this
$('#call-this').attr('href', 'tel:'+$(telNumber).val());
});
});
See fiddle here: http://jsfiddle.net/teddyrised/jwqL4o8w/3
In fact, a better choice would be to store the number in the HTML5 data- attribute, so you can freely change the innerHTML of the .txt element without having to worry about issues:
<div class="num" data-num="0">
<div class="txt">0</div>
</div>
Then for your JS, just use:
$(document).ready(function () {
$('.num').click(function () {
// Append trimmed number to current value
$(telNumber).val($(telNumber).val() + $(this).data('num'));
// Update href attribute on #call-this
$('#call-this').attr('href', 'tel:'+$(telNumber).val());
});
});
I think where you have
$('#call-this').href="tel:" + $(telNumber).val(telNumber.val() + text)
It should be
$('#call-this').attr("href", "tel:" + telNumber.val());
edit I just caught the double val()
I think you need this, i have simplified the solution.
$("#telNumber").on("blur", function() {
$("#call-this").prop("href", "tel:" + $(this).val());
alert($("#call-this").prop("href"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" name="name" id="telNumber" class="form-control tel" value="" />
<button class="expand">
Call
</button>
If you want to link a button your HTML code should look like this:
<input type="tel" name="name" id="telNumber" class="form-control tel" value="" />
<div class="num">
<div class="txt">0</div>
</div>
<div class="num">
<div class="txt">1</div>
</div>
<div class="num">
<div class="txt">2</div>
</div>
<div class="num">
<div class="txt">3</div>
</div>
<div class="num">
<div class="txt">4</div>
</div>
<div class="num">
<div class="txt">5</div>
</div>
<div class="num">
<div class="txt">6</div>
</div>
<div class="num">
<div class="txt">7</div>
</div>
<div class="num">
<div class="txt">8</div>
</div>
<div class="num">
<div class="txt">9</div>
</div>
<form action="#">
<input type="submit" value="Call" />
</form>
and script will be:
$(document).ready(function () {
$('.txt').on('click', function () {
$("#telNumber").val($("#telNumber").val() + $(this).text());
$("form").attr('action', "tel:" + $("#telNumber").val());
});
});
JSFiddle
Related
***<!DOCTYPE html>
<html lang="en">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7 /css/bootstrap.min.css" rel="stylesheet"/>
<div id="order-details-booking">
<blockquote>Self-order Menu</blockquote>
<div class="form-holder col-xs-14">
<div class="input-field col s4">
<input type="text" id="item-" placeholder="Item Code"/>
</div>
<div class="input-field col s2">
<input type="text" id="item-code" placeholder="Qty" />
</div>
<div class="input-field col s5">
<input type="text" id="item-code" placeholder="Remarks" />
</div>
<div class="col s1">
<i class="material-icons remove">- remove</i>
</div>
</div>
<div class="form-holder-append"></div>
<div class="row">
<div class="col-xs-4">
<i class="material-icons add">+ add</i>
</div></div>
</div>
<div id="order-details-booking2">
<blockquote>Self-order Menu</blockquote>
<div class="form-holder col-xs-1">
<div class="input-field col s4">
<input type="text" id="item-" placeholder="Item Code"/>
</div>
<div class="input-field col s2">
<input type="text" id="item-code" placeholder="Qty" />
</div>
<div class="input-field col s5">
<input type="text" id="item-code" placeholder="Remarks" />
</div>
<div class="col s1">
<i class="material-icons remove">- remove</i>
</div>
</div>
<div class="form-holder-append"></div>
<div class="row">
<div class="col-xs-4">
<i class="material-icons add">+ add</i>
</div></div>
</div>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7 /js/bootstrap.min.js"></script>
<script>
var id_count = 1;
$('.add').on('click', function() {
var source = $('.form-holder:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count;
});
clone.appendTo('.form-holder-append');
id_count++;
});
//button for add second holder
var id_count2 = 1;
$('.add').on('click', function() {
var source = $('.form-holder:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count2;`enter code here`
});
clone.appendTo('.form1-holder-append');
id_count++;
});
// Removing Form Field
$('body').on('click', '.remove', function() {
var closest = $(this).closest('.form-holder').remove();
});
</script>***
webpage contain 2 form holder, when ever i click add button the action should be performed to each holder separately, but now the if we press add button, the it add form to both form holder.I shared the code in above, I hope I may get help as soon as possible, Thank for help..
********It looks like your post is mostly code; please add some more details.
if you only have two formholders you can solve this by useing unique classes.
var id_count = 1;
$('.add1').on('click', function() {
var source = $('.form-holder1:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count;
});
clone.appendTo('.form-holder-append1');
id_count++;
});
//button for add second holder
var id_count2 = 1;
$('.add2').on('click', function() {
var source = $('.form-holder2:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count2;`enter code here`
});
clone.appendTo('.form-holder-append2');
id_count++;
});
// Removing Form Field
$('body').on('click', '.remove', function() {
var closest = $(this).closest('.form-holder').remove();
});
if you have a dynamic amount of formholders you should use a each() function and count the formholders and each element inside with eq(). This results in only one function for all formholders, independently how many.
I am creating a lot of numbers inside of a div. Each time someone clicks a number I want to add it to another div. Let me make myself clear with some examples:
When a user clicks on the add class, the value of .addcop should be added to the value of .totalyHide. That means the value should change to 12.
When I click on the .add2 the value should be added on to 12, so the value of .totalyhide becomes 32.80.
and other terms, if I click the first + and click the second +, they should be added together on Yearly Price.
I hope you understand what I am trying to do.
$('.add').click(function() {
$('.addcop').click();
var dp = $(".addcop").val();
var total = $(".totalyHide").val();
var bigTotal = parseFloat(total) + parseFloat(dp);
$(".totaly").val("$" + bigTotal);
});
$('.add2').click(function() {
$('.procurement').click();
var procurement = $(".procurement").val();
var total = $(".totalyHide").val();
var bigTotal = parseFloat(total) + parseFloat(procurement);
$(".totaly").val("$" + bigTotal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="box box6">
<div class="titlet">work on it
<hr>
</div>
<div class="explain">to help you better</div>
<div class="money">
<p class="me">$12 Yearly</p><i class="add fas fa-plus-square fa-2x"></i></div>
<input type="text" name="content" class="addcop" style="display: none;" value="12">
</div>
<div class="box box5">
<div class="titlet">Procurement
<hr>
</div>
<div class="explain"></div>
<div class="money">
<p class="me">$20.80 Yearly</p><i class="add2 fas fa-plus-square fa-2x"></i></div>
<input type="text" class="procurement" style="display: none;" value="20.80">
</div>
<div class="box box8">
<div class="total">Your First Deposit will be: <input class="total1" type="button" value="$546"></div>
<input type="text" class="totalHide" style="display: none;" value="546">
<div class="total">Yearly Price: <input onchange="myFunction()" class="totaly" type="button" value="$0"></div>
<input type="text" class="totalyHide" style="display: none;" value="0">
<div class="total">On-off Price: <input class="total" type="button" value="$546"></div>
<input type="text" class="total" style="display: none;" value="546">
</div>
There is a minor issue with the JQuery code that you have written. You can add the following changes to get the desired result.
$('.add').click(function() {
$('.addcop').click();
var dp = $(".addcop").val();
var total = $(".totalyHide").val();
var bigTotal = parseFloat(total) + parseFloat(dp);
$(".totalyHide").val(bigTotal); // Add this line here
$(".totaly").val("$" + bigTotal);
});
$('.add2').click(function() {
$('.procurement').click();
var procurement = $(".procurement").val();
var total = $(".totalyHide").val();
var bigTotal = parseFloat(total) + parseFloat(procurement);
$(".totalyHide").val(bigTotal); // Add this line here
$(".totaly").val("$" + bigTotal);
});
The thing to note here is that whenever you are calculating the total,
you'll have to set that total to $(".totalyHide"), so that you can read the updated value upon next click.
I have created an Add / Remove input fields. I want to get total of 'Amount' using Javascript which should not exceed 100%. Means the total of amount should not exceed 10000.
Say for example first field will have 3000, second will have 6000 and third will have 1000. If we enter larger number it should not accept it.
var i = 0;
jQuery(document).ready(function($) {
//fadeout selected item and remove
$(document).on('click', '#remove-allocation-fields', function(event) {
event.preventDefault();
$(this).parent().fadeOut(300, function() {
$(this).parent().empty();
return false;
});
});
var rows = '<div class="fund-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>';
//add input
$('#add-allocation-fields').click(function() {
$(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
i++;
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading">
<center><b>Allocation of Funds</b></center>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-5">
<label>Allocation Items <b style="color:#FF0000;">*</b></label>
</div>
<div class="col-md-5">
<label>Amount <b style="color:#FF0000;">*</b></label>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<input type="text" class="form-control" name="allocate_items[]" placeholder="">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input type="text" class="form-control" name="allocate_amount[]" placeholder="">
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success" id="add-allocation-fields">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</div>
</div>
<div id="fund-allocation-fields"></div>
<p class="help-block"><i>Total amount must be equal to the goal amount.</i></p>
</div>
</div>
Please Help me. Thanks in advance.
If I understand correctly you could do something as simple as:
var val1 = document.getElementById('inputOne').value;
var val2 = document.getElementById('inputTwo').value;
var val3 = document.getElementById('inputThree').value;
if(val1+val2+val3 < 10000){
// Less then 10000 so do your stuff
} else{
// More then 10000 so let the user know they went too far
}
You can also do it in jQuery. Just change document.getElementById('inputOne').value to $('#inputOne').val()
If the elements are built dynamically you could just do something like this:
var inputs = Array.from(document.querySelectorAll('.inputsToAdd'));
var number = 100;
document.getElementById('btn').addEventListener('click', ()=>{
inputs.map(input=>{
number+=parseInt(input.value);
})
if(number<10000)
console.log(true);
else console.log(false)
})
This is a bit of a connundrum since you have the ability to add infinite input fields, in common practice this is a bad UI experience but to resolve your issue.
You want to sum all the values on click and if the values are too high throw an error. You can accomplish this by assigning each inputField a class and then summing the collection of that class.
I made a small sample using jQuery, a conditional and .each() like so:
$('#sum').click(function(){
var nums = 0
$('.valueField').each(function(){
nums += parseInt(this.value)
});
nums > 10000 ? console.log("value too high", nums) : console.log("compute works", nums)
})
See my small demo below:
$('#sum').click(function() {
var nums = 0
$('.valueField').each(function() {
nums += parseInt(this.value)
});
nums > 10000 ? alert("value too high", nums) : alert("compute works", nums)
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type='number' class='valueField' />
<input type='number' class='valueField' />
<input type='number' class='valueField' />
<button id='sum'>Click</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
I am building script where I can add some dynamic fields and then delete it if I want. But I can't delete that first el class in my script, because it deletes all within input_fields_container class. How to do it correctly? Here's my code:
<div class="input_fields_container">
<div class="col-lg-12">
<div class="col-lg-2"></div>
<button class="btn btn-sm btn-primary add_more_button" style="float: left; margin-bottom: 10px;">
#lang('main.add more fields')
</button>
</div>
#foreach(Auth::user()->test as $data)
<div class="el">
<div class="form-group">
<label class="col-lg-2 control-label">#lang('main.test')</label>
<div class="col-lg-6">
<input type="text" name="test[]" class="form-control" value="{{ $data->test }}" >
</div>
</div>
</div>
#endforeach
</div>
<script type="text/javascript">
$(document).ready(function() {
var max_fields_limit = 10; //set limit for maximum input fields
var x = 1; //initialize counter for text box
$('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
e.preventDefault();
if(x < max_fields_limit){ //check conditions
x++; //counter increment
$('.input_fields_container').append('<div class="el"><div class="form-group"><label class="col-lg-2 control-label">#lang('main.test')</label><div class="col-lg-6"><input type="text" name="test[]" class="form-control"></div></div><div class="form-group"><label class="col-lg-2 control-label"></div></div><div>#lang('main.delete')</div></div>');
}
});
$('.input_fields_container').on("click",".remove_field", function(e){ //user click on remove text links
e.preventDefault(); $(this).parents().eq(1).remove(); x--;
})
});
</script>
Your HTML in your append is structured wrong. Your div for the remove_field is not inside the '.el' div.
Try this...
$('.input_fields_container').append('<div class="el"><div class="form-group"><label class="col-lg-2 control-label">Main.test</label><div class="col-lg-6"><input type="text" name="test[]" class="form-control"></div></div><div class="form-group"><label class="col-lg-2 control-label"></div><div>main.delete</div></div></div>');
https://jsfiddle.net/chadsaun/Ljxw03Lp/
Try this
You need to change the class="el" to id="el"
$(document).on('click', '.remove_field', function () {
$('#el').closest('#el').remove();
});
You can give that 'a' tag an onclick function by id in the for loop. and one id for div with class name 'el' something like this code below:
$('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
e.preventDefault();
if(x < max_fields_limit){ //check conditions
x++; //counter increment
$('.input_fields_container').append('<div class="el" id='el" + id +"'>
<div class="form-group">
<label class="col-lg-2 control-label">#lang('main.test')</label>
<div class="col-lg-6"><input type="text" name="test[]" class="form-control"></div>
</div>
<div class="form-group"><label class="col-lg-2 control-label"></div>
</div>
<div>
#lang('main.delete')
</div>
</div>');
}
});
And then you can add the deletInput function like this code below, in this function the method finds div with the id of el+id and remove it:
function deleteInput(id){
$('#el'+id+'').remove();
}
Remember your id for el element must be unique.
This is the concept of removing inputs by id.
Hope this would help!
I have a combobox called select_person ={typeA, typeB}.
When an option is chosen I want to show other combobox has_id={has_id, has_no_id}
Now depending on value chosen in typeA or typeB and depending on that has_id or has_no_id I want to show (or keep hidden) the respective div.
So If the registry happens to have an id and is typeA I will show only an input field, but if is typeA and has no ID i will display 3 input fields, same for typeB.
to do so I am doing something like:
$(function () {
$('#select_person').change(function () {
$('#has_id').show();
if ($('#select_person').val() == 'typeA') {
$("#has_id").append("<option>" + $("#typeA_has_id").val() + "</option>");
$("#has_id").append("<option>" + $("#typeA_has_no_id").val() + "</option>");
}
if ($('#select_person').val() == 'typeB') {
$("#has_id").append("<option>" + $("#typeB_has_id").val() + "</option>");
$("#has_id").append("<option>" + $("#typeB_has_no_id").val() + "</option>");
}
});
});
$(function () {
$('#has_id').change(function () {
$('.persons').hide();
$('#' + $(this).val()).show();
});
});
});
and html
<Select id="select_person">
<option value="0">Select person</option>
<option value="typeA">typeA</option>
<option value="typeB">typeB</option>
</Select>
<Select id="has_id" style="display:none"></Select>
<div id="person1" class="persons" style="display:none">
<div class="form-left">Type A has id *</div>
<input type="text" id="name" name="name" class="form-input"
/>
</div>
<div id="person1" class="persons" style="display:none">
<div class="form-left">Type A has No id *</div>
<input type="text" id="id" name="id" class="form-input"
/>
<input type="text" id="name" name="name" class="form-input"
/>
<input type="text" id="address" name="address" class="form-input"
/>
</div>
<div id="person2" class="persons" style="display:none">
<div class="form-left">Type B has id *</div>
<input type="text" id="nameB" name="nameB" class="form-input"
/>
</div>
<div id="person2" class="persons" style="display:none">
<div class="form-left">Type B has No id *</div>
<input type="text" id="idB" name="idB" class="form-input"
/>
<input type="text" id="nameB" name="nameB" class="form-input"
/>
<input type="text" id="addressB" name="addressB" class="form-input"
/>
</div>
but isnot working, could you help me out? here is the jsfiddle
you have extra }); at the end of the document...
you have two ids with a same name person1..which is invalid HTML markup.. either remove it..and use classes
updated from your comment
i have created this example fiddle..reading your comment not sure if this is what you want.. but i am sure this will get you started
fiddle here
See what is happening in your code and html markup:
Your markup is invalid since it used same ids for multiple elements on same page.
Its also not clear how would you determine to put values in $("#typeA_has_id").val().
and you had a }); extra closing at the end as mentioned in other answers as well.
and if you want to put some values in the option list of your $('#has_id') then you can try with this one.
$("<option/>").val('a').text('a').appendTo("#has_id");
Although i have done something if you would like to see:
FIDDLE
changed html:
<div id="person-A-withID" class="persons" style="display:none"></div>
<div id="person-A-withoutID" class="persons" style="display:none"></div>
<div id="person-B-withID" class="persons" style="display:none"></div>
<div id="person-B-withoutID" class="persons" style="display:none"></div>
jQuery:
$(function () {
$('#has_id').show();
$('#select_person').change(function () {
$('.persons').hide();
if ($('#select_person').val() == 'typeA') {
$("#has_id").html('');
$("<option/>").val('0').text('--Choose Type A--').appendTo("#has_id");
$("<option/>").val('person-A-withID').text('person-A-withID').appendTo("#has_id");
$("<option/>").val('person-A-withoutID').text('person-A-withoutID').appendTo("#has_id");
}
if ($('#select_person').val() == 'typeB') {
$("#has_id").html('');
$("<option/>").val('0').text('--Choose Type B--').appendTo("#has_id");
$("<option/>").val('person-B-withID').text('person-B-withID').appendTo("#has_id");
$("<option/>").val('person-B-withoutID').text('person-B-withoutID').appendTo("#has_id");
}
});
$('#has_id').change(function () {
$('.persons').hide();
$('#' + $(this).val()).show();
});
});
One minor mistake : }); extra
http://jsfiddle.net/LEfbX/1/
$(function () {
$('#has_id').change(function () {
$('.persons').hide();
$('#' + $(this).val()).show();
});