How to display user input value inside label using onkeyup - javascript

I wanted to know how to display a value entered inside a textbox into a label by using the onkeyup method.
I am able to display it inside a textbox.
This is what i have done so far:
<script>
function multiply(value){
var x;
x= 2*value;
document.getElementById('out2x').value=x;
}
</script>
<body>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label for="">Input</label>
<input type="text" name="" onkeyup="multiply(this.value);">
<br>
<label for="">Result(x2):</label>
<input type="text" id="out2x" name="" readonly>
</div>
</body>
I tried to set the id 'out2x' to label but it doesn't work.

Where do you actually have the script in the document? It should be just before the CLOSING body tag so that by the time it's reached, all the HTML will have been parsed. If the script runs before the HTML is parsed, your document.getElementById() statement won't find a matching element.
Also, the value of the input is always a string. You must convert that to a number in order to do math with it. There are several ways to do this and you need to be prepared for situations where the input incorrectly has a non-numeric value in it, but below, I've converted the value by prepending a + to it.
A couple of other things....
You are not using the label element properly. The for attribute must have a value that matches the id attribute value of the form element the label is "for" or you can nest the form element within the label so that it knows what element it relates to.
Don't use inline JavaScript - separate it into the JavaScript code.
<body>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label>Input
<input type="text">
</label>
<br>
<!-- Not always best to use an input for output. -->
<span>Result(x2):
<span id="out2x"></span>
</span>
</div>
<!-- Place your script just before the closing body tag
so that by the time it's reached, all the HTML elements
will have been parsed. -->
<script>
// Do your event handling in JavaScript, not with inline JavaScript
document.querySelector("input").addEventListener("keyup", function(event){
// You must convert the input string to a number
document.getElementById('out2x').textContent = 2* +this.value;
});
</script>
</body>

In Your Case, I have a simple Keyup with jQuery like this
$('#value').keyup(function (){
$('#copy-value').val($(this).val());
});
So This Snippet for Example:
$('#value').keyup(function (){
$('#copy-value').val($(this).val());
});
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label for="">Input</label>
<input id="value" type="text" name="">
<br>
<label for="">Result(x2):</label>
<input id="copy-value" type="text" name="" readonly>
</div>
</body>

Related

How to style the tags present in document.write()?

I want to style the img tag present inside document.write(). How to do it?
I tried using img{height:100px; width:100px;} inside style tag in head but I don't think that's how it works.
<form name="myform" style="margin-left: 45%">
<input type="radio" name="ward" value="Thane">Thane</input><br>
<input type="radio" name="ward" value="Vashi">Vashi</input><br>
<input type="radio" name="ward" value="Andheri">Andheri</input><br>
<input type="radio" name="ward" value="Bandra">Bandra</input><br>
<input type="radio" name="ward" value="Dadar">Dadar</input><br>
<button onclick="display()" id="submit">Submit</button>
</form>
Above code is inside body of html and below code is inside script
if(document.myform.ward.value=="Thane")
{
document.write("Thank You!<br>You have selected Thane");
document.write("<img src='voted.gif'></img>");
}
I want the image and thank you message for Thane to get displayed only when user selects Thane. But I am not able to style the image. how to do it? I cant use innerHTML as it gets displayed on the same page where I'm selecting options and I don't want that. I'm a beginner so don't know how to do it. Thank you.
Although it is usually not recommended, you can use inline styling like so:
document.write("<img src='voted.gif' style='height:100px; width:100px;'>");
You do not have to close the img tag as it is a void element.
Have you tried get an element via for example
document.getElementsByTagName("some_tag_name")
With getElementsByTagName you can get an element, with an element you can use a style object and get or set properties of an element.
document.getElementsByTagName("some_tag_name").style.some_style_propertie = "some_value_of_propertie";
An example:
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Set solid border</button>
<script>
function myFunction() {
document.getElementById("myDiv").style.borderStyle = "solid";
}
</script>
</body>
</html>
Link of style object Javascript: https://www.w3schools.com/jsref/dom_obj_style.asp

HTML data parsing from DIV container

As I am pretty new to Web Development this might be an easy question.
In my HTML file I use the form method GET to parse data with the URL (it must be done this way, cannot be changed).
In this html there is a Text Field.
<div class="form-group {*if $ERROR_BEMERKUNG*has-error*/if*}">
<label for="text-comment">Bemerkung</label>
<textarea name="text-comment" id="text-comment" class="form-control" rows="3" placeholder="{$TRANSLATE.USERDATA.BEMERKUNG|default:'USERDATA.BEMERKUNG'}">{$COMMENT}</textarea>
</div>
How can I get the inside of this textfield, whatever is written in it afterwards, into my GET method? Hardcoded it works that way, but I don't know how I can get the value out of the div.
<input type="hidden" id="bemerkungen" name="bemerkungen" value= "TEST" />
EDIT: I didn't have to do anything for the textarea, it got parsed correctly.
But I have another div with a number field.
<div class="width115 left form-group has-feedback">
<span id="personen"> Anzahl Personen </span>
<input class="btn-input-wrapper" id="personen" type="number" min="1" value="1"/>
</div>
The value out of there is never parsed.
If by textfield you mean textarea, here's your answer:
All details you have in w3schools:
https://www.w3schools.com/tags/att_textarea_form.asp
Example:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_textarea_form
When you send example, it will show you generated GET link with textarea value.
You missing form="usrform" part tho, but it should work if you keep everything between <form> tags.

jQuery print variables in SPAN or P tags

I am trying to append a variable to an HTML SPAN tag or a P tag. I can show the variable in an INPUT tag with no problem. I am not sure why I am having an issue showing the variable in any other tags.
<script>
$(function()
{
$('.forecastedit'.click(function(e)
{
e.preventDefault();
$uid = $(this).attr('data-uid');
$service = $(this).attr('data-service');
$pol = $(this).attr('data-pol');
$('#uid').val($uid); // also tried $('.uid').val($uid);
$('#fcservice').val($service); // also tried $('#fcservice span').val($fcservice);
$('#fcpol').val($pol);
$('#forecastmodal').modal('show');
});
});
Here is the HTML that needs to be appended:
<div class="modal fade" id="forecastmodal">
<div class="modal-content">
// I have no problem getting the variables to print in the INPUT tags
<input type="text" class="form-control uid" id="uid" />
<input type="text" class="form-control fcservice" id="fcservice" />
<input type="text" class="form-control fcpol" id="fcpol" />
// These are the tags I would like to get the variable to print
<span class="uid" id="uid"></span>
<p class="service" id="service"></p> // P tag just for example
<span class="fcpol" id="fcpol"></span>
</div>
</div>
To reiterate, I want to be able to print out the JavaScript variables into SPAN tags or P tags rather than INPUT tags.
input, textarea etc. have the value attribute. Other tags like span, div etc. don't have that. You can use .text("my text") to insert the text into these elements
For more information:
jQuery add text to span within a div
There are several errors with your script
1) the click listener is wrongly applied
2) you should not use more than one #id per page
3) val() is meant to be used with form elements
Hope this fiddle helps you http://jsfiddle.net/nyum4pLa/

JQuery select on <script></script> elements

I have the following script used in html.twig page:
<script type="text/javascript" src="{{asset('/jquery-ui-1.11.2/external/jquery/jquery.js')}}"></script>
<script type="text/javascript" src="{{asset('/jquery-ui-1.11.2/jquery-ui.min.js')}}"></script>
<script type="text/javascript" src="{{asset('/js/jeoquery.js')}}"></script>
<script type="text/html" id="my_prototype">
<div class="form-horizontal">
<div class="form-group">
// my first textarea
</div>
<div class="form-group">
// my second textarea
</div>
<div class="form-group">
// my first input
<label for="my_date">Date</label>
<input type="text" id="my_date" name="my_datename" maxlength="10" class="form-control" />
</div>
</div>
</script>
My question is: How can I select "my_date" in jquery ? I wrote this, but it doesn't work:
$('#my_date').datepicker();
Thanks for your help,
Can you do the same with a jQuery object rather than a prototype?
e.g.: (I removed the id attributes so you can have more than one)
var $proto = $('<div class="form-horizontal">
<div class="form-group">
// my first textarea
</div>
<div class="form-group">
// my second textarea
</div>
<div class="form-group">
// my first input
<label>Date</label>
<input type="text" class="date_field" name="my_datename" maxlength="10" class="form-control" />
</div>
</div>");
This gives you a DOM structure you can insert where you need to.
Plus you can use
$proto.find('.date_field').datepicker();
...or you may have to insert it first and then call the datepicker extension.
I'm guessing you've put these tags between script tags because you're using it as a template.
Applying jquery-ui datepicker works on actual dom elements.
So you need to first apply your template and generate the "real" elements, then apply the datepicker.
Edit: and watch what happens with the id, when you generate multiple forms, you shouldn't have the same id multiple times. If it's transformed in something like "my_date_1", "my_date_2", maybe you're better off using a dedicated class for identifying the datepicker inputs instead of the id.

Get html elements (dynamically generated) with values using jQuery

Is it possible using jQuery to get whole div content(dynamically generated elements) with values? For example, child element may be a div, span, select, or input?
I am trying to save whole div content(generated on fly) with values as .html file. I tried with one div which has form and input elements.
HTML:
<div id="inputs">
<form class="mainForm">
<div style="height: 100%;" id="div1">
<label>Input1</label>
<input type="text" id="input1" name="input1"/>
</div>
</form>
</div>
<input id="addform" type="button" value="Click to add Input"/>
<input id="getform" type="button" value="Click to get html"/>
jQuery:
$(document).ready(function(){
$("input#addform").click(function(){
$("div#inputs").append($('form.mainForm').clone().html());
});
$("input#getform").click(function(){
alert($("div#inputs").clone().html());
});
});
FIDDLE:
http://jsfiddle.net/UhJfn/
How to get whole div#inputs content with values (entered by user) On click of Click to get html button?
Help would be appreciated.
P.S: Here I used only one input in form. But in my real case, we do have select, span, image, etc.
Try this,
You have to explicitly update the value attribute to achieve your need.
$(document).ready(function(){
$(document).on('keyup','input[type="text"]',function(){
$(this).attr('value',$(this).val());
});
$("input#addform").click(function(){
$("div#inputs").append($('form.mainForm').clone().html());
});
$("input#getform").click(function(){
alert($("div#inputs").clone().html());
});
});
DEMO

Categories