I am using Label or Div anything in html
<label id="userId" class="normalWeight editInfo"></label>
When page load, i am assigning the value to that id
document.getElementById('userId').innerHTML = allInfo.details.userId;
When i click the edit button, that is text will be editable. and then i will change the text and store into server. How to do this concept
I want like that. without using textbox. Is it possible?
The label has id of userName and you are searching for userId.
Try
document.getElementById('userName').innerHTML = allInfo.details.userId;
To allow editing, you should add a hidden textbox, that will be toggled when you click the edit button.
Assign this the value on load
document.getElementById('userName_Edit').value = allInfo.details.userId;
Then toggle this to visible, and hide the label.
document.getElementById('userName').style.display = "none";
document.getElementById('userName_Edit').style.display = "block";
You can use ajax and the contenteditable attribute.
Something like this?
function edit_label () {
var l = document.getElementById('userID');
if(this.innerHTML == 'Edit') {
this.innerHTML = 'Save';//we set the button's value to 'save'
l.removeAttribute("contentEditable");
}
else {
this.innerHTML = 'Edit';//we set the button's value to 'edit'
l.setAttribute("contentEditable", false);
//Here you should use ajax to send the data.
var data = l.innerHTML;//this will be sent
}
}
document.getElementById('edit_button').onclick = edit_label;
Demo: http://jsfiddle.net/uwaVL/
You should learn ajax before use it.
Ajax tutorial in w3schools: http://www.w3schools.com/ajax/default.ASP
Related
I have a list of inputs under a list of divs respectively. I have a button that when clicked it will switch one input from from not display to display. This is something like:
if (switched) {
document.getElementById("div-xxx").style.display = "block";
}
However, is there a way I could make the input inside the displayed div being auto focused after this switch? I tried something like
document.getElementById('input-xxx').autofocus = true;
after the display code, but there is no autofocus at all.
document.getElementById('input-xxx').focus() will change the focus to the selected element.
document.getElementById('input-xxx').setAttribute('autofocus', true) will assign the autofocus attribute to the html element
object.focus(); will help
if (switched) {
document.getElementById('div-xxx').style.display = "block";
document.getElementById('input-xxx').focus();
}
The only thing that worked for me was
if (switched) {
document.getElementById('div-xxx').style.display = "block";
document.getElementById('old-input').setAttribute('autofocus', false);
document.getElementById('input-xxx').setAttribute('autofocus', true);
document.getElementById('input-xxx').focus();
}
I'm a newbie to Javascript and from what I've read I assume there is a much better way to my approach, but here it goes.
I have a form with onclick such that when a clear image is clicked on in a table cell, the background pic of the cell changes (showing that it has been selected, or unselected if clicked again). That all works, now I want to define some variable so that when the form's Submit button is pressed, a form variable is passed showing whether or not the user selected that option.
The functional javascript I found on the internet:
var curPic1 = 0;
window.onload=function() {
document.getElementById('clear-kayangan').onclick=function() {
curPic1 = (curPic1 == 0)? 1 : 0;
document.getElementById('td_kayangan').style.backgroundImage = (curPic1 == 1)? 'url("pics/map-kayangan-lake-selected.png")' : 'url("pics/map-kayangan-lake.png")';
}
}
My plan was to write an IF statement stating if curPic1 == 1 (the background image chosen shows that the user has selected), I would create a Global variable which I could then pass on to php in the form:
$spot1 = "<script>document.write(spot1);</script>";
if ($spot1 == 1) echo "<input name='spot1' type='hidden' value='1' />";
For testing purposes I tried:
$spot1=$_POST['spot1'];
if ($spot1=="1") echo "<b>This really works</b><br>";
and it works if I use If $spot1==0, whereby at the top of my javascript function I tried the following:
int spot1;
spot1=0;
var spot1=0;
and within the javascript function itself I tried:
int spot1 = 1;
spot1 = 1;
window.spot1 = 1;
I haven't yet tried the IF statement because I'm just trying to test things if they work. I read that I was supposed to be able to establish a Global variable from within a function. I added the various options above one at a time. It works with spot=0, so I assume the problem is that it is not being set as a Global variable within the function? Or perhaps there is a better approach to all this?
On Submit the hidden form variables will eventually be passed to another page and used there.
Declare hidden variable in the form, and set it's value to 0 or 1 in onclick fuction of image. When form is submitted, this value will also be passed to server
as #santosh-sawant said, you should add an id to the hidden input and change the value in the same click handler you already have, like:
<?php
$spot1 = $_POST['spot1']=='1' ? 1 : 0;
?>
<input name="spot1" id="spot1" type="hidden" value="<?=$spot1?>">
and then in your JS:
var curPic1 = 0;
window.onload = function() {
document.getElementById('clear-kayangan').onclick = function() {
curPic1 = (curPic1 == 0) ? 1 : 0;
document.getElementById('td_kayangan').style.backgroundImage = curPic1 ? 'url("pics/map-kayangan-lake-selected.png")' : 'url("pics/map-kayangan-lake.png")';
document.getElementById('spot1').value = curPic1;
}
}
Using JQuery event handlers I want to adjust the default value of a HTML text input and set it to empty.
The input
<button id="setColor">Set Color</button>
<input type="text" id="colorText">
The function
$("#setColor").on("click", function ()
{
document.getElementById('#colorText').defaultValue = "";
});
I have also tried
$("#colorText").defaultValue = "";
$("#colorText").val = "";
$("#colorText").value = "";
but every time I click the SetColor button it seems to keep its previously set default value.
document.getElementById('colorText').defaultValue = "#0000ff";
Your question is not cleared to me, But i got a simple mistake in your code, you write extra # in getElementById
try this:
$("#setColor").on("click", function ()
{
document.getElementById('colorText').value = "";
});
Are you trying to reset the textbox color or want to reset the value?
document.getElementById('colorText').value = '';
$("#colorText").val("");
You can try this with jquery.
I have a grid that contains link-button for code column .The user can check each checkbox and when user clicked on the top button of my page all of code that user checked will be displayed in a text-box in another page. It means : (the user can select multiple row by checked check-box and pass all code that user select by jQuery function to text-box in another page), but my problem is I cant access and get text of the code. I used CSS and it works. It become yellow, but I can't access text when i run it. the alert statement represent me this text instead of code:
function (e){
return b.access(this,function(e){
return e===t?b.text(this):this.empty().append(
(this[0]&&this[0].ownerDocument || o).createTextNode(e))
},null,e,arguments.length)
}
How can I fix this problem? if anybody knows please help me to fix it, thanks.
function selectcheckCheckBoxes() {
alert("1234 ");
var gridClientID = $("#gvwHuman");
jQuery.each($("#gvwHuman input:checkbox"), function () {
if (this.checked) {
$(this).parent().next().css('background-color', 'green');
var a = $(this).parent().next().css('background-color', 'red'); ;
var j = $(a).find(".link").css('background-color', 'yellow'); ;
var j2 = $(j).text;
alert(j2);
}
});
}
try this:
var j2 = $(a).find(".link").text();
if it doesn't work, could you post your HTML as well?
The below code won't give the text of the link.its wrong syntax.
var j2 = $(j).text;
So change this as
var j2 = $(a).find(".link").text();
i would like to replicate that you see a regular input text and when you click it changes into textarea.
is this a hidden layer or is it actually changing the input to textarea? how to do it?
I do believe it's always a textarea and on focus they just change the height of the textarea.
Edit: yes, it is. They use scripting to do everything with a textarea, there is no input field.
<textarea onfocus='CSS.addClass("c4b900e3aebfdd6a671453", "UIComposer_STATE_INPUT_FOCUSED");CSS.removeClass("c4b900e3aebfdd6a671453_buttons", "hidden_elem");window.UIComposer && UIComposer.focusInstance("c4b900e3aebfdd6a671453");' id="c4b900e3aebfdd6a671453_input" class="UIComposer_TextArea DOMControl_placeholder" name="status" title="What's on your mind?" placeholder="What's on your mind?">
What's on your mind?
</textarea>
One method that I found was to have a text area that begins with a smaller width and height and then to dynamically resize it.
function sz(t) {
a = t.value.split('\n');
b=1;
for (x=0;x < a.length; x++) {
if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
}
b+= a.length;
if (b > t.rows) t.rows = b;
}
then you would call your function with an onclick event
onclick="function sz(this)"
I found this here
Fellgall Javascript
One problem that he does mention is that this only functions on browsers that support it.
You can combine the jQuery widget you can find here with some coding
Example:
<div id="myform">
<form>
<textarea></textarea>
<button type="submit" style="display:none;">Post</button>
</form>
</div>
<script>
$(document).ready(function(){
var widget = $('#myform textarea');
var button = $('#myform button');
var tarea = widget[0];
// turn the textarea into an expandable one
widget.expandingTextArea();
var nullArea = true;
tarea.value = "What's on your mind?";
widget.focus(function() {
button.css('display', 'block');
if (nullArea) {
tarea.value = "";
nullArea = false;
}
});
widget.blur(function() {
if ($.trim(tarea.value) == "") {
tarea.value = "What's on your mind?";
button.css('display', 'none');
nullArea = true;
}
});
});
</script>
This code will hide by default the post button and will show it only when the textarea is focused or when you already have written something into it (you may want to hide/show a div instead or anything you want).
If jQuery is an option for you at all, there's a jQuery plugin that does just this called Jeditable.
Check out the demos here.
One way to do this is to code a dynamic textarea. This article explains how to do it: http://www.felgall.com/jstip45.htm
Another way to do it is to change the type of the object. Let's say you place your input text in a div tag (its ID being "commentBox". The code would then be:
//when you click on the textbox
function makeTextArea()
{
document.forms[0].getElementById("commentBox").innerHTML = "<textarea id=\"comments\" onBlur=\"backToTextBox()\"></textarea>";
document.forms[0].getElementById("comments").focus();
}
//when you click outside of the textarea
function backToTextBox()
{
document.forms[0].getElementById("commentBox").innerHTML = "<input type=\"text\" id=\"comments\" onFocus=\"makeTextArea()\"/>";
}