jQM code
for(var key in sessionStorage)
{
var item = sessionStorage.getItem(key);
var viewItem = $.parseJSON(item);
var titleR = viewItem.title;
$(".showTitleR").val(titleR);
}
html code
<div role="main" class="ui-content">
<div>
<input class="showTitleR" type="text" value="one and last value" />
</div>
</div>
The problem is that I can set only one and last value.
What I want is the list of all keys like this:
<div role="main" class="ui-content">
<div>
<input class="showTitleR" type="text" value="first" />
<input class="showTitleR" type="text" value="..." />
<input class="showTitleR" type="text" value="last" />
</div>
</div>
How can I solve it? Any help will be appreciated.
From what I see and if I understand correctly what are you trying to do - you are changing value for the same HTML element. You either create new HTML element or clone current and then change its value.
var item = $(".showTitleR");
item.clone().append(item.parent());
Try this:
for(var key in sessionStorage){
var item = sessionStorage.getItem(key);
var viewItem = $.parseJSON(item);
var titleR = viewItem.title;
$(".showTitleR:eq(0)").clone().val(titleR).insertAfter($(".showTitleR:last");
}
Related
I need to reset only the form fields that are changed (reset to previous value).
I tried to use the reset but it completely resets the entire form and I don't need this.
How can I do this?
function clearResult() {
document.getElementById("save").reset();
}
<div class = "container">
<form method="post" id="save" onload="onLoad()">
<div class="field">
<label for="id"> ID:</label>
<input type="number" id="id" name="id" />
</div>
<div class="field">
<label for="type"> Fragment Type: </label>
<input type="text" id="type" name="type" />
</div>
<div class="button">
<button type="submit" class="full">Save changes</button>
<input type="button" value="Cancel" onclick="clearResult()" />
</div>
</form>
</div>
First of all you should to store the predefined values of form elements to set them back when you want to reset them back.
Then you can use this globally defined initial values to set them back whnever reset event occurs.
var id, type;
const form = document.getElementById('save');
document.onload = (event) => {
id = form.id.value;
type = form.type.value;
};
function clearResult() {
form.id.value = id;
form.type.value = type;
};
It was simple. When page load just get values from that fields.
Make with document.onload:
var firstValue = document.getElementById("yourFieldId").value;
After form submit get values like below:
var currentValue = document.getElementById("yourFieldId").value;
And after submit in reset check if CURRENT VALUES equal with VALUES FROM FIRST TIME
Example
if(firstValue != currentValue){
document.getElementById("yourFieldId").value = firstValue;
}
I have my html elements like this:
<body ng-controller="addController">
<div class="col-sm-10">
<label class="control-label">tableName:</label>
<fieldset ng-repeat="tableName in tableNames">
<input type="text" class="form-control" ng-model="tableName.tableName" /><br />
</fieldset>
<button class="btn btn-default" ng-click="addNewTable()">Add tablename</button>
<input type="submit" ng-click="add()" />
</div>
<div>
<pre>{{tableNames|json}}</pre>
</div>
</body>
This code generates a text box every time button is clicked.
js:
function addController($scope, $http) {
$scope.tableNames = [];
$scope.addNewTable = function (tableName) {
$scope.tableNames.push({});
}
}
When i display tableNames it gives me:
[{"tableName":"textboxvalue"},{"tableName":"textboxvalue"}];
But what i intend is getting output of:
[{"tableName1":"textboxvalue","tableName2":"textboxvalue","tableName3":"textboxvalue"}];
What should I have to change in design in order to get desired output.
Thanks in advance.
You're pushing objects to the array each time but what you want is to add key value pair in the object in the array.
try this
$scope.tableNames = [{}];
$scope.addNewTable = function (tableName) {
$scope.tableNames[0].tableName = "textboxvalue" ;
}
I'm trying to add the rows dynamically plus auto-increment of a counter.I want to start with 1 then 2 then 3 and so on . I have added my code on plunker ,in which every time the max value is getting in first column like 4 then 1,1,2,3.Where am i going wrong ?i Want it to be 1,2,3,4.
Here is the plunker link http://plnkr.co/edit/GuDbJ3SHOPvWkHfNfd8E?p=preview
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder1").appendChild(oClone);
document.getElementById("myVal").value=_counter;
}
<div id="placeholder1">
<div id="template">
<div>
Value:<input type="text" id="myVal" placeholder="1">
Quantity:<input type="text" placeholder="Qty">
<input type="button" onClick="Add()" value="Click! ">
</div>
</div>
I think it is because you have multiple divs with the id="myVal". The id attribute should be unique on the page. If not, your page will still load, but you may have unexpected behavior.
You are changing the id of the template div, but not the myVal div.
I assume you are looking for something like this:
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder1").appendChild(oClone);
oClone.getElementsByClassName("myVal")[0].value = _counter;
}
<div id="placeholder1">
<div id="template">
<div>
Value:
<input type="text" class="myVal" placeholder="1">Quantity:
<input type="text" placeholder="Qty">
<input type="button" onClick="Add()" value="Click! ">
</div>
</div>
</div>
In your original you are cloning your template with the same id for the input. So when you do document.getElementById("myVal").value=_counter;, you only get the first input. I changed it to use class instead and get the input with the appropriate class that is a child of the cloned node.
I'm having trouble getting the value of a custom prompt in PHP. I actually made a custom prompt that consist of two input boxes and stored it in a variable. When I clicked a button I'll just call it. I have no problem with this for its working well.
var popup = "div id='overlay'>
<div id='box_frame'>
<div id='box'><a href='javascript:closeDialog()'>close</a>
<h2>Edit Material</h2>
<h1>"+projName+"</h1>
<label>Material</label>
<input name='boxMatName' type='textbox' value='"+matName+"' disabled />
<br>
<label>Quantity</label>
<input id='boxEstVal' type='textbox' value='"+estQty+"' />
<br>
<button onclick='javascript:saveDesc()'>Save</button>
<div id='try'></div>
</div>
</div>
</div>
";
I tried this to get the value from the prompts:
function saveDesc(){
var mat = ('#boxMatName').val();
var est = ('#boxMatName').text();
alert(mat+est);
However, I am not getting any results. Can you help me understand what I am doing wrong?
why dont you give another id to your input:
var popup = "div id='overlay'>
<div id='box_frame'>
<div id='box'><a href='javascript:closeDialog()'>close</a>
<h2>Edit Material</h2>
<h1>"+projName+"</h1>
<label>Material</label>
<input name='boxMatName' id="boxMatName" type='textbox' value='"+matName+"' disabled />
<br>
<label>Quantity</label>
<input id='boxEstVal' type='textbox' value='"+estQty+"' />
<br>
<button onclick='javascript:saveDesc()'>Save</button>
<div id='try'></div>
</div>
</div>
</div>
then, this should work.
function saveDesc(){
var mat = $('#boxMatName').val();
var est = $('#boxEstVal').val();
alert(mat + ' - ' + est);
}
by the way, did you include the jquery in the head of your html file?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
You are using <input> so you need val() and not text():
var mat = $("input[name=boxMatName]").val();
var est = document.getElementById('boxEstVal').value; // or $('#boxEstVal').val();
Please forgive me if I repeat the question.
I have HTML　that all elements inside a div tag has different id, suppose I have already get the reference to the div, is there any simple way to get the element by its id without iterate all elements with that div?
here is my sample html:
<div id="div1" >
<input type="text" id="edit1" />
<input type="text" id="edit2" />
</div>
<div id="div2" >
<input type="text" id="edit1" />
<input type="text" id="edit2" />
</div>
You may try something like this.
Sample Markup.
<div id="div1" >
<input type="text" id="edit1" />
<input type="text" id="edit2" />
</div>
<div id="div2" >
<input type="text" id="edit3" />
<input type="text" id="edit4" />
</div>
JavaScript
function GetElementInsideContainer(containerID, childID) {
var elm = {};
var elms = document.getElementById(containerID).getElementsByTagName("*");
for (var i = 0; i < elms.length; i++) {
if (elms[i].id === childID) {
elm = elms[i];
break;
}
}
return elm;
}
Demo: http://jsfiddle.net/naveen/H8j2A/
A better method as suggested by nnnnnn
function GetElementInsideContainer(containerID, childID) {
var elm = document.getElementById(childID);
var parent = elm ? elm.parentNode : {};
return (parent.id && parent.id === containerID) ? elm : {};
}
Demo: http://jsfiddle.net/naveen/4JMgF/
Call it like
var e = GetElementInsideContainer("div1", "edit1");
var x = document.getElementById("parent").querySelector("#child");
// don't forget a #
or
var x = document.querySelector("#parent").querySelector("#child");
or
var x = document.querySelector("#parent #child");
or
var x = document.querySelector("#parent");
var y = x.querySelector("#child");
eg.
var x = document.querySelector("#div1").querySelector("#edit2");
You don't want to do this. It is invalid HTML to have more than one element with the same id. Browsers won't treat that well, and you will have undefined behavior, meaning you have no idea what the browser will give you when you select an element by that id, it could be unpredictable.
You should be using a class, or just iterating through the inputs and keeping track of an index.
Try something like this:
var div2 = document.getElementById('div2');
for(i = j = 0; i < div2.childNodes.length; i++)
if(div2.childNodes[i].nodeName == 'INPUT'){
j++;
var input = div2.childNodes[i];
alert('This is edit'+j+': '+input);
}
JSFiddle
A given ID can be only used once in a page. It's invalid HTML to have multiple objects with the same ID, even if they are in different parts of the page.
You could change your HTML to this:
<div id="div1" >
<input type="text" class="edit1" />
<input type="text" class="edit2" />
</div>
<div id="div2" >
<input type="text" class="edit1" />
<input type="text" class="edit2" />
</div>
Then, you could get the first item in div1 with a CSS selector like this:
#div1 .edit1
On in jQuery:
$("#div1 .edit1")
Or, if you want to iterate the items in one of your divs, you can do it like this:
$("#div1 input").each(function(index) {
// do something with one of the input objects
});
If I couldn't use a framework like jQuery or YUI, I'd go get Sizzle and include that for it's selector logic (it's the same selector engine as is inside of jQuery) because DOM manipulation is massively easier with a good selector library.
If I couldn't use even Sizzle (which would be a massive drop in developer productivity), you could use plain DOM functions to traverse the children of a given element.
You would use DOM functions like childNodes or firstChild and nextSibling and you'd have to check the nodeType to make sure you only got the kind of elements you wanted. I never write code that way because it's so much less productive than using a selector library.
A simple way to do what OP desires in core JS.
document.getElementById(parent.id).children[child.id];
In HTML ids should be unique. I suggest you change your code to something like this:
<div id="div1" >
<input type="text" name="edit1" id="edit1" />
<input type="text" name="edit2" id="edit2" />
</div>
<div id="div2" >
<input type="text" name="edit1" id="edit3" />
<input type="text" name="edit2" id="edit4" />
</div>
Sample Html code
<div id="temp">
F1 <input type="text" value="111"/><br/>
F2 <input type="text" value="222"/><br/>
F3 <input type="text" value="333"/><br/>
Type <select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<input type="button" value="Go" onclick="getVal()">
</div>
Javascript
function getVal()
{
var test = document.getElementById("temp").getElementsByTagName("input");
alert("Number of Input Elements "+test.length);
for(var i=0;i<test.length;i++)
{
if(test[i].type=="text")
{
alert(test[i].value);
}
}
test = document.getElementById("temp").getElementsByTagName("select");
alert("Select box "+test[0].options[test[0].selectedIndex].text);
}
By providing different tag names we can get all the values from the div.
Unfortunately this is invalid HTML. An ID has to be unique in the whole HTML file.
When you use Javascript's document.getElementById() it depends on the browser, which element it will return, mostly it's the first with a given ID.
You will have no other chance as to re-assign your IDs, or alternatively using the class attribute.