Possible collision/conflict between 2 javascripts? - javascript

Here is example http://jsfiddle.net/rigaconnect/gLCjy/14/
One javascript ensures copy-paste value from above input field. User presses and holds ctrl, then click on field below.
$(document).ready(function(){
$("input").on('click', function(e) {
var name1 = $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').val();
if(e.ctrlKey) $(this).val(name1);
});
});
Second javascript changes input field value to 1 if in certain input fields value is entered or changed
<input type="text" name="is_row_changed[]" id="is_row_changed1" size="1">
<script>
$(".row_changed1").on("change", function () {
document.getElementById('is_row_changed1').value = 1;
});
</script>
html input fields are like this
<input type="text" name="date_year[]" id="date_year1" class="row_changed1" value="" size="2">
If I enter (or copy-paste) values without ctrl+click then all works as necessary.
However if I hold ctrl and click in field then value is copied and appears in the field, but value here <input type="text" name="is_row_changed[]" id="is_row_changed1" size="1"> does not change.
Enter something in left top field. Right top field value changes to 1. That is ok.
Then press and hold ctrl and click in left bottom field. Left bottom field value becomes the same as left top field's value. This is also ok.
But right bottom field value does not change. This is the problem... Actually no idea. Need advice to which direction to go....

That is because change event doesnot get triggered on programatically assined values. You can manually trigger it when you assign the value to the textbox.
$(document).ready(function () {
$("input").on('click', function (e) {
var name1 = $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').val();
if (e.ctrlKey) {
$(this).val(name1).trigger('change'); //Trigger the change event here.
};
});
});
Fiddle

Related

How to take input from text box and make it a clickable "href tel" next to the text box?

I have a text box on a website that displays a phone number. I'd like to have a link next to the text box (or underneath, doesn't matter) that says "Click to call". I want that link to call whatever phone number is displayed in the text box, but I can't figure out how to actually get that number into the tel: element. Can I just take the name of the text box and put that as the "tel:"?
Here's the text box:
<input name="txtPhone" type="text" id="txtPhone" onkeydown="javascript:ShowSave();" onchange="javascript:ShowSave();" style="width:120px;">
Can I just do something like this:
<a href="tel:[txtPhone]" >Click to call</a>
Or is that not possible or would I have to change the input type to "tel:"?
I apologize ahead of time as my knowledge of html is extremely limited.
In the solution below, the value of the phoneValue variable is updated as long as there is a data input to the <input> element. When the <a> element's click event fires, the <a> element's href attribute is assigned the phone number entered in the <input> element. Fill in the isValid() method to verify the phone number.
let inputElement = document.getElementById('txtPhone');
let phoneLinkElement = document.getElementById('tel');
let phoneValue;
/* User input can be validated within this method. */
function isValid(){
return true;
}
/* This method fires when data is input to the <input> element. */
inputElement.addEventListener('input', function() {
phoneValue = this.value;
console.log(`Current User Input: ${phoneValue}`);
});
/* This event fires when the <a> element is clicked. */
phoneLinkElement.addEventListener('click', function() {
if(isValid()){
phoneLinkElement.href = `tel: ${phoneValue}`;
}
});
#txtPhone {
width: 120px;
}
<input name="txtPhone" type="text" id="txtPhone">
<a id="tel" href="">Tel</a>
You can have a JS function that runs when the user clicks the Click to call link which will get the number input and set it as href. The bellow can be expanded to include validation and so forth.
<input type="text" placeholder="Telephone" id="telInput">
Click to call
<script>
function changeHref(){
// Selecting the input element and get its value
let inputVal = document.getElementById("telInput").value;
// Set it for the href
document.getElementById("tel").setAttribute("href", `tel:${inputVal}`);
// Test
console.log(inputVal);
}
</script>

unable to fetch input from input field

I am not able to get the input, entered by the user, from the input field; please help me out with this.
I am not able to figure out what is wrong here.
var ftemp = document.getElementById("Farenheit").value;
<td>
<input type="number" id="Farenheit">
</td>
when entering value in input field in the web page, input value is not being fetched at all.
console.log-ing the variable just shows a blank line .
This line of code
var ftemp = document.getElementById("Farenheit").value;
gets you the current value of that input at the time that line of code gets executed.
It does not update when the user changes the inputs value.
If you want it to do just that, you need to add an event listener to the input element that executes whenever the input event occurs:
var ftemp;
document.getElementById("Farenheit").addEventListener('input', function() {
ftemp = this.value;
console.log(ftemp);
})
<input type="number" id="Farenheit">
Add an event listener to the input element.
document.querySelector('input').addEventListener('keyup',function() {
console.log(this.value);
});
<input type="number" id="Farenheit" >

Populate hidden field with autocomplete value

I have an HTML form with a regular text input and a hidden field.
I also have the following code that will populate the hidden field with the value of the text field either when it is changed, or if the text field has a default value (supplied by the page itself):
$(document).ready(function() {
var emailinput = document.getElementById('emailval');
document.getElementById('usernameval').value = emailinput.value;
emailinput.onkeyup = function() {
document.getElementById('usernameval').value = emailinput.value;
}
emailinput.onblur = function() {
document.getElementById('usernameval').value = emailinput.value;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="email" id="emailval" />
<input type="hidden" name="username" id="usernameval" />
This works well, except in the case where the browser autofills the text field. If the user submits the form without changing the textfield.
So my question is, is there any way to have the javascript pull the value from the browser-autofilled text field?
Attach an event handler on the form's submit event, and copy the value of #emailval to #usernameval. For example, let's say your form has the ID, #form:
$('#form').submit(function (event) {
'use strict';
$('#usernameval').val($('#emailval').val());
});
Documentation: https://api.jquery.com/submit/
What is 'input7'? I'm assuming this is a key. You could add another event for when the mouse leaves the input box, to get that value, since the user has to use the mouse to select the value.
Another thing you might want to consider, is turn off autocomplete on that field.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
You could use the form's onsubmit event. Here's the pseudo code:-
form.onsubmit= function(e){
e.preventDefault();
document.getElementById('usernameval').value = document.getElementById('emailval').value;
this.submit();
}

If text of textbox is selected then make it null

I use meiomask for time masking.masking is working perfectlly on keypress event.
Now the problem is when i am in first textbox and then i press tab so now the focus is on second textbox and it's value is selected(as you see in image).now if i try to enter some value in this textbox then the focus is out of this textbox.so to enter value in this textbox every time i remove value using backspace then enter value in the textbox.
so basically i am trying to do is on focus of textbox, if textbox value is selected and user try to enter some thing(on keypress event) then make it null.so how to achieve this thing?
Thanks in advance.
code:
$(document).on('focus','.masktime',function(){
// $(this).val("");
});
You can either use placeholders...so,
<input class="masktime" type="text" placeholder="00:00">
instead of
<input class="masktime" type="text" value="00:00">
Or, if you wish to use the value of the input tag at all times, you can emulate the behaviour of an input[placeholder] using a combination of focus and blur.
$('.masktime').on('focus', function () {
$(this).attr('oldVal', $(this).val());
$(this).val('');
});
$('.masktime').on('blur', function () {
if($(this).val()=='') {
$(this).val($(this).attr('oldVal'));
}
});
DEMO

Check value fields that if the same empty value in last field?

I have several field that just get number, I want if user typed be identical value in two or more field empty value the last field that is identical by jQuery.keyup?
For Example:
<input name="num[]" value="11111">
<input name="num[]" value="33333">
<input name="num[]" value="11111"> // in this input should empty value it.
How can fix it?
$(function(){
$("input").blur(function(){
var _val = $(this).val();
var change = false;
$("input").each(function(){
if($(this).val() == _val){
if(change) $(this).val("");
else change = true;
}
})
})
})
What happens if I had 12345 in a box, then I went back to an earlier box and typed 123456? The 12345 would be cleared. I suggest:
Bind the check to onchange, NOT onkeyup.
Instead of clearing the value, change the background colour to red and disable the submit button.
Adjust Yorgo's code to achieve this end, because it seems to do what you asked.

Categories