I have this jsfiddle I want when the user clicks on "OK" first open browser file after user select file then continue other line. But my program before I select file go to other line. How can I do this?
popFileSelector = function() {
var el = document.getElementById("fileElem");
if (el) {
el.click();
}
};
window.popWithDelay = function() {
popFileSelector();
document.getElementById('log').innerHTML += '1!<br />';
document.getElementById('log').innerHTML += '2!<br />';
document.getElementById('log').innerHTML += '3!<br />';
document.getElementById('log').innerHTML += '4!<br />';
document.getElementById('log').innerHTML += '5!<br />';
};
<body>
<form>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
</form>
<br />
OK
<div id="log">Log: <br /></div>
</body>
This code ensures that the other lines are only printed if the input actually changes.
jsfiddle.
window.popFileSelector = function() {
var el = document.getElementById("fileElem");
if (el) {
el.click();
}
};
window.popWithDelay = function(event) {
handleFiles(event.target.files);
document.getElementById('log').innerHTML += '1!<br />';
document.getElementById('log').innerHTML += '2!<br />';
document.getElementById('log').innerHTML += '3!<br />';
document.getElementById('log').innerHTML += '4!<br />';
document.getElementById('log').innerHTML += '5!<br />';
}
window.handleFiles = function(files) {
document.getElementById('log').innerHTML += 'This is the handleFiles() function<br />';
}
<body>
<form>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="popWithDelay(event)" />
</form>
<br />
Pop With 1 Second Delay
<div id="log">Log: <br /></div>
</body>
you can use callback function
jsfiddle
popFileSelector = function(callback) {
var el = document.getElementById("fileElem");
if (el) {
el.click();
el.addEventListener('change', callback);
}
};
window.popWithDelay = function() {
var func = function() {
document.getElementById('log').innerHTML += '1!<br />';
document.getElementById('log').innerHTML += '2!<br />';
document.getElementById('log').innerHTML += '3!<br />';
document.getElementById('log').innerHTML += '4!<br />';
document.getElementById('log').innerHTML += '5!<br />';
}
popFileSelector(func);
};
Related
<body>
<form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
<input type="text" id="add-name" placeholder="New country ">
<input type="number" id="add-popu" placeholder="New population">
<input type="submit" value="Add">
</form>
<div id="spoiler" role="aria-hidden">
<form action="javascript:void(0);" method="POST" id="saveEdit">
<input type="text" id="edit-name">
<input type="text" id="edit-popu">
<input type="submit" value="Ok" /> <a onclick="CloseInput()" aria-label="Close">✖</a>
</form>
</div>
<p id="counter"></p>
<table>
<tr>
<th>Country</th>
<th>Population</th>
</tr>
<tbody id="countries"></tbody>
<tbody id="popultns"></tbody>
</table>
<script type="text/javascript" src="main.js"></script>
<script>
var app = new function()
{ this.el = document.getElementById('countries');
this.el = document.getElementById('popultns');
let loadTableData = data2;
this.Count = function(data)
{ var el = document.getElementById('counter');
var name = 'country2';
var pop = 'popu2'
if (data)
{ if (data > 1)
{ name = 'countries' ;
pop = "popultns" ;
}
el.innerHTML = data + ' ' + name + ' ' + pop ;
}
else
{ el.innerHTML = 'No ' + name + ' ' + pop ; }
};
this.FetchAll = function()
{ var data = '';
if (loadTableData.length > 0)
{ for (i = 0; i < loadTableData.length; i++)
{ data += '<tr>';
data += '<td>' + loadTableData[i].country + '</td>';
data += '<td>' + loadTableData[i].population + '</td>';
data += '<td><button onclick="app.Edit(' + i + ')">Edit</button></td>';
data += '<td><button onclick="app.Delete(' + i + ')">Delete</button></td>';
data += '</tr>';
}
}
this.Count(loadTableData.length);
return this.el.innerHTML = data;
};
this.Add = function ()
{ el = document.getElementById('add-name');
el2 = document.getElementById('add-popu');
// Get the value
var country2 = el.value;
var pop = el2.value;
if (country2)
{ // Add the new value
loadTableData.push(country2.trim() );
// Reset input value
el.value = '';
//el2.value = '';
// Dislay the new list
this.FetchAll();
}
};
the image is the ui tht im working for the function
I'm supposed to auto-generate the table based on the data available from my main.js script which is in JSon format. There is no problem with the data loading since the data can be display in my html file. However, the problem comes whn my data is returned undefined on my auto generated table whn i click the 'add' button to update the data in the table. Whn i click in the edit button, the data is get correctly. only whn the display, it returns me undefined.
i know how alrdy.
here i attach the code & sample of the data i hv done.
hopefully this would help fresh grad like me who hv trouble in undrsntdng CRUD
<html>
<head>
<meta charset="UTF-8">
<title>Countries CRUD</title>
<style>
input[type='submit'], button, [aria-label]{
cursor: pointer;
}
#spoiler{
display: none;
}
</style>
</head>
<body>
<form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
<input type="text" id="add-name" placeholder="New country ">
<input type="number" id="add-popu" placeholder="New population">
<input type="submit" value="Add">
</form>
<div id="spoiler" role="aria-hidden">
<form action="javascript:void(0);" method="POST" id="saveEdit">
<input type="text" id="edit-name">
<input type="text" id="edit-popu">
<input type="submit" value="Ok" /> <a onclick="CloseInput()" aria-label="Close">✖</a>
</form>
</div>
<p id="counter"></p>
<table>
<tr>
<th>Country</th>
<th>Population</th>
</tr>
<tbody id="countries"></tbody>
<tbody id="popultns"></tbody>
</table>
<script type="text/javascript" src="main.js"></script>
<script>
var app = new function()
{ this.el = document.getElementById('countries' && 'popultns');
//this.el = document.getElementById('popultns');
let loadTableData = data2;
this.Count = function(data)
{ var el = document.getElementById('counter');
var name = 'country2';
var pop = 'popu2'
if (data)
{ if (data > 1)
{ name = 'countries' ;
pop = "populations" ;
}
el.innerHTML = data + ' ' + name + ' ' + pop ;
}
else
{ el.innerHTML = 'No ' + name + ' ' + pop ; }
};
this.FetchAll = function()
{ var data = '';
if (loadTableData.length > 0)
{ for (i = 0; i < loadTableData.length; i++)
{ data += '<tr>';
data += '<td>' + loadTableData[i].country + '</td>';
data += '<td>' + loadTableData[i].population + '</td>';
data += '<td><button onclick="app.Edit(' + i + ')">Edit</button></td>';
data += '<td><button onclick="app.Delete(' + i + ')">Delete</button></td>';
data += '</tr>';
}
}
this.Count(loadTableData.length);
return this.el.innerHTML = data;
};
this.Add = function ()
{ el = document.getElementById('add-name');
el2 = document.getElementById('add-popu');
// Get the value
var country2 = el.value;
var popltn = el2.value;
if (country2 && popltn )
{ // Add the new value
//loadTableData.push(country2.trim() );
loadTableData.push({country: country2, population:popltn});
// Reset input value
el.value = '';
el2.value = '';
// Dislay the new list
this.FetchAll();
}
};
this.Edit = function (item)
{ var el3 = document.getElementById('edit-name');
var el4 = document.getElementById('edit-popu');
// Display value in the field
let index = item;
el3.value = loadTableData[index].country;
el4.value = loadTableData[index].population;
// Display fields
document.getElementById('spoiler').style.display = 'block';
self = this;
document.getElementById('saveEdit').onsubmit = function()
{
// Get value
var country2 = el3.value;
var popltn = el4.value;
//console.log({country2, pop});
if (country2 || pop)
//console.log(country2);
{ // Edit value (strt,del,replace)
console.log(country2,popltn);
console.log(index, 1,({country2,popltn}));
//update array
loadTableData[index].country = el3.value;
loadTableData[index].population = el4.value;
//self.loadTableData.splice(index, 1,({country2,popltn}));
//console.log(index, 1, pop.trim());
//self.loadTableData.splice(index, 1, pop.trim());
// Display the new list
self.FetchAll();
// Hide fields
CloseInput();
}
}
};
this.Delete = function (item)
{
// Delete the current row
loadTableData.splice(item, 1);
// Display the new list
this.FetchAll();
};
}
app.FetchAll();
function CloseInput()
{ document.getElementById('spoiler').style.display = 'none';}
</script>
</body>
</html>
I am fetching data with ajax in which every tr have a related button, if there is any empty field in class, I want to disable its closest button.
I tried this code,which is not disabling button.
success:function(response) {
var cat = {};
response.result.forEach(function(element) {
cat[element.category] = cat[element.category] || [];
cat[element.category].push(element);
});
Object.keys(cat,).forEach(function(category) {
// Append the category header
html = '<tr>';
html += '<th><p>'+category+'</p></th>';
html += '</tr>';
$('table').append(html);
// Loop through the results for this category
categ[category].forEach(function(element) {
console.log(element);
var id = element.id;
var score= element.score;
var catID= element.cat_id;
html = '<tr class="data">';
html += '<td class"=ids"><p>'+id+'</p></td>';
html += '<td><p>'+score+'</p></td>';
html += '</tr>';
$('table').append(html);
});
html = '<tr>';
html += '<input type="hidden" value="'+catID+'" />';
html += '<td> <button type="button" class="submitOne> </button> submit </td>';
html += '</tr>';
$('table').append(html);
});
}
Script for disabling button
$(function () {
$('.data').each(function () {
if ( !$.trim($(this).find('.ids').html() ).length ) {
$(this).closest('tr').find('.submitOne').attr('disabled', 'disabled');
}
else {
(this).closest('tr').find('.submitOne').removeAttr('disabled');
}
});
});
what you missed is a double quote in button class
<td> <button type="button" class="submitOne> </button> submit </td>
replace with
<td> <button type="button" class="submitOne"> </button> submit </td>
and use next() instead of closet()
$(function () {
$('.data').each(function () {
if ( !$.trim($(this).find('.ids').html() ).length ) {
console.log("a")
$(this).next('tr').find('.submitOne').prop('disabled', true);
}
else {
console.log("b")
$(this).next('tr').find('.submitOne').prop('disabled', false);
}
});
});
I want to add multiple html elements dynamically on button click and get values of each. Also one can delete created element on button click. HTML elements will be textbox and other text box for phone number.
I've tried to create single text box on button click. Fiddle: https://jsfiddle.net/dvkeojqn/
HTML:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />
JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />'
}
</script>
try replacing this function..
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var valuesarr = new Array();
var phonearr = new Array();
$("input[name=DynamicTextBox]").each(function () {
valuesarr.push($(this).val());
});
$("input[name=phoneNum]").each(function () {
phonearr.push($(this).val());
});
alert(valuesarr); alert(phonearr);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> <input name = "phoneNum" type="text" /> <input type="button" value="Remove" class="remove" />';
}
and HERE is the FIDDLE.
Try to replace this JavaScript code..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> <input name = "DynamicTextBox" type="text" value="'+ value +'" /> <input type="button" value="Remove" class="remove" />';
}
</script>
What I am trying to do exactly is to access
array_from_php.api_description.{ACTION_VARIABLE}.param
This following script works:
$('select[name="action"]').change(function(){
var action = $(this).val();
var new_form = '';
$.each(array_from_php.api_description.register_mobile.param, function(i, param) {
new_form += '<label for="label">'+param+': </label>';
new_form += '<input type="text" name="'+param+'" value=""><br />';
});
$(".parameters").html(new_form);
});
but how can I change the register_mobile to the action variable im gettin there?
By using bracket notation:
$('select[name="action"]').change(function(){
var action = $(this).val();
var new_form = '';
$.each(array_from_php.api_description[action].param, function(i, param) {
new_form += '<label for="label">'+param+': </label>';
new_form += '<input type="text" name="'+param+'" value=""><br />';
});
$(".parameters").html(new_form);
});
I have some code which uses this to allow to keep the same function code but apply it to different form elements which can be seen on a jsFiddle demo
//latest
var maxFields = 10,
currentFields = 1;
$('.form').on('click', '.add', function () {
var value_src = $(this).prev();
var container = $(this).parent().prev();
if ($.trim(value_src.val()) != '') {
if (currentFields < maxFields) {
var value = value_src.val();
var html = '<div class="line">' +
'<input id="accepted" type="text" value="' + value + '" />' +
'<input type="button" value="X" class="remove" />' +
'</div>';
$(html).appendTo(container);
value_src.val('');
currentFields++;
} else {
alert("You tried to add a field when there are already " + maxFields);
}
} else {
alert("You didn't enter anything");
}
})
.on('click', '.remove', function () {
$(this).parents('.line').remove();
currentFields--;
});
My issue is that I still want to be able to limit each section to only have 10 <inputs>, but at the moment each section shares the counter, so 5 in requirements and 5 in qualifications would trigger the 10 limit.
Is there a nice clean way of keeping the input field counter separate for each section?
What you need to do is store the current number of children for each list in a context sensitive way. There are a couple ways you could structure this (it would be easy using MVC libraries or the likes), but the simplest solution for your code will be to just use the DOM. So instead of using your global currentFields variable, instead use container.children().length to get the number of notes in the list you are currently operating on.
http://jsfiddle.net/9sX6X/70/
//latest
var maxFields = 10;
$('.form').on('click', '.add', function () {
var value_src = $(this).prev();
var container = $(this).parent().prev();
if ($.trim(value_src.val()) != '') {
if (container.children().length < maxFields) {
var value = value_src.val();
var html = '<div class="line">' +
'<input id="accepted" type="text" value="' + value + '" />' +
'<input type="button" value="X" class="remove" />' +
'</div>';
$(html).appendTo(container);
value_src.val('');
} else {
alert("You tried to add a field when there are already " + maxFields);
}
} else {
alert("You didn't enter anything");
}
})
.on('click', '.remove', function () {
$(this).parents('.line').remove();
});
You can add a class to each row like form-row
var html = '<div class="line form-row">' +
'<input id="accepted" type="text" value="' + value + '" />' +
'<input type="button" value="X" class="remove" />' +
'</div>';
and count the length by using
console.log($(container).find('.form-row').length);
// Use +1 because initially it is 0
Fiddle http://jsfiddle.net/9sX6X/69/
You can make use of the placeholder property to identify which button triggered the function.
value_src.attr('placeholder');
This string can then be used to access three different counters in an associative array.
Code
var maxFields = 10;
var currentFields = new Object;
$('.form').on('click', '.add', function () {
var value_src = $(this).prev();
var container = $(this).parent().prev();
if ($.trim(value_src.val()) != '') {
var identity = value_src.attr('placeholder');
if(currentFields[identity] == undefined)
currentFields[identity] = 0;
if (currentFields[identity] < maxFields) {
var value = value_src.val();
var html = '<div class="line">' +
'<input id="accepted" type="text" value="' + value + '" />' +
'<input type="button" value="X" class="remove" />' +
'</div>';
$(html).appendTo(container);
value_src.val('');
currentFields[identity]++;
} else {
alert("You tried to add a field when there are already " + maxFields);
}
} else {
alert("You didn't enter anything");
}
})
.on('click', '.remove', function () {
$(this).parents('.line').remove();
currentFields--;
});
JSFiddle: http://jsfiddle.net/9sX6X/73/