$(document).ready(function() {
var parent = $('#foo');
parent.find('#bar').val('hi');
console.log(parent.prop('outerHTML'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<input type='text' id="bar" value="" />
</div>
I have a container div with child input element, the initial value is empty, after that I change it's value using jQuery and try to get the changed html string using .prop('outerHTML'). However it returns:
<div id="foo"><input type="text" id="bar" value=""></div>
I need to return it as:
<div id="foo"><input type="text" id="bar" value="hi"></div>
Is this possible ?
You can use .attr() instead.
$(document).ready(function() {
var parent = $('#foo');
parent.find('#bar').attr('value', 'hi');
console.log(parent.prop('outerHTML'));
$('#txt').text('hello');
console.log($('#par').find('#txt').prop('outerHTML'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<input type='text' id="bar" value="" />
</div>
<div id="par">
<textarea id='txt'></textarea>
</div>
For more details - visit following link.
Sure, use direct attrbite change, not element value.
$(document).ready(function() {
var parent = $('#foo');
parent.find('#bar').attr('value', 'hi');
console.log(parent.prop('outerHTML'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<input type='text' id="bar" value="" />
</div>
try this
$(document).ready(function() {
var parent = $('#foo');
parent.find('#bar').attr('value','hi');
console.log(parent.prop('outerHTML'));
});
Related
How can I insert value on <input type="text"> but this element is from append method. Here'is the code
HTML
<input type="email" name="invite_people" placeholder="Invite someone">
Add People
<div class="people_invite">
<!-- Here is <input type="text" name="people_invited" readonly> is added by jquery -->
</div>
Jquery
$(".add_people").click(function () {
var orang_yg_diinvite = $("input type='text' name='invite_people'>").val();
$(".people_invite").append("<input type='text' name='people_invited' readonly>");
});
It success for append <input type="text" name="people_invited" readonly> inside <div class="people_invite">, but I want to make <input type="text" name="people_invited" readonly> have an value from var orang_yg_diinvite . How can I do that? Please help me :)
There's mutliple ways to do that:
Just directly add it to the HTML of the input you're appending
$(".people_invited").append("<input type='text' value='"+orang_yg_diinvite+"'>");
Or
Edit your input's value after it was appended
$(".people_invited").append("<input type='text'>");
$(".people_invited>input").val(orang_yg_diinvite);
Demo:
$(".add_people").click(function () {
var orang_yg_diinvite = $("input[name='invite_people']").val();
$(".people_invited").append("<input type='text' value='"+orang_yg_diinvite+"'>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" name="invite_people" placeholder="Invite someone">
Add People
<div class="people_invited">
</div>
You can pass directly in value attribute of input
$(".add_people").click(function() {
var v = $("input[name='invite_people']").val();
$(".people_invited").append(`<input readonly type="text" value=${v} >`);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" name="invite_people" placeholder="Invite someone">
Add People
<div class="people_invited">
</div>
You can also add value and readonly attribute while appending input string.
$(".add_people").click(function () {
var orang_yg_diinvite = $("input[name='invite_people']").val();
$(".people_invited").append("<input type='text' name='people_invited' value='"+ orang_yg_diinvite +"' readonly />");
});
Create element using jQuery( html, attributes ) method, Here you can set HTML attributes
var input = $("<input/>", { type: 'text', value : orang_yg_diinvite})
$(".people_invited").append(input);
$(".add_people").click(function() {
var orang_yg_diinvite = $("input[name='invite_people']").val();
var input = $("<input/>", {
type: 'text',
value: orang_yg_diinvite
})
$(".people_invited").append(input);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" name="invite_people" placeholder="Invite someone">
Add People
<div class="people_invited">
<!-- Here is <input type="text" name="people_invited" readonly> is added by jquery -->
</div>
Javascript focus is not working in my code.
HTML
<div class="col-md-6" style="border:none; margin-top:2px; padding-right:5px">
<input type="text" id="edtunt" ng-model="Unit" class="form-control" placeholder="Edit Unit" />
</div>
Javascript
var textbox = document.getElementById('edtunt');
//document.getElementById("edtunt").focus();
document.getElementById("edtunt").focus();
$scope.Unit = unit.name;
use tabindex="0" for making div focusable
Your code works:
document.getElementById('edtunt').focus();
<div class="col-md-6">
<input
type="text"
id="edtunt"
ng-model="Unit"
class="form-control"
placeholder="Edit Unit">
</div>
Also, within your AngularJS application, you can add the autofocus attribute:
angular
.module('MyApp', [])
.controller('MyController', function() {});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div class="col-md-6">
<input
autofocus
type="text"
id="edtunt"
ng-model="Unit"
class="form-control"
placeholder="Edit Unit">
</div>
</div>
Indeed your code should work. Just a question, why you do:
var textbox = document.getElementById('edtunt');
document.getElementById("edtunt").focus();
Instead of:
var textbox = document.getElementById('edtunt');
textbox.focus();
What worked for me is making sure the whole document is loaded before setting focus. A very easy way to do that is using this copy paste JQuery code:
$( document ).ready(function() {
var textbox = document.getElementById('edtunt');
textbox.focus();
});
Hope this might help!
HTML:
<div id="Background">
<input id="search-Bar" type="text">
<button id="SearchButton">Search</button>
</div>
var name = $("#search-Bar").val();
$("#SearchButton").on("click", function() {
console.log(name);
});
i am trying to get the value of the input using .val() but when i console log it turns out blank every time, can someone please tell me how to fix this?
$("#SearchButton").on("click", function() {
var name = $("#search-Bar").val(); //this should be here
console.log(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background">
<input id="search-Bar" type="text">
<button id="SearchButton"> Search </button>
The name variable is being set only once on script load, when it's actually empty and stays at this state.
Declare it inside the functions body to get a new, actual value with every function call.
$("#SearchButton").on("click", function() {
var name = $("#search-Bar").val();
console.log(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background"></div>
<input id="search-Bar" type="text">
<button id="SearchButton"> Search </button>
You need to get the value using : $('#search-Bar').val()
var name = $("#search-Bar").val();
$("#SearchButton").on("click", function(){
console.log($('#search-Bar').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background">
<input id="search-Bar" type="text">
<button id="SearchButton"> Search </button>
I have a div like this
<div id="content">
<div>
<input type="text"/>
</div>
</div>
and some one enter a text abc in textbox and click save then need a code which return var a='<div><input type="text" value="abc"/></div></div>'
$("#content").html() not working for me.
UPDATED: Try setting the input attribute.I Have updated this for multiple input fields.
$(document).ready(function(){
$('button').on('click',function(){
$('input').each(function(){//looping each input field here
$(this).attr('value', $(this).val());//you need to set the attribute value to get in html
});
console.log($("#content").html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
</div>
<button >click</button>
How can I get the current value of the label elements within function showEditionBlock() and set them to the corresponding input fields? The function will show the "edit" div, but the inputs are not getting the original values of the labels.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<script>
$(document).ready(
function()
{
$("#companyNameText").keyup(
function()
{
$("#companyNameLabel").html(this.value);
});
$("#companyCountryText").keyup(
function()
{
$("#companyCountryLabel").html(this.value);
});
});
function showEditionBlock(){
//$("div#edit").css('display','block').fadeIn("slow");
$("div#edit").fadeIn('slow', function(){
$(this).css('display', 'inline');
});
}
function hideEditionBlock(){
//$("div#edit").css('display','block').fadeIn("slow");
$("div#edit").fadeOut('slow', function(){
$(this).css('display', 'none');
});
}
</script>
<body>
<div id="preview">
<fieldset>
<label id="companyNameLabel" class="workExperience">
This is my company
</label>
<label id="companyCountryLabel" class="workExperience">
This is my company Country
</label>
<input type="button" value="edit" onclick="showEditionBlock();"/>
</fieldset>
</div>
<div id="edit" style="display:none;">
<fieldset>
<label>Company Name: </label>
<input type="text" id="companyNameText" />
<label>Company Country: </label>
<input type="text" id="companyCountryText" />
<input type="button" value="Ok" onclick="hideEditionBlock();"/>
</fieldset>
</div>
</body>
</html>
You should assign the innerHTML of the labels to the values of the inputs. In plain ol' Javascript you can do something like:
document.getElementById("companyNameText").value =
document.getElementById("companyNameLabel").innerHTML;
document.getElementById("companyCountryText").value =
document.getElementById("companyCountryLabel").innerHTML;
Using jQuery, this is the same:
$("#companyNameText").val($("#companyNameLabel").html());
$("#companyCountryText").val($("#companyCountryLabel").html());