Conditional Fields on HTML form - javascript

I hope you can help me on this one.
This code below is supposed to show a number of field if people select more than 0 and up to 3.
But nothing is happening when selecting 1 2 or 3. Could you have a look and let me know how can i fix?
Thanks
<select name="children" id="childOccupants">
<option value="0" selected>0</option>
<?php
for ($j = 1; $j <= 3; $j++) {
echo "<option value='$j'>$j</option>";
}
?>
</select>
<!-- Dynamic children boxes -->
<span id='childAges'>
<script>
$("#childOccupants").bind('change', function () {
$("#childAges").empty();
var children = $("#childOccupants").val();
var s = 1;
for (i=0; i < children; i++) {
$("<label for='child" + s + "'>Child " + s + " age</label><input type='text' name='child" + s + "' id='child" + s + "' />").appendTo("#childAges");
s++;
}
})
</script>
</span>
<!-- End of dynamic child age boxes -->

<script>
$("#childOccupants").bind('change', function () {
$("#childAges").empty();
var children = $("#childOccupants").val();
var s = 1;
for (i=0; i < children; i++) {
("#childAges").append("<label for='child" + s + "'>Child " + s + " age</label><input type='text' name='child" + s + "' id='child" + s + "' />");
s++;
}
})
</script>

Have you included javascript and checked the console logs?
The below is working fine for me.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select name="children" id="childOccupants">
<option value="0" selected>0</option>
<?php
for ($j = 1; $j <= 3; $j++) {
echo "<option value='$j'>$j</option>";
}
?>
</select>
<!-- Dynamic children boxes -->
<span id='childAges'>
<script>
$("#childOccupants").bind('change', function () {
$("#childAges").empty();
var children = $("#childOccupants").val();
var s = 1;
for (i=0; i < children; i++) {
$("<label for='child" + s + "'>Child " + s + " age</label><input type='text' name='child" + s + "' id='child" + s + "' />").appendTo("#childAges");
s++;
}
})
</script>
</span>
</body>
</html>

Related

HTML code not loading the data in list box

I am creating two combo boxes the first one gets loaded initially and up on selecting the text in the combo the second combo box should get filtered. The issue is combo box is not getting loaded.
<html> <head>
<title> text conversion </title> <script type="text/javascript">
function PrepopulateProductName() { alert("Hello! I am an alert box!!");
var selectHTML = "";
var DEV = ["GTXD", "SFGD", "ITXD", "ETXD","CTXD"];
var SYS = ["GTXS", "ITXS", "ETXS", "CTXS"];
var ACC = ["GTXA", "ITXA", "ETXA", "CTXA", "SFGA"];
alert("Hello! I am an alert box!!");
if (document.getElementById("selProductName").value == "DEV") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < DEV.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + DEV[i] + "'>" + DEV[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
PrepopulateProductName();
</script> </head> <body>
Product Name: <select id="selProductName" name="selProductName"
onchange="changeProductName(this.value);"> <option>--Choose Product
Name--</option> </select>
</body> </html>
There were few issues in your code:
You didn't define the category select box
Called an undefined function changeProductName()
This is what you can do:
With the onchange attribute, call the PrepopulateProductName() function. Then, it will check for the selected option and populate the category select box with the values defined.
Example:
function PrepopulateProductName() {
//alert("Hello! I am an alert box!!");
var selectHTML = "";
var DEV = ["GTXD", "SFGD", "ITXD", "ETXD","CTXD"];
var SYS = ["GTXS", "ITXS", "ETXS", "CTXS"];
var ACC = ["GTXA", "ITXA", "ETXA", "CTXA", "SFGA"];
//alert("Hello! I am an alert box!!");
if (document.getElementById("selProductName").value == "DEV") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < DEV.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + DEV[i] + "'>" + DEV[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
}
<html> <head>
<title> text conversion </title>
</head>
<body>
Product Name: <select id="selProductName" name="selProductName"
onchange="PrepopulateProductName();"> <option>--Choose Product
Name--</option> <option value="DEV">DEV</option> </select>
<select id="category" name="category"> </select>
</body> </html>

Laravel Dropdown nested categories with unlimited subcategories level give error

Im working to create dropdowns loading for n-level records in Laravel 5. Currently I worked with this code but Im receiving error with children categories.
Honestly I dont know how to get values from children categories and I believe that is the main source of problem. But I dont know how to solve it
CONSOLE.LOG DISPLAYS
TypeError: children is not a function[Learn More]
This is my db and code:
DB: STRUCTURE
Entity Function:
public function getAjaxGetCategoriesDropdown() {
$categories = DB::table('categories')
->where('is_active', 1)
->orderBy('path', 'asc')
->select('categoryName','level','id','parentId')
->get();
$first = array();
$children = array();
foreach ($categories as $cats) {
if ($cats->level == 2) {
$first[$cats->id] = $cats;
} else if ($cats->parentId) {
$children[$cats->parentId][] = $cats;
}
}
return array('first' => $first, 'children' => $children);
}
SCRIPT:
<script type="text/javascript">
var children = #json($cats['children'])
function showCat(obj, level) {
var catId = obj.value;
level += 1;
if ($('cat_container_' + level)) {
$('cat_container_' + level).remove();}
var options = children(catId);
var html = '<select id="cat_' + catId + '" onchange="showCat(this, ' + level + ')">' + '<option value="">Select a SubCategory</option>';
for (var i = 0; i < options.length; i++) {
html += '<option value="' + options[i].id + '">' + options[i].categoryName + '</option>';}
html += '</select>' + '<i class="arrow double"></i>';
html = '<label class="field select ' + 'cat_container_' + level + '">' + html + '</label>';
$('sub_cat').insert(html);
}
VIEW BLADE:
<select id="first_cat" class="required-entry validate-select" onchange="showCat(this, 2)">
<option value=""> Select a Category </option>
#foreach($cats['first'] as $cat): <option value="{{ $cat->id }}">{{ $cat->categoryName }}</option> #endforeach
</select>
<div id="sub_cat"></div>
any help appreciated!.
Change
var options = children(catId);
To
var options = children[catId];

Time selection is not working in jquery

I have below post code. I have append a html code for table body (tbl_body). There are time selection fields as fe_date and fs_date. but the time selection window does not show.
Please help me.
$.post("<?php echo base_url('controller/function_name') ?>", {'cid': cid},
function (data)
{
if (data.length > 0) {
$('#tbl_body').find('tr').remove();
for (j = 0; j < data.length; j++) {
$('#att_st_time'+(j+1)).datetimepicker({pickDate: false});
$('#att_end_time'+(j+1)).datetimepicker({pickDate: false});
$('#tbl_body').append("<tr><td style='width:14%;text-align: center'>" + (j + 1) + "</td><td style='width:25%;text-align: center'><input class='form-control' id='att_st_time"+(j+1)+"' data-validation='required' data-validation-error-msg-required='Empty is field' type='text' name='fs_date' time-format='H:M:S' value='" + data[j]['ttlc_starttime'] + "'> </td><td style='width:25%;text-align: center'><input class='form-control' id='att_end_time"+(j+1)+"' data-validation='required' data-validation-error-msg-required='Empty is field' type='text' name='fe_date' time-format='H:M:S' value='" + data[j]['ttlc_endtime'] + "'></td></tr>");
}
}
},
"json"
);
Add a class to your input like class="form-control date-picker"
Then try to add this code.
$(document).on('focus',".date-picker", function(){
$(this).datetimepicker();
});

Create a new dropdown with javascript

I am trying to create a dropdown after I choose an option in an original dropdown.
This is the HTML code:
<br>
<select id ="select-container" onchange="addSelect('select-container');">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<br>
This is the javascript.
function categorygenerate() {
//for testing purposes
var categoryarray = new Array(),
i;
for (i = 0; i < 3; i++) {
categoryarray[i] = Math.random();
}
return categoryarray;
}
function addSelect(divname) {
var newDiv = document.createElement('div');
var html = '<select>',
dates = categorygenerate(),
i;
for (i = 0; i < dates.length; i++) {
html += "<option value='" + dates[i] + "'>" + dates[i] + "</option>";
}
html += '</select>';
newDiv.innerHTML = html;
document.getElementById(divname).appendChild(newDiv);
console.log($("#" + divname).html());
console.log(newDiv);
}
The debugger mode shows me no error.
It is because you are trying to append your code in the "original select": look at the id of your select.
You have to add a div tag with the id="select-container" and remove it from the "original select"
Here is a working snippet:
function categorygenerate() {
//for testing purposes
var categoryarray = new Array(),
i;
for (i = 0; i < 3; i++) {
categoryarray[i] = Math.random();
}
return categoryarray;
}
function addSelect(divname) {
var newDiv = document.createElement('div');
var html = '<select>',
dates = categorygenerate(),
i;
for (i = 0; i < dates.length; i++) {
html += "<option value='" + dates[i] + "'>" + dates[i] + "</option>";
}
html += '</select>';
newDiv.innerHTML = html;
document.getElementById(divname).appendChild(newDiv);
console.log($("#" + divname).html());
console.log(newDiv);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<select onchange="addSelect('select-container');">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<br>
<div id="select-container"></div>
Put your select in a div with the id select-container. Ofcourse, give your select an other ID. Then your code should work. It's because you try to append a new select to the original one in your HTML.
https://jsfiddle.net/b248a4k1/

How do I see what data AJAX is passing

I want to be able to see if the data that AJAX is passing is the correct data at the function sendToServer.
When the user submits the data that s/he wants, the submit function sends it to next.php. I want to see what next.php is receiving, how do I do this? It should be receiving the same as here:
$("#result").html(JSON.stringify(arr));
So that I can insert the data into a MySQL database.
next.php:
<?php
$data = json_decode(stripslashes($_POST['arr']));
foreach($data as $item){
echo $item;
// insert to db
}
?>
The code that I have so far is in the code snippet:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
<!-- #main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<!-- <form action="next.php" method="post">-->
<button onclick="addAuthor()">Add Author</button>
<br>
<br>
<div id="addAuth"></div>
<br>
<br>
<button onclick="submit()">Submit</button>
<!-- </form>-->
</div>
<div id="result"></div>
</div>
<script type="text/javascript">
var authors = 0;
function addAuthor() {
authors++;
var str = '<br/>' + '<div id="auth' + authors + '">' + '<input type="text" name="author" id="author' + authors + '" placeholder="Author Name:"/>' + '<br/>' + '<button onclick="addMore(\'auth' + authors + '\')" >Add Book</button>' + '</div>';
$("#addAuth").append(str);
}
var count = 0;
function addMore(id) {
count++;
var str =
'<div id="bookDiv' + count + '">' + '<input class="' + id + '" type="text" name="book' + id + '" placeholder="Book Name"/>' + '<span onclick="removeDiv(\'bookDiv' + count + '\')">Remove</span>' + '</div>';
$("#" + id).append(str);
}
function removeDiv(id) {
$("#" + id).slideUp(function() {
$("#" + id).remove();
});
}
function submit() {
var arr = [];
for (i = 1; i <= authors; i++) {
var obj = {};
obj.name = $("#author" + i).val();
obj.books = [];
$(".auth" + i).each(function() {
var data = $(this).val();
obj.books.push(data);
});
arr.push(obj);
}
sendToServer(arr);
$("#result").html(JSON.stringify(arr));
}
function sendToServer(data) {
$.ajax({
type: "POST",
data: {
arr: JSON.stringify(data)
},
url: "next.php",
success: function() {
}
});
}
</script>
</body>
</html>
Your js is sending a post request therefore you should receive the sent data just as you receive a normal html form post.
try var_dump($_POST); to see under what index names are your data then you can use those index names to manipulate your data as you want.

Categories