Is there a better way to "link" text inputs? - javascript

I want to have the input boxes linked so that when you type something in one, it shows up in the other (and vice versa). Here's a "codepen" that shows how I'm doing it currently.
http://codepen.io/anon/pen/yEAbk/
It's pretty simple, but I feel like there should be an easier way to accomplish this. There is also a problem with this method that I illustrated in the codepen. You'll notice the button that fills one of the boxes with a string. Even though the content has been changed, the "onchange" event doesn't run, and so the other input box is not updated.
Is there an easier way to do this that will fix the problems I've been having?

This is exactly the kind of problem databinding is meant to solve. There are lots of libraries out there, but the most popular currently is AngularJS (by google). http://angularjs.org/
See demo: http://jsfiddle.net/34ZCs/2/ both inputs are bound to variable yourName:
<div ng-app>
<div>
<input type="text" ng-model="yourName" placeholder="A">
<input type="text" ng-model="yourName" placeholder="B">
</div>
</div>

Use "onkeyup" instead of "onchange". Then the next textbox will be updated instantly.
Do something like this
<input type="text" name="a" id="a" onkeyup="fillBoth('a','b')" onfocus="fillBoth('a','b')" />
<input type="text" name="b" id="b" onkeyup="fillBoth('b','a')"
onfocus="fillBoth('a','b')"/>
<button type="button" id="clicky" onclick="fillWithX()">click here for xxx</button>
And you JavaScript should be updated like this.
function fillWithX() {
document.getElementById('a').value = 'xxx';
document.getElementById('a').focus();
}

Slight change in your event handler might do the trick. Take a look: http://codepen.io/anon/pen/budnp/
<input type="text" name="a" id="a" onchange="fillBoth('b', 'a');" />
<input type="text" name="b" id="b" onchange="fillBoth('a', 'b');" />
<button type="button" id="clicky" onclick="fillWithX()">click here for xxx</button>
and the script:
function fillBoth(copyTo, copyFrom) {
document.getElementById(copyTo).value = document.getElementById(copyFrom).value;
}

Related

Selenium with Python -- finding element without proper identifiers

I am using selenium with python to write the code. I am looking to pull the information from a text box. The box auto fills as other information is being filled out. Inspecting the box gives the following code:
<input type="tel" autocomplete="off" name="amount" step="any" class="form-
control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"
placeholder="" tw-focusable="" show-decimals="$ctrl.showDecimals" tw-number-
input-formatter="" ng-change="$ctrl.changedAmount()" ng-
model="$ctrl.ngModel" ng-disabled="$ctrl.ngDisabled" disabled="disabled"
style="">
The issue is that there is already another input box that has the name "amount", so I can't do a simple selection by name. I am thinking this would require me to use a CSS selector but everything I have tried so far has not worked. Please let me know what I can try.
Looks like you need to use CSS or XPath locators.
Its hard to tell how exactly you can find that element since you haven't provided a source of the entire page but here are some tips.
In the worst case when you cant find any combination of attributes that will uniquely identify the element you need to rely on dom nodes hierarchy, i.e. in order to find first input on the following page:
<!DOCTYPE html>
<html>
<head>
<title>Dummy page</title>
</head>
<body>
<div>
<div>
<input type="text">
</div>
<p>
<input type="text">
</p>
<input type="text">
</div>
</body>
</html>
You can use XPath locator that might look similar to this one:
//div/div/input
But that's the worst case, usually you can use more flexible locators based on element attributes that less likely to be affected by page structure modifications. Let's say each of our inputs from the page above has "name" and "disabled" attributes.
<div>
<div>
<input name="input1" disabled="" type="text">
</div>
<p>
<input name="input1" disabled="disabled" type="text">
</p>
<input name="input2" disabled="" type="text">
</div>
Then we can find first input using the following locator:
//input[#name="input1" and #disabled=""]
Hope that helps.

Show cursor on two text box at same time

I have two text boxes like,
<input type="text" id="left" />
<input type="text" id="right" />
Is it possible to focus these two text boxes at the same time?
I don't know how it possible.I need to show cursor in these two text boxes at the same time.
if i focus #left ,#right lost its focus.
Note : I am trying to create a side by side web application.shows two same views on single web page.
I know how to show the same values,I need to show the cursor blinking on two inputs.
Try doing something like this...Every time the left input is changed the right one's value is change too.
$("#left").on("input",function() {
$("#right").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="left" />
<input type="text" id="right" />
If you want to clone your input, you can simply do this by adding an oninput attribute like:
<input type="text" id="left" name="left" oninput="right.value = left.value; return true;" />
<input type="text" id="right" name="right" oninput="left.value = right.value; return true;" />
No jQuery needed. Customize it the way you want it. Here's a fiddle:
<input type="text" id="left" name="left" oninput="right.value = left.value; return true;" />
<input type="text" id="right" name="right" oninput="left.value = right.value; return true;" />
You can't, and you really shouldn't...
That's like asking you to read a book while watching TV.
However, that sort of thing, might be possible on multi-user & multi-touch OS machines. That is, two users on the same machine can work two different tasks simultaneously on the same surface. But that's military. And even than, one user, can only have one input focus at a time.
you can't focus same time, but you make it like you write in one textbox same time bind it in other textbox using jQuery or AngularJS.
I found http://codepen.io/keilin/pen/lCkap for css.
And added:
$("#left").on('keydown change', function(e) {
$("#right").val($(this).val());
console.log($("#right").val());
$overlay.text($(this).val());
var offset = $cursor.offset();
var inputLeft = $(_this).offset().left;
offset.left = Math.min($overlay.outerWidth(), $(_this).innerWidth() - 4);
offset.left = inputLeft + Math.max(offset.left, 0);
$cursor.offset(offset);
});
If i understand correctly, you want something this: https://jsfiddle.net/8csab3t1/1/
ps: It's just an example. Please check with two chars.

Change Input field grabbing NAME

I've searched about all I can. I'm trying to change the text of an input field using its name. I have found many ways to do it by ID like:
<script>
function changeValue(o){
document.getElementById('type').value=o.innerHTML;
}
</script>
<button id="technician" onclick="changeValue(this)">Technician</button>
<button id="developer" onclick="changeValue(this)">Developer</button>
<input type="text" id="type" name="type" value="change" />
But what I need to accomplish is for inputs without ID's.
Something along the lines of:
<script>
function changeValue(o){
document.getElementsByName('NAME').value=o.innerHTML;
}
</script>
<button id="technician" onclick="changeValue(this)">Technician</button>
<button id="developer" onclick="changeValue(this)">Developer</button>
<input type="text" name="NAME" value="change" />
Is there any way of accomplishing this?
UPDATE
I'm trying to expand on the javascript you guys helped me with.
The Snippet:
<script>
function changeValue(o){
document.getElementsByName('NAME')[0].value=o.innerHTML;
}
</script>
<span onclick="changeValue(this)" style="cursor: pointer;">One</span>
<span onclick="changeValue(this)" style="cursor: pointer;">Two</span>
<img src='image.gif' onclick="changeValue(this.src)" />
<input type="text" name="NAME" value="SOMETHING">
The spans are working correctly, although I don't actually need them. I will have all images once I figure this out.
I have tried a few ways, but what I can find is not directly related to my use.
The end goal is to get the img src into the text input with js, preferably somewhat how it already exists. I feel it's really close.
getElementsByName() returns a collection. use [] to access individual elements
ex :
function changeValue(o){
document.getElementsByName('NAME')[0].value=o.innerHTML;
}
document.getElementsByName('NAME') returns a list of elements by name. You need to provide the index as
document.getElementsByName('NAME')[0].value=o.innerHTML
Use document.querySelector like so
document.querySelector('input[name="NAME"]').value = o.innerHTML;
jQuery way
$('input[name="NAME"]').val("im changed!")

jQuery Rotate Plugin

I'm using jQuery Rotate plugin to rotate items. It works, but I experienced some problems.
I have that code:
<input type="text" name="np_angle" id="np_angle" size="2" maxlength="4" value="<?=$userinfo->np_angle?>" onchange="$('#np_drag').rotate(this.value)" />
<div id="np_drag" style="color:<?=$userinfo->np_color?>; font-size:<?=$userinfo->np_size?>px;position:absolute;top:<?=$userinfo->np_y?>px;left:<?=$userinfo->np_x?>px" class="draggable np_drag">
<?=$userinfo->np_text?>
</div>
<script>$("#np_drag").rotate(<?=$userinfo->np_angle?>);</script>
The problem is on input onchange. When I change it, #np_drag don't rotate. But when value is static (e.g. onchange="$('#np_drag').rotate(45)"
It works.
Why? How can I solve my problem?
Select it with an id
... id="my-id" onchange="$('#np_drag').rotate($('#my-id).val())" ...
Additionally, you might want to bind the onchange event via the dom-ready function instead of writing it in the HTML source
In the statement $('#np_drag').rotate(this.value), this will refer to np_drag and I believe you want it to refer to the value of np_angle. Try this:
<input type="text" name="np_angle" id="np_angle" size="2" maxlength="4" value="<?=$userinfo->np_angle?>" />
<script>$('#np_angle').bind('change', function(e){$('#np_drag').rotate($('#np_angle').val())});" </script>

In javascript how do I refer to this.form.checkbox[5].checked?

I have a series of checkboxes and input type="text" areas, wherein I need to have the state of the checkbox set to true when the value in the text area changes. Simple enough. I've done this successfully:
<input name="fixed" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed.checked=true">
Which works fine. You have to edit the field then click out of it, but that is fine for my needs:
...but when I switch to this:
<input name="fixed[0]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[0].checked=true">
<input name="fixed[1]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[1].checked=true">
I get no change to my checkboxes when I edit:
My only javascript know-how comes from googling this sort of thing, I'm afraid. Anyone have any better info on this than the Oracle of Google on The Mountain has in store?
thanks...
Switch from dot notation to bracket notation!
this.form['fixed[0]'].checked
It might be that you're mixing some shady practices in HTML, and when you do it in javascript, they're breaking.
So this.form.fixed[1] in javascript really says "The second item in the array this.form.fixed. So I think that's the problem. try naming your elements fixed0 and fixed1 and see if that works.
Edit: You could also use bracket notation, as illustrated by Peter, which should solve the problem without editing the names of the inputs.
Make life easier on yourself.
Create unique ID's for the elements you are trying to reference and refer to them from the elements to which you bind your events:
<input name="fixed[0]" type="checkbox" id="fixed_0">
<input name="stuff" type="text" onchange="document.getElementById('fixed_0').checked=true">
<input name="fixed[1]" type="checkbox" id="fixed_1">
<input name="stuff" type="text" onchange="document.getElementById('fixed_1').checked=true">

Categories