I have google map giving me coordinate values into one field, but I would need to keep this field and have it somehow coppied to another 2 fields
<input class="coordinates">50.48820,13.64855</input>
<input class="longtitude"></input>
<input class="latitude"></input>
as far as my tries went I made this
var s1=document.getElementById('coordinate');
var s2=document.getElementById('longtitude');
s1.onchange=function(){
s2.value=s1.value;
}
but I didnt come up with any way to implement the separation by comma
<input id="coordinates" value="50.48820,13.64855"></input>
<input id="longtitude"></input>
<input id="latitude"></input>
var s1=document.getElementById('coordinates');
var s2=document.getElementById('longtitude');
var s3=document.getElementById('latitude');
s1.onchange=function(){
s2.value=s1.value.split(",")[0];
s3.value=s1.value.split(",")[1];
}
Working fiddle: http://jsfiddle.net/uzso33av/
Use split function.
http://www.w3schools.com/jsref/jsref_split.asp
$('.coordinates').change(function(){
var a = $(this).val().split(',');
$('.longtitude').val(a[0]);
$('.latitude').val(a[1]);
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="coordinates" value="50.48820,13.64855" />
<input class="longtitude" />
<input class="latitude" />
Related
I'm an absolute beginner and tried to find similar questions but couldn't. Apologies if this has been answered previously.
In my assignment we need to create a form with 2 text fields and 1 button. The fields are for height and width and the idea is that onclick on the button will send the 2 parameters to a function that will change the height + width attributes for a photo. I know I'm doing something wrong because the picture simply disappears. Ideas? Thanks!
<html>
<head>
<script>
function borderResize(height1, width1)
{
document.getElementById('Amos').height = height1;
document.getElementById('Amos').width = width1;
}
</script>
</head>
<body>
<img src="Amos.jpg" id="Amos" />
<form>
<input type="text" id="height" placeholder="Height" />
<input type="text" id="width" placeholder="Width" />
<input type="button" value="click!" onclick="borderResize('height.value', 'width.value')"/>
</form>
</body>
</html>
When you write
onclick="borderResize('height.value', 'width.value')"
in means that on click borderResize function will be invoked with two string arguments, literally strings "height.value" and "width.value". In your case you want something like this
onclick="borderResize(document.getElementById('height').value, document.getElementById('width').value)"
In above case you are selecting element from DOM using getElementById method and then read its value property.
You should learn to use addEventListener(), I would recommend you not to use ugly inline click handler.
The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on.
Here is an example with your code.
window.onload = function() {
document.getElementById('button').addEventListener('click', borderResize, true);
}
function borderResize() {
document.getElementById('Amos').height = document.getElementById('height').value;
document.getElementById('Amos').width = document.getElementById('width').value;
}
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/s200x200/11034289_10152822971918167_2916173497205137007_n.jpg?oh=71de7a46a75a946cf1d76e5ab10c1cdc&oe=55889977&__gda__=1434173455_6127f174627ed6014c84e562f47bc44c" id="Amos" />
<input type="text" id="height" placeholder="Height" />
<input type="text" id="width" placeholder="Width" />
<input type="button" id="button" value="click!" />
However as for your immediate problem you can use
onclick="borderResize(document.getElementById('height').value, document.getElementById('width').value)"
onclick="borderResize('height.value', 'width.value')"
here you pass to borderResize strings: 'height.value', 'width.value'.
You may get value of input from function:
function borderResize(height1, width1)
{
document.getElementById('Amos').height = document.getElementById('height').value;
document.getElementById('Amos').width = document.getElementById('width').value;
}
Problem Summary
I have been working on adding up various numbers in fields, based on the value of input boxes. I am currently experiencing the issue in which jQuery is concatenating the value arguments as they are strings and I have been unable to successfully convert them to integers.
Further Description
Here is an example of the HTML I am using:
<form action="" method="post">
<input type="text" id="one" value="20.00" />
<input type="text" id="two" value="10.00" />
<a href="#" id="add">
Add up fields
</a>
<input type="submit" value="Submit" />
</form>
Here is my jQuery (this behavior described above was to be expected with this script):
$(function(){
var one = $('#one').val(),
two = $('#two').val();
$('#add').click(function(e){
e.preventDefault;
var three = one + two;
alert(three);
});
});
This resulted obviously in the output:
20.0010.00
So I tried modifying my first variable declarions with parseInt() like so:
var one = parseInt($('#one').val(),10),
two = parseInt($('#two').val(),10);
Nowever that just resulted in:
NaN
so I tried first obtaining the values and then converting to integers:
var one = $('#one').val(),
two = $('#two').val(),
i_one = parseInt(one),
i_two = parseInt(two);
But yet agan... NaN was the result of this.
I have also tried the above using parseFloat() which yielded the same unfortunate results.
I also tried (read somewhere on a blog) that adding + in front will force jQuery to treat the variables as integers so I did (see above for where i got one and two):
u_one = +one
u_two = +two
I am starting to think that obtaining values using val() prevents jQuery utilising them as anything other than strings... But I must be wrong.
Can you advise on how I can obtain these values in integer format so that I can have the result:
30.00
When the fields are added?
Preferebly whilst keeping the <input /> and not adding another hidden <span /> or something similar containing the number to which then I can run text() on.
Thanks for reading.
NOTE
It has come to light the problem was not related to jQuery and related to the template I was making use of. Code above works as pointed out in the comments below. I have accepted one as an answer however all jQuery examples posted will work.
try this way
$(function(){
var one = $('#one').val();
var two = $('#two').val();
$('#add').click(function(e){
e.preventDefault;
var three = parseInt(one) + parseInt(two);
alert(three);
});
});
refer working demo on jsfiddle :http://jsfiddle.net/adeshpandey/Y3xmW/
Use : var three = parseFloat(one + two);
See Demo
You are completely looking at the wrong problem!
You are extracting the value before the click occurs; the value is empty-string at that point.
the other way
$(function(){
var one = $('#one').val();
var two = $('#two').val();
$('#add').click(function(e){
e.preventDefault;
var three = parseInt(one) + parseInt(two);
$('#three').text("Total: " +three);
});
});
HTML
<form action="" method="post">
<input type="text" id="one" value="20.00" />
<input type="text" id="two" value="10.00" />
<a href="#" id="add">
Add up fields
</a>
<p id="three"></p>
<input type="submit" value="Submit" />
</form>
Try changing your input tags to type number:
<input type="number" id="one" value="20.00" />
i have some html code like this
<form name="first"><input name="firstText" type="text" value="General" />
<input name="secondText" type="text" value="General" />
<input name="ThirdText" type="text" value="General" />
<input name="FourthText" type="text" value="General" />
<input name="FifthText" type="text" value="General" />
</form>
<form name="second"><input name="firstText" type="text" value="General" />
<input name="secondText" type="text" value="General" />
<input name="ThirdText" type="text" value="General" />
<input name="FourthText" type="text" value="General" />
<input name="FifthText" type="text" value="General" />
</form>
i want to select "secondText" of form "second" using jquery or javascript and i want to change value of it using jquery.
Using jQuery:
var element = $("form[name='second'] input[name='secondText']");
Using vanilla JS:
var element = document.querySelector("form[name='second'] input[name='secondText']");
Changing the value: element.val(value) or element.value = value, depending of what you are using.
To the point with pure JS:
document.querySelector('form[name=particular-form] input[name=particular-input]')
Update:
This selector will return the input named "particular-input" inside form named "particular-form" if exists, otherwise returns null.
The selector filter "form[name=particular-form]" will look for all forms with name equals "particular-form":
<form name="particular-form">
The selector filter "input[name=particular-input]" will look for all input elements with name equals "particular-input":
<input name="particular-input">
Combining both filters with a white space, I mean:
"form[name=particular-name] input[name=particular-input]"
We are asking for querySelector(): Hey, find all inputs with name equals "particular-input" nested in all forms with name equals "particular-form".
Consider:
<form name="particular-form">
<input name="generic-input">
<input name="particular-input">
</form>
<form name="another-form">
<input name="particular-input">
</form>
<script>
document.querySelector('form[name=particular-form] input[name=particular-input]').style.background = "#f00"
</script>
This code will change the background color only of the second input, no matter the third input have same name. It is because we are selecting only inputs named "particular-input" nested in form named "particular form"
I hope it's more clear now.
;)
By the way, unfortunately I didn't found good/simple documentation about querySelector filters, if you know any reference, please post here.
// Define the target element
elem = jQuery( 'form[name="second"] input[name="secondText"]' );
// Set the new value
elem.val( 'test' );
Try
$("form[name='second'] input[name='secondText']").val("ENTER-YOUR-VALUE");
You can do it like this:
jQuery
$("form[name='second'] input[name='secondText']").val("yourNewValue");
Demo: http://jsfiddle.net/YLgcC/
Or:
Native Javascript
Old browsers:
var myInput = [];
myInput = document.getElementsByTagName("input");
for (var i = 0; i < myInput.length; i++) {
if (myInput[i].parentNode.name === "second" &&
myInput[i].name === "secondText") {
myInput[i].value = "yourNewValue";
}
}
Demo: http://jsfiddle.net/YLgcC/1/
New browsers:
document.querySelector("form[name='second'] input[name='secondText']").value = "yourNewValue";
Demo: http://jsfiddle.net/YLgcC/2/
You can try this line too:
$('input[name="elements[174ec04d-a9e1-406a-8b17-36fadf79afdf][0][value]"').mask("999.999.999-99",{placeholder:" "});
Add button in both forms. On Button click find nearest form using closest() function of jquery. then using find()(jquery function) get all input values. closest() goes in upward direction in dom tree for search and find() goes in downward direction in dom tree for search. Read here
Another way is to use sibling() (jquery function). On button click get sibling input field values.
I'm attempting to make a form that asks the user for a number of units, then asks whether or not they would like those units to be provisioned, and depending on the answer, generates text fields corresponding with the number of units the typed in, along with a text field asking for an account number.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
function Getunits(value) {
var units = document.getElementById('units');
for(count=0; count<=units; count++) {
$("<input type='text'>").appendTo("inpane");
}
document.getElementByTag('futureacc').InnerHTML='What is your account number? <input type="text" value="accountnum">';
}
</script>
</head>
<body>
<div id="container">
<form method="post" action="sendcontact.php">
<div id="unitammount" class="inpane">
Number of units ordered: <input type="text" name="units" id="units"/><br />
</div>
<div id="futureacc" class="inpane">
Are these units to be provisioned? <input type="radio" name="select" value="yes" onClick="Getunits('units.value')"/> Yes <input type="radio" name="select" value="no"/> No
</div>
Obviously I would like the new text fields to appear inside the futureacc div and inpane div respectively.
I don't know whether it's the loop that doesn't do anything or that I'm not appending correctly but as I currently have it this does nothing...
Any help would be greatly appreciated.
You had a number of errors with your code. It was confusing because you were mixing jQuery and pure Javascript. It's generally better to just use jQuery if you've decided to use it anyway. Your loop should have been iterating while it was smaller than units.val(), not while it was smaller than or equal to units. innerHTML is spelled with a lowercase "i," and your appendTo selector needed a period before the class name. I went ahead and cleaned up your code so it should work now!
HTML:
<div id="container">
<form method="post" action="sendcontact.php">
<div id="unitammount" class="inpane">
Number of units ordered: <input type="text" name="units" id="units"/>
</div><br>
<div id="futureacc" class="inpane">
Are these units to be provisioned? <input type="radio" name="select" value="yes" onClick="getUnits()"/> Yes <input type="radio" name="select" value="no"/> No <br>
</div>
</form>
</div>
Javascript:
function getUnits() {
var units = $("#units").val();
for (var count = 0; count < units; count++) {
$("<input type='text' /><br>").appendTo("#futureacc");
}
$("#futureacc").append('<br>What is your account number? <input type="text" placeholder="accountnum">');
}
WORKING DEMO
var units = document.getElementById('units');
needs to be
var units = document.getElementById('units').value;
you are passing value to onclick but it is a string will not give you exact value anyway you are not using it in you function so it doesnt have any side effect.
also you need to some error check to make sure that user has entered a number
with
for(count=0; count<=units; count++)
You are adding 1 more text box than user entered value. so if user has entered 4 you are creating 5 <= should be changed to <
This is wrong
onClick="Getunits('units.value')"
Instead use this:
onClick="Getunits(units.value)"
try this
$(document).ready(function(){
$('input[name=select]').click(function(){
if($(this).val() ==='yes'){
var numberOfTextboxes = $('#units').val();
for(var i =0; i<numberOfTextboxes; i++){
$('#unitammount').append('<input type="text" />');
}
}
});
});
See the fiddle
How would I go about creating a textbox with an auto-expanding width to fit it's content?
I keep finding plenty of info on height based expansions but not much on width.
I'd also like it to apply to every textbox on the page and not just specific ones.
Not sure if this is what you had in mind, but shouldn't this work?
<script language="javascript">
function expand(f)
{
f.size = f.size + 1;
}
</script>
<input type="text" size="20" onkeyup="expand(this)" />
If you want backspace key handling use this:
<input type="text" value="Sample text" onkeyup="(event.keyCode!==8)?this.size++:this.size--;" size="20">
If you want backspace key handling and to ignore arrow keys use this one:
<input type="text" value="Sample text" onkeyup="if(event.keyCode==8){this.size--;}else if(event.keyCode!==37&&event.keyCode!==38&&event.keyCode!==39&&event.keyCode!==40){this.size++;}" size="6">
I think a better solution would be to check the length of the text and modify the textbox if the text was too long rather than checking for every type of key event that shouldn't trigger an expansion. An example:
<script type="text/javascript">
function expand(textbox){
var minSize = 20;
var contentSize = textbox.value.length;
if(contentSize > minSize)
{
textboxSize = contentSize;
}
else
{
textboxSize = minSize;
}
}
</script>
<input type="text" size="20" onkeyup="expand(this)" />