How to modify label of input using JQuery - javascript

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 :)

Related

How to add an attribute to an input box that is present inside of a div

I have a div with a class, inside of a div where I have one input box. I need to add the attribute list='emp' to the input box.
<div class="divInput">
<input type="text">
</div>
$(".divInput").prop("list","emp");
Here I am not able to add the attribute.
This code adds an attribute to your text box, inside your container.
$(document).ready(function(){
$(".divInput").children().attr("list", "emp");
$(".divInput").children().prop("value","example");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divInput">
<input type="text">
</div>
You don't need jQuery for this - simply target the input with .document.querySelector() and and set the attribute with straight JS (.setAttribute()..).
Note that I added a placeholder attribute to demonstrate the success of this method.
let input = document.querySelector('.divInput input');
input.setAttribute("list","emp"); // inpect the input to find the attribute
input.setAttribute("placeholder","Example text"); // added to demonstrate the attribute has been set
<div class="divInput">
<input type="text">
</div>

How to set contents of a BootStrap Input Group using jQuery?

Below is an example of Bootstrap Code to create a input-group. How can I use jQuery to set the contents of the input-group using the id?
<div class = "container">
<div class = "input-group-addon">Your name</span>
<input type="text" class="form-control" id="inputField" placeholder="Full Name">
</div><br>
Also, is there a way I can make the input-group not editable. I want to use it to display read-only text.
$("inputField").???? <-- What goes here??
Thanks!!
$("#inputField").attr('readonly',true).val('myValue')
if you have access to the html put directly readonly="readonly" as attribute of input.
you can put value directly in HTML with the value attribute.
ps: dont forget the "#"
$('#inputField').val('the value');

Copy Text from Input form into DIV

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()

change input text field into label with input typed value inside label javascript

I want to change the text field into a label tag with input user typed text inside it. I have tried and seen many example which are working but not set value as a text in label. e.g.:
<input id="1" type="text" value="hi"/>
I want to replace this input text field with label or div tag with its innerHTML hi or the user typed value i have tried the example below but i it is not done by me.
<p id="1" onclick="wish(id)">sasdsad</p>
<script>
document.getElementById("1").outerHTML = document.getElementById("1").outerHTML.replace(/p/g,"div");
</scrip>
Element id should start with character not number.
With using jQuery
<input id="one" type="text" value="hi"/>
$('#one').replaceWith("<div>"+$('#one').val()+"</div>");
Or you can use like this as well, just for an alternative solution :
html
<input id="toChange" type="text" value="hi"/>
<p id="clickMe" onclick="changeTag()">Click Me</p>
jQuery
function changeTag(){
var originalForm = $('#toChange');
var div = $('<div/>',{
text : originalForm.val(),
id : originalForm.attr('id')
});
$('#toChange').replaceWith(div);
}
DEMO

<input> element in tinymce

I want to have input element in my editor so user can type something in it. I've tried just write html in my textarea but the input element goes unclickable (ex1)
Value: <input type='text' value='12.3'> kg
I've also tried to make contenteditable="true" div and input worked in it without problems, so it is tinymce problem (ex2)
I can't use input in editor even if I initialize tinymce with div and set html manually
ed.getBody().innerHTML = "Value: <input type='text' value='12.3'> kg"
You can't have an input element into textarea element.
Try
<form method="post" action="dump.php">
<label for="kgElement">Value:</label>
<input type='text' id="kgElement" placeholder='12.3'> kg
</form>
That is because you're having the Input field inside the textarea element. Which itself is fully editable.
Take it out of the textarea, and then it would work just the way you want it to.

Categories

Resources