Transform a ajax json object into multiple texts boxes values - javascript

So i am having the next input trough and ajax call:
var json = {
"id_u":"1",
"nombre_usuario":"JESUS",
"apellido_paterno_usuario":"DIAZ",
}
I have several text inputs with the associated name of each JSON object as follows:
<input type="text" name="id_u">
<input type="text" name="nombre_usuario">
<input type="text" name="apellido_paterno_usuario">
What i want to have a value to each input. Like this:
<input type="text" name="id_u" value="1">
<input type="text" name="nombre_usuario" value="jesus">
<input type="text" name="apellido_paterno_usuario" value="diaz">
I know that i can do with jQuery with jQuery function:
$("[name=]").val();
The problem is that i have a lot of fields to complete. Si i would like to do it faster.
Any ideas?
Thanks

Try this.
<input type="text" name="id_u">
<input type="text" name="nombre_usuario">
<input type="text" name="apellido_paterno_usuario">
<script>
var json = {
"id_u":"1",
"nombre_usuario":"JESUS",
"apellido_paterno_usuario":"DIAZ"
};
for (var key in json) {
if (json.hasOwnProperty(key)) {
$("[name=" + key + "]").val(json[key]);
}
}
</script>
http://jsfiddle.net/GCy2a/

Related

Assign a number to every user input

My problem is the following I have a checkbox and two text input where the user has to enter their order and for every order I want to asign a number but I do not know how to do so using javascript and HTML. I tried adding one everytime the order button is clicked but it did not seem to work
<form>
<input type="text" placeholder="condiments" id="condiments">
<input type="text" placeholder="name" id="name">
<label for="bigger">Make theese bigger:</label>
<select id="bigger"></select>
</form>
var order = 0;
document.getElementById("orders").addEventListener("click", numOrder);
function numOrder() {
var setOrder= document.getElementById("orders");
setOrder.value = order;
order++;
}
<input type="text" placeholder="condiments" id="condiments">
<input type="text" placeholder="name" id="name">
<label for="bigger">Make theese bigger:</label>
<select id="bigger"></select>
<button id="orders">Place Order</button>
var order= 0;
document.getElementById("orders").addEventListener("click", numOrder);
function numOrder() {
var setOrder = document.getElementById("orders");
setOrder.value = order;
order++;
}
Note that setOrder.value is stored as a string. Should you need to convert to number, use parseInt(setOrder.value).

Get value from muti dimensional-array textbox using javascript

I have a list of textbox which is dynamically generated and and named with multi-dimensional array for posting to php later.
<input type="text" name="node['A11']['in']">
<input type="text" name="node['A11']['out']">
<input type="text" name="node['X22']['in']">
<input type="text" name="node['X22']['out']">
<input type="text" name="node['C66']['in']">
<input type="text" name="node['C66']['out']">
However, before the values get posted, i am trying to get the value of the specific textbox and do the validation.
var nodeValue = document.getElementsByName("node['X22']['in']").value;
alert(nodeValue);
Tried the above but it is not working. May i know is there a good way to parse trough the textbox list and get the specific textbox's value, let's say for 'X22' -> 'in'?
getElementsByName returns not a single element, but array-like object. Access the [0] indexed element of the result.
If you have unique elements, it will be better to get them by id (getElementById) which returns a single element.
var nodeValue = document.getElementsByName("node['X22']['in']")[0].value
// ----^^^----
alert(nodeValue);
<input type="text" name="node['A11']['in']">
<input type="text" name="node['A11']['out']">
<input type="text" name="node['X22']['in']" value='SomeValue'>
<input type="text" name="node['X22']['out']">
<input type="text" name="node['C66']['in']">
<input type="text" name="node['C66']['out']">
you need a value to get one
<html>
<head></head>
<body>
<input type="text" name="node['A11']['in']">
<input type="text" name="node['A11']['out']">
<input type="text" name="node['X22']['in']">
<input type="text" name="node['X22']['out']">
<input type="text" name="node['C66']['in']">
<input type="text" name="node['C66']['out']">
</body>
<script>
parse = function(){
var nodeValue = document.getElementsByName("node['X22']['in']");
console.log(nodeValue[0]);//to demonstrate that a nodelist is indeed returned.
}
parse()
</script>
</html>
You could use the id attribute and give it an identifier.
var nodeValue = document.getElementById("X22in").value;
console.log(nodeValue);
<input type="text" id="X22in" name="node['X22']['in']" value="foo">
<!-- ^^^^^^^^^^ -->

Store multiple text inputs on mysql using serialize

I have a form with multiple inputs that user can append. I am able to get all the value from the inputs using jquery ajax. My issue is how to store the array on mysql? I have read about php serialize and unserialize but not quite sure to do it on my case. Below are the codes.
Form
<form>
<input type="text" name="name" class="name" placeholder="Name">
<input type="text" name="age" class="age" placeholder="Age">
<input type="text" name="gender" class="gender" placeholder="Gender">
</form>
<button type="submit" id="store" value="store">Submit</button>
<button type="button">Cancel</button>
jQuery
$('#add').click(function(){
$('#append > ul').append(
'<li style="list-style: none;">'
+ '<input type="text" name="name" class="name" placeholder="Name">'
+ '<input type="text" name="age" class="age" placeholder="Age">'
+ '<input type="text" name="gender" class="gender" placeholder="Gender">'
+ '</li>';
);
});
$('#remove').click(function(){
$('li:last-child').detach();
});
function store_siblings(e){
e.preventDefault();
var arr = [];
var submit = $('#store').val(),
$('input.nama').each(function(){
arr.push($(this).val());
});
$('input.age').each(function(){
arr.push($(this).val());
});
$('input.gender').each(function(){
arr.push($(this).val());
});
$.post('../upd-siblings.php',
{
submit : submit,
arr : arr
}, function(data){
$('#result').html(data)
});
}
$("#store").click(store_siblings);
After I make the serialization and echo I get:
a:6:
{
i:0;s:7:"MY WIFE";
i:1;s:6:"MY SON";
i:2;s:2:"27";
i:3;s:1:"2";
i:4;s:4:"WIFE";
i:5;s:3:"SON";
}
Below are the table siblings That I create on mysql:
siblings
- id
- name
- age
- gender
Can I use mysqli INSERT using the serialize values?
Checkout this link: Description, Quite good and easy to understand explanation of serialization in PHP, if you still get stuck somewhere, just comment and i'll try to clear it up.

How to get html input in JavaScript?

I am using the code below in a html form:
<input type="text" name="cars[]" required>'
Note the use of "cars[]" for the name.
This allows me to have multiple inputs with the same name.
I would like to get the answers from all the inputs in JavaScript.
How can this be done?
I have the following WRONG code for this:
var element = document.getInput("cars[]");
for (i = 0; i < element.length; i++) {
alert(element[i].value);
}
You have to use document.getElementsByName() like this:
var element = document.getElementsByName("cars[]");
for(i=0; i<element.length;i++){
alert(element[i].value);
}
<input type="text" name="cars[]" value="a" required>
<input type="text" name="cars[]" value="b" required>
<input type="text" name="cars[]" value="c" required>
These two things in pure JavaScript net approximately the same result. The first is using the HTML form element to find all of the input elements attached to it. However, the syntax for finding the array called "cars[]" is troublesome and in my opinion a tad annoying. If I was going to do something in pure JavaScript I'd probably prefer the second way, using document.querySelectorAll.
window.addEventListener('load', function() {
var form = document.getElementById('thing');
form.elements['cars[]'].forEach(function(el, i) {
console.log("value is ", el.value)
}); //Form.elements[] array has been available since Chrome 7 or so. It should be available for use in just about any browser available.
var items = document.querySelectorAll('[name="cars[]"]');
items.forEach(function(el, i) {
console.log("Item Value is ", el.value)
});
});
<form id="thing">
<input type="text" name="cars[]" value="1" />
<br />
<input type="text" name="cars[]" value="2" />
<br />
<input type="text" name="cars[]" value="3" />
<br />
<input type="text" name="cars[]" value="4" />
<br />
<input type="submit" value="submit" />
</form>
You write
Note the use of "cars[]" for the name.
This allows me to have multiple inputs with the same name.
In HTML, you can have many inputs in the same form with the same name, regardless of that name having a [] suffix or not. This has always been used for, say, checkboxes. Most server-side libraries will then return the values for those inputs as an array.
An example of gathering all values for inputs with a given name could be the following:
document.querySelector("#b").addEventListener("click", () => {
const values = [];
document.querySelectorAll("input[name='color']").forEach(e => values.push(e.value));
console.log(values); // outputs ["foo", "bar", "baz"] if values unchanged
});
input { display: block; margin: 5px; }
<label>Enter your favorite colors
<input type="text" name="color" value="foo"/>
<input type="text" name="color" value="bar"/>
<input type="text" name="color" value="baz"/>
</label>
<label>
Enter your favorite food
<input type="text" name="food" value="flub"/>
</label>
<button id="b">Click me to output favorite colors</button>
You can give same id to all inputs like
<input type="text" id="inputId" name="cars[]" required>'
In Javascript iterate the element to get the value
var element = document.getElementsByName("cars[]");
for(i=0; i<element.length;i++){
console.log(element[i].value);
}

JavaScript string concatenation not working

This javascript code to concatenate isn't working. I tried an alert before closure of script tag, it's displayed but the code below that I want to display the result in third or different text field.
HTML:
<input type="text" id="field"><br>
<input type="text" id="str2"><br>
<input type="text" id="str3"><br>
<button onclick="concate()">Concatenate</button>
JavaScript:
var s=document.getElementById("field").value;
var t=document.getElementById("str2").value;
var st=document.getElementById("str3").value;
function concate()
{
st=s+t;
document.getElementById("str3").value.innerHTML=st;
console.log(st);
document.write(st);
}
There's no function .value.innerHTML should be :
document.getElementById("str3").value = st;
Also you should get the fields value inside function and close your function definition using }, check example bellow.
Hope this helps.
function concate()
{
var s=document.getElementById("field").value;
var t=document.getElementById("str2").value;
document.getElementById("str3").value=s+t;
}
<input type="text" id="field"><br>
<input type="text" id="str2"><br>
<input type="text" id="str3"><br>
<button onclick="concate()">Concatenate</button>
function concate() {
var s=document.getElementById("field").value;
var t=document.getElementById("str2").value;
var st=document.getElementById("str3").value;
// this is a standard way to concatenate string in javascript
var result = s+t;
document.getElementById("str3").value=result;
}
<input type="text" id="field"><br>
<input type="text" id="str2"><br>
<input type="text" id="str3" readonly><br>
<button onclick="concate()">Concatenate</button>

Categories

Resources