Develop Reference

how to display the json array value in html input

I am using the following jquery
<script type="text/javascript">
$(document).ready(function(){
$("#serviceId").change(function(){
var service_id=$("#serviceId").val();
$.ajax({
type:"post",
url:"<?php echo base_url();?>index.php/pranasInventory/get_service_amount",
data:{service_id:service_id},
success:function(data)
{
$('#amount').append(data);
},
});
});
});
</script>
I got the follwing responce in html input field
<input type="number" name="amount" id="amount" class="form-control" placeholder="Amount">[{"service_amount":"2000000"}]</input>
I want to display the service_amount in input value field.
please help me

Just try with:
$('#amount').val( data[0].service_amount );

Instead of append the data object to input control, you should assign value to input control. You can try any one code
$('#amount').val(data[0].service_amount );
or
$('#amount').val(data[0]["service_amount"]);

How to load data to specific input value in javascript?

I am having this piece of code, to load data form PHP after users click on link.
Then I am displaying received data to div id="vies":
<script>
$(document).ready(function(){
$("#data-received").hide();
$("#click_me").click(function(){
$("#data-received").show();
$("#vies").load('127.0.0.1/get_data/', {VATID : $("#vat_id").val()});
});
});
</script>
<label>VATID</label>
<input type="text" id="vat_id" name="vat_id" value="">
Check VATID
<div id="data-received">
<label>Data received from PHP</label>
<div id="vies">.. checking ..
<input type="text" name="put-here" id="put-here" value="test-value"/>
</div>
</div>
The question is how to load data and insert as a input value here:
<input type="text" name="put-here" id="put-here" value="test-value"/>
instead to whole div.

<script>
$(document).ready(function(){
$("#data-received").hide();
$("#click_me").click(function(){
$("#data-received").show();
$.post('http://127.0.0.1/get_data/', {
VATID : $("#vat_id").val()
}, function(data) {
$('#put-here').val(data);
});
});
});
</script>

load() is a convenience function which does an ajax request and then replaces the target element with the data returned. When you don't want to replace the whole element, use jquery.ajax() to do the request. In the success callback you can set your value to the returned data using .val().
$.ajax({
url: "127.0.0.1/get_data/",
data: {VATID : $("#vat_id").val()}
}).done(function(data) {
$( '#put-here' ).val(data);
});

Update div when typing in text field

I want to update a div while changing the value of a input field.
Eg.
<form>
<input type="text" name="test"><!--Eg. 5+5-->
</form>
<div id="SomeId">
<img src=loading.gif>
</div>
So when you changed the value of the input field, it updated the div SomeId, with a external file Eg. calculate.php?test=5+5
So how can I listen on updating a input field?

<input type="text" onkeypress="doSomething(this.value);"> will send the entire value of the input element to the function after every key press.
Note that best practice is to bind the function on page load using JavaScript, and not with onkeypress but doing the latter gives a one-line example.
Here's a doSomething function for testing:
function doSomething(what) {
console.log(what);
}
Edited to add: If you don't want to process every keystroke, use the onchange event:
<input type="text" onchange="doSomething(this.value);">
Another edit:
var timerHandle = false; // global!
function setTimer(what) {
console.log("Captured keys: " + what);
if (timerHandle) clearTimeout(timerHandle);
timerHandle = setTimeout(sendItOff,1000); // delay is in milliseconds
}
function sendItOff() {
what = document.getElementById("test").value;
console.log("Sending " + what);
}
The input element now has to have an ID:
<input type="text" name="test" id="test" onkeypress="setTimer(this.value);">
This uses a one second (1000 ms) timer. That is very short.

In the focusout of the text field, Call java script function that should call ajax call to that calculate.php.
Return response from php file and update that in particular div Id.
function onfocusoutupdatevalue(){
$.ajax({
type: "POST",
url: "calculate.php",
data: { value: "5+5" }
}).done(function( ans ) {
$("#SomeId").val(ans)
});
}
You need to add jQuery lib file.

Set the default value of an input text

my requirement is to save the entire "html" inside a div, but when i load an "html" with text fields to a div and then editing the value of the text box, the newly set value doesn't reflect in the core "html". I tried to inspect the value with fire bug and it remains the same or no value at all.With "jquery" i tried to set attribute but no attribute name value is created. how can i set the value of text fields and then get that "html" with the newly set value.
here is my html
<div class="sub_input_box">
<input type="text" / class="boreder_line">
<input type="text" id="txt" value=""/>
<input type="hidden" id="hid" />
<div class="clear"></div>
</div>
and the jquery i used to set attribute
$("#txt").attr("value", "some value");

Chances are you're calling your jQuery code before the HTML input part. You can either place the jQuery stuff below it, or if you don't want to, you can do something like this:
$(document).ready(function(){
$("#txt").attr("value", "some value");
});
That will only run when the page is fully loaded.
However, it's unclear if you're using AJAX to load those inputs into your DOM. If so, you need to call $("#txt").attr("value", "some value"); in the onSuccess callback function which is fired after the AJAX successfully responds.

You can try something like this:-
<input name="example" type="text" id="example"
size="50" value="MyDefaultText" onfocus="if(this.value=='MyDefaultText')this.value=''"
onblur="if(this.value=='')this.value='MyDefaultText'" />

Have you tried:
$("#txt").val("Hello World!");
For setting the text value, and,
var my_string = $("#txt").val();
For getting the text value.
Let me know if it works.

Excellent question. You would think clone would do this on its own, alas, it doesn't.
Here is a sample than you can hopefully adapt to do what you need
HTML
<div id=divToCopy>
<input name=i1 value=foo><br>
<input name=i2 value=bar>
</div>
<input type=button onclick=copyDiv(); value='Copy the div'>
<div id=newDiv>
the copy will go here
</div>
JavaScript
function copyDiv() {
$('#newDiv').html($('#divToCopy').clone());
$('#divToCopy :input').each(function() {
var child=0;
for (var i = 0; i < this.attributes.length; i++) {
var attrib = this.attributes[i];
var prop=$(this).prop(attrib.name);
$($('#newDiv').find(' :input')[child]).prop(attrib.name,prop);
child++;
}
});
}

But it does work: http://jsbin.com/eXEROtU/1/edit
var html = '<input type="text" id="txt" value=""/>';
$(document).ready(function() {
$("#load").click(function() {
$("#sub_input_box").html(html);
});
$("#inspect").click(function() {
alert($("#txt").val());
});
});

$(document).on('focusout','input[type="text"]',function(a){
console.log(a.target.value);
a.target.setAttribute("value",a.target.value);
});
this is the solution i found, i had to set the value attribute explicitly on loose focus from the text field

strange behaviour - serialize

i have this code:
var sizes = ["1/9","1/8","1/7","1/6","1/5","1/4","1/3","1/2","1/1","2/1","3/1","4/1","5/1","6/1","7/1","8/1","9/1"];
var slider = new dijit.form.HorizontalSlider({
value:8,
name:"value"+[i],
slideDuration:0,
onChange:function(val){
dojo.byId('value'+[i]).value = sizes[val];
},
minimum:0,
maximum:sizes.length-1,
discreteValues:sizes.length,
intermediateChanges:"true",
},node);
now, when i made:
$("#custom").submit(function() {
var formdata = $("#custom").serializeArray();
$.ajax({
url: "insert.php",
type: "post",
dataType: "json",
data: formdata,
success: function(data) {
}
});
For example, if i choose the value 1/8 it is sent as 1, or 9/1 as 16.
What i want is send the fraction value, that is showed in the input box, but as i said, not sent to the insert.php
Any idea ? thanks

At the beginning during the init of the slider an <input type="hidden" name="input0" ... /> will be created.
After using the slider this input get the current slider value (a number between 0 and sizes.length - 1). The onChange sets an other html input tag with the value from the array called sizes.
While submitting the serializeArray() takes the values of all input fields which have a name attribute.
In my EXAMPLE I gave the input field that will be filled at the onChange a name attribute, so the serialization takes both values.
HTML:
<form action="#" id="custom">
<div id="slider0"></div>
<input type="text" id="value0" data-dojo-type="dijit.form.TextBox" name="value0" />
<input type="submit" value="submit" />
</form>