Copy Text from Input form into DIV - javascript

I want to create 1 input field and one Div.
When u write text in the Input and hit the button i want the text to be displayed in the DIV. Its so simple but it just won't work.. i hope someone can do this easy task for me.
I tried last:
<form>
Bearbeitungstext: <input id="textInput" type="text"><br>
<input type="button" value="text einbinden" onclick="$('texxxt').val($('#textInput').val())">
</form>
<div id="texxxt">
</div>

Try to use id selector properly,
$('#texxxt').text($('#textInput').val());
Also you have to use .text() instead of .val(), .val() is not a function for div elements. It is for form elements which are having value property.
And the best approach for your case would be binding an explicit event handler,
var div = $("#texxxt"),inp = $("#textInput");
$("form button").click(function(e){
e.preventDefault();
div.text(inp.val());
});

This can be done with php $_GET($whatever); also, to do this you will need the name="whatever" on the input field.

Bearbeitungstext:
<input id="textInput" type="text"/><br>
<input type="button" value="text einbinden" onclick="$('#texxxt').html($('#textInput').val())"/>
<div id="texxxt">
to change DIV content we use html() not val()

Related

change value of next element jquery

I have an input field and span like below and want to replace the text in the span.
<div>
<input autofocus="autofocus" type="email" value="" name="buyer_signup_email" id="buyer_signup_email" autocomplete="off">
//want to change below elements text
<span class="help-block red-text">will change this text</span>
</div>
I tried this but not working
$('input[name="buyer_signup_email"]').next().val('dd')
Could someone tell me whats wrong here? Thank you.
try using .text() instead of .val()
$('input[name="buyer_signup_email"]').next().text('dd')

How to modify label of input using JQuery

I have HTML like following :
<div class="task-manager">
<label>Manager: <input type="text" value="" /></label>
</div>
I need to modify text of label Manager dynamically.
I tried using JQUERY text method, but it replaces input type also.
$taskTemplate.find(".task-manager label").text("M123")
You can use:
$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:";
You should change your HTML code, because <input> field is inside <label> and when you are changing value of this label, it's also overwriting and removing input form field:
<div class="task-manager">
<label>Manager:</label> <input type="text" value="" />
</div>
Just move the Input tag outside the label tag, because when your updating the text of your label, its erasing the content of label (which will obviously remove input tag inside it) , so change your code like this
HTML code:
<div class="task-manager">
<label for="title">Manager:</label>
<input type="text" id = 'title' value="" />
</div>
JS code:
$('.task-manager label').text('Deputy Manager :');
Live Demo # Jsfiddle:
http://jsfiddle.net/dreamweiver/w6arp71x/
note/suggestion:for attribute added to label to bind the input to the label by default
$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:"
this worked for :)

Focus on first form element inside span when span is clicked

I can't figure out how to focus on the first form element inside a span when the span is clicked. I've included my code, I had also messed around with 'closest' but had no luck.
<form>
<span>
<input id="content" type="text">
<label for="content">Content</label>
</span>
</form>
$('span').click(function() {
$(this).find('input').focus()
});
Any help is appreciated.
Before answering your actual question: there is a way to achieve what you're trying to do which doesn't even require any JavaScript.
If you wrap your input field in the label tag, clicking the label will automatically give focus to the field.
<form>
<label>
Content
<input id="content" name="content" type="text">
</label>
</form>
If you insist on doing it through JavaScript/jQuery, you'll have to make sure you only attach the click handler after the DOM is ready:
$(document).ready(function () { // Or equivalent: $(function() { ... });
$('span').click(function () {
$(this).find('input:first').focus(); // :first makes sure only the first input found is selected
});
});
why not use the label to trigger this functionality
the span will only cover the label and input so if i understand correctly you want the focus to be set on the input even when the user clicks the lable which can be achieved like so:
<form>
<span>
<input name="content" id="content" type="text">
<label for="content">Content</label>
</span>
</form>
But if you are trying to do something else then:
$(document).ready(function(){
$('span').click(function() {
$(this).find('input:first').focus();
});
});
Make sure your js is called after the DOM is loaded
<script type="text/javascript">
$(function(){
$('span').click(function() {
$(this).find('input').focus()
});
});
</script>

Auto-highlight an input field on focus

I was wondering if there was a way for text inside a input box (pre loaded using value="") to highlight when the user clicks on it?
input type='text' name='url' id='url' value='http://www.a-link.com/' />
EDIT
I need the text to he highlighted so the user can copy it.
<input type="text" name="textbox" value="Test" onclick="this.select()" />
You could attach javascript to the click event to select the text like so:
$(document).ready( function() {
$('#id').click( function( event_details ) {
$(this).select();
});
});
There is a potential issue where the user could be trying to click at a later point in the text to correct a typing mistake and end up selecting the whole thing. A better way would be to trigger this when the input gets focus from the user. you'd replace .click with .focus in the example above.
jQuery event documentation:
http://api.jquery.com/category/events/
Add the following onclick attribute to make the entire <input> automatically highlight when the user clicks on it:
<input type="text" value="Test1" onclick="this.select()" />
Alternatively, if you want the user to be able to change the selection after the initial click, change the onclick attribute to an onfocus attribute. This will also highlight the entire <input> when the user clicks on it, but it allows them to change the highlighted part manually afterwards:
<input type="text" value="Test2" onfocus="this.select()" />
Here is an example of both inputs in action.
You want to use focus property. Like this: http://jsfiddle.net/sCuNs/
html
<p><input type="text" size="40"></p>
css
input:focus, textarea:focus{
background-color: green;
}
Do you mean to select the text?
Use onclick event to fire the code:
document.getElementById("target-input-id").select();
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
This should do it:
<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />
<input id="inputField" type="text" size="40" value="text to be highlighted"></p>
document.getElementById('inputField').focus();
The default behavior for focus selects the text in the input field. I was looking for a solution not to do that when I found this.

Move focus to a particular field

I have a button that will add show a form on the page. how can I move the focus to the first field of the form when that button is clicked?
simple example:
HTML:
<form style="display:none;" id="newForm">
<input type="text" id="firstField">
</form>
<input type="button" id="showForm" value="add new">
jQuery:
$("#showForm").click(function(){
$("#newForm").show();
//move focus??
});
It might be this:
$("#newForm input:first").focus();
A quicker lookup would simply be.
$('#firstField').focus()
However if you removed the ID from your element then this would be better but slightly slower.
$('#newForm input:first').focus();
Try this:
$('input#firstfield').focus();

Categories

Resources