Develop Reference

console.log gives out undefined on my input field

script:
$(document).ready(function (){
$(document).on('click', '.add_category', function(e){
e.preventDefault();
var data = {
'category_name': $('.category_name').val(),
'category_description': $('.category_description').val(),
}
console.log(data);
});
});
form:
<h4 class="text-center font-weight-bold">Add New Category</h4>
<div class="form-group">
<input type="text" class="form-control form-group w-100" placeholder="Category Name" class="category_name">
</div>
<div class="form-group">
<textarea class="form-control w-100" placeholder="Category Description" class="category_description" cols="50" rows="10"></textarea>
</div>
need advice, my input fields event with me adding content returns undefined even when the variable is the same at the input type and the script's var data
I also tried to change class="category_name" to name="category_name"
What am I missing?

Your HTML tags include two class attributes:
<input type="text" class="form-control form-group w-100" placeholder="Category Name" class="category_name">
^^^ here ^^^ and here
The browser is ignoring the second one, so your jQuery selectors are returning empty sets.
You should combine the class attributes into one string:
<input type="text" class="form-control form-group w-100 category_name" placeholder="Category Name">

You cannot double declare class.
Where you had <input type="text" class="form-control form-group w-100" placeholder="Category Name" class="category_name">
You instead need to declare all classes together, like so:
<input type="text" class="category_name form-control form-group w-100" placeholder="Category Name" >
document.getElementById('submit').onclick=function(e){
e.preventDefault();
var data = {
'category_name': document.getElementsByClassName('category_name')[0].value,
'category_description': document.getElementsByClassName('category_description')[0].value,
}
console.log(data);
};
<h4 class="text-center font-weight-bold">Add New Category</h4>
<div class="form-group">
<input type="text" class="form-control form-group w-100 category_name" placeholder="Category Name" value="">
</div>
<div class="form-group">
<textarea class="form-control w-100 category_description" placeholder="Category Description" cols="50" rows="10" value=""></textarea>
</div>
<button id="submit"> Save</button>

Convert mutlidimensional inputs to JavaScript object

I've been trying to solve this one for several days now and it's driving me nuts. I have some data that needs to be submitted by Ajax. It is dynamic, so I don't know how many fields it has. On top of that the names of the fields are multidimensional and also dynamic. For example one might have inputs with the name data[name] and data[title] whilst another larger one might have data[images][0][src], data[images][0][alt], data[images][0][description], data[images][1][src], data[images][1][alt], data[images][1][description] with an unknown number of elements to the array. My problem is that I need to get an object I can submit via Ajax whilst maintaining the structure of the data.
I've tried serialising the data, but that just comes up with a string of name = value. I've tried serialise array as well, but that just gives me an array of [name, value]. I've managed to generate the object manually using a regex to split it up, but I can't find a way to merge the resultant objects together. The latest version of my code is:
$('.modal-content').find('input[name^="data"]').each(function () {
var found = $(this).attr('name').match(re).reverse();
var temp = $(this).val();
$.each(found, function ()
{
str = this.substr(1, this.length - 2);
var t = {};
t[str] = temp;
temp = t;
});
data = $.each({}, data, temp);
});
Unfortunately it doesn't merge them, it overwrites what is in data with what is in temp. If data has data.images[0].src = "mysrc" and temp has data.images[0].alt = "myalt" then I just end up with data.images[0].alt = "myalt" and src is no longer there.
There has to be a simple way to do this, hell at this point I'd even take a complicated way to do this. Can someone please help me with this?

Although there is already an accepted answer. Here are my 5 cents:
IMHO working with regex should be avoided when possible. So my suggestion would be to change the HTML a bit, adding some classes to the div that contain the image and change the name attribute of the inputs:
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div class="my-image">
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="src" value="img/example.jpg">
<div class="form-group">
<label for="title-0">Title:</label>
<input type="text" name="title" class="form-control" id="title-0" value="Default Example Image 1" placeholder="Title">
</div>
<div class="form-group">
<label for="description-0">Description:</label>
<input type="text" name="description" class="form-control" id="description-0" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-0">Alt tag (SEO):</label>
<input type="text" name="alt" class="form-control" id="alt-0" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-0">Order:</label>
<input type="number" name="order" class="form-control image-order" id="order-0" value="0">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div class="my-image">
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="src" value="img/example.jpg">
<div class="form-group">
<label for="title-1">Title:</label>
<input type="text" name="title" class="form-control" id="title-1" value="Default Example Image 2" placeholder="Title">
</div>
<div class="form-group">
<label for="description-1">Description:</label>
<input type="text" name="description" class="form-control" id="description-1" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-1">Alt tag (SEO):</label>
<input type="text" name="alt" class="form-control" id="alt-1" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-1">Order:</label>
<input type="number" name="order" class="form-control image-order" id="order-1" value="1">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
Then build the object matching this class:
var obj = {
data: {
images: []
}
}
var groups = $('.my-image');
groups.each(function(idx, el) {
var child = {}
$(el).find('input').each(function(jdx, info){
var $info = $(info);
child[$info.attr('name')] = $info.val();
});
obj.data.images.push(child);
});
We would have the same result, but it might be less error prone. Here is a plunker.

You can loop all inputs with each() loop, create array from name attributes using split() and then use reduce to add to object
var result = {}
$('input').each(function() {
var name = $(this).attr('name');
var val = $(this).val();
var ar = name.split(/\[(.*?)\]/gi).filter(e => e != '');
ar.reduce(function(a, b, i) {
return (i != (ar.length - 1)) ? a[b] || (a[b] = {}) : a[b] = val;
}, result)
})
console.log(result)
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="gallery-images" class="ui-sortable">
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="data[images][0][src]" value="img/example.jpg">
<div class="form-group">
<label for="title-0">Title:</label>
<input type="text" name="data[images][0][title]" class="form-control" id="title-0" value="Default Example Image 1" placeholder="Title">
</div>
<div class="form-group">
<label for="description-0">Description:</label>
<input type="text" name="data[images][0][description]" class="form-control" id="description-0" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-0">Alt tag (SEO):</label>
<input type="text" name="data[images][0][alt]" class="form-control" id="alt-0" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-0">Order:</label>
<input type="number" name="data[images][0][order]" class="form-control image-order" id="order-0" value="0">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="data[images][1][src]" value="img/example.jpg">
<div class="form-group">
<label for="title-1">Title:</label>
<input type="text" name="data[images][1][title]" class="form-control" id="title-1" value="Default Example Image 2" placeholder="Title">
</div>
<div class="form-group">
<label for="description-1">Description:</label>
<input type="text" name="data[images][1][description]" class="form-control" id="description-1" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-1">Alt tag (SEO):</label>
<input type="text" name="data[images][1][alt]" class="form-control" id="alt-1" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-1">Order:</label>
<input type="number" name="data[images][1][order]" class="form-control image-order" id="order-1" value="1">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/uploads/galleries\21\4-tux-30.jpg">
<input type="hidden" name="data[images][2][src]" value="uploads/galleries\21\4-tux-30.jpg">
<div class="form-group">
<label for="title-2">Title:</label>
<input type="text" name="data[images][2][title]" class="form-control" id="title-2" value="" placeholder="Title">
</div>
<div class="form-group">
<label for="description-2">Description:</label>
<input type="text" name="data[images][2][description]" class="form-control" id="description-2" value="" placeholder="Description">
</div>
<div class="form-group">
<label for="alt-2">Alt tag (SEO):</label>
<input type="text" name="data[images][2][alt]" class="form-control" id="alt-2" value="" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-2">Order:</label>
<input type="number" name="data[images][2][order]" class="form-control image-order" id="order-2" value="2">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/uploads/galleries\21\all-free-backgrounds-simple-style-darkblue-18.jpg">
<input type="hidden" name="data[images][3][src]" value="uploads/galleries\21\all-free-backgrounds-simple-style-darkblue-18.jpg">
<div class="form-group">
<label for="title-3">Title:</label>
<input type="text" name="data[images][3][title]" class="form-control" id="title-3" value="" placeholder="Title">
</div>
<div class="form-group">
<label for="description-3">Description:</label>
<input type="text" name="data[images][3][description]" class="form-control" id="description-3" value="" placeholder="Description">
</div>
<div class="form-group">
<label for="alt-3">Alt tag (SEO):</label>
<input type="text" name="data[images][3][alt]" class="form-control" id="alt-3" value="" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-3">Order:</label>
<input type="number" name="data[images][3][order]" class="form-control image-order" id="order-3" value="3">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
</ul>

remove fields which are added by jquery

In my code, there are three fields which are dynamically added by jQuery. For adding fields, my code is working fine, but when I want to remove those dynamically added fields, my remove fields code is not working.
Here is my code:
function clone_row() {
$('#add_more_fields').before('<div class="new_field"><div class="uk-grid" data-uk-grid-margin><div class="uk-width-medium-1-1"><div class="parsley-row"><label for="site Type">Product <span class="req">*</span></label><input type="text" name="product_require[]" data-parsley-trigger="change" required class="md-input" /></div></div>
<div class="uk-width-medium-1-1"><div class="parsley-row"><labelfor="site_area">Quantity<span class="req">*</span></label><input type="text" name="quantity[]" data-parsley-trigger="change" required class="md-input" /><input type="hidden" name="numb_array[]" value="0" class="form-control array-class" /></div></div>
<div class="uk-width-medium-1-1"><div class="parsley-row"><select id="select_demo_1" name="quantity_type[]" class="md-input"id="val_select" required data-md-selectize><option value="">Select Quantity Type</option><option value="Cubic Yard">Cubic Yard</option><option value="Ton">Ton</option><option value="Piece">Piece</option></select></div></div></div><div class="uk-grid">
<div class="uk-width-1-1"><div class="parsley-row"><button type="button" onclick="close_me(this)"; class="md-btn md-btn-primary pull-right">remove</button></br></div></div></div></div></div> ');
}
function close_me(me) {
$(me).parent('new_field').remove();
}

Try this
<script>
function close_me(me)
{
$(document).find('.new_field').remove();
}
</script>

There are slight syntax errors:
onclick="close_me(this)"; -> onclick="close_me(this);"
$(me).parent('new_field').remove(); -> $(me).parent('.new_field').remove();

You are missing the dot to specify the parent class you're searching for. Also there is a typo into your html clone_row() function.
Here is correct the answer : https://jsfiddle.net/5ufsfLz1/7/
function clone_row() {
$('#add_more_fields').before('<div class="new_field"><div class="uk-grid" data-uk-grid-margin><div class="uk-width-medium-1-1"><div class="parsley-row"><label for="site Type">Product <span class="req">*</span></label><input type="text" name="product_require[]" data-parsley-trigger="change" required class="md-input" /></div></div><div class="uk-width-medium-1-1"><div class="parsley-row"><label for="site_area">Quantity<span class="req">*</span></label><input type="text" name="quantity[]" data-parsley-trigger="change" required class="md-input" /><input type="hidden" name="numb_array[]" value="0" class="form-control array-class" /></div></div><div class="uk-width-medium-1-1"><div class="parsley-row"><select id="select_demo_1" name="quantity_type[]" class="md-input" id="val_select" required data-md-selectize><option value="">Select Quantity Type</option><option value="Cubic Yard">Cubic Yard</option><option value="Ton">Ton</option><option value="Piece">Piece</option></select></div></div></div><div class="uk-grid"><div class="uk-width-1-1"><div class="parsley-row"><button type="button" onclick="close_me(this)" ; class="md-btn md-btn-primary pull-right">remove</button><br></div> </div> </div></div>');
}
function close_me(me) {
$(me).parents('.new_field').remove();
}
With the correct HTML :
<div class="new_field">
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1">
<div class="parsley-row">
<label for="site Type">Product <span class="req">*</span></label>
<input type="text" name="product_require[]" data-parsley-trigger="change" required class="md-input" />
</div>
</div>
<div class="uk-width-medium-1-1">
<div class="parsley-row">
<label for="site_area">Quantity<span class="req">*</span></label>
<input type="text" name="quantity[]" data-parsley-trigger="change" required class="md-input" />
<input type="hidden" name="numb_array[]" value="0" class="form-control array-class" />
</div>
</div>
<div class="uk-width-medium-1-1">
<div class="parsley-row">
<select id="select_demo_1" name="quantity_type[]" class="md-input" id="val_select" required data-md-selectize>
<option value="">Select Quantity Type</option>
<option value="Cubic Yard">Cubic Yard</option>
<option value="Ton">Ton</option>
<option value="Piece">Piece</option>
</select>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<div class="parsley-row">
<button type="button" onclick="close_me(this)" ; class="md-btn md-btn-primary pull-right">remove</button>
<br>
</div>
</div>
</div>
</div>
<div id="add_more_fields">
</div>
<a id="more" href="#" onClick="clone_row()">Click me</a>

Parse Error In angular js Formvalidation

Hi guys this I am new angular js i am applying formvalidation but getting error
<form name="myForm" ng-controller='formCtrl'>
{{message}}
<div class="form-group">
<input type="text" class="form-control" name='propname' ng-model='propname' placeholder="Property No. or Name *" required>
<span ng-show="myForm.propname.$dirty && myForm.propname.$error.required">Required!</span>
</div>
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="Flat No. (if applicable)">
</div>
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="Street Name *">
</div>
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="Search Full Postcode *">
</div>
<button type="submit" class="btn btn-info">Search</button>
<span class="floatRight">* Required fields</span>
</form>
when i load the page it give the error in console
angular.min.js:117 Error: [$parse:syntax] http://errors.angularjs.org/1.5.5/$parse/syntax?p0=%26%26&p1=is%20not%20a%20validNaNdentifier&p2=18&p3=myForm.propname.%20%26%26%20myForm.propname..required&p4=%26%26%20myForm.propname..required
at Error (native)
at http://localhost/PT/assets/js/angular.min.js:6:412
at Object.throwError (http://localhost/PT/assets/js/angular.min.js:227:427)
at Object.identifier (http://localhost/PT/assets/js/angular.min.js:226:149)
at Object.primary (http://localhost/PT/assets/js/angular.min.js:225:234)
at Object.unary (http://localhost/PT/assets/js/angular.min.js:223:411)
at Object.multiplicative (http://localhost/PT/assets/js/angular.min.js:223:157)
at Object.additive (http://localhost/PT/assets/js/angular.min.js:222:493)
at Object.relational (http://localhost/PT/assets/js/angular.min.js:222:328)
at Object.equality (http://localhost/PT/assets/js/angular.min.js:222:153)

Parsing two parameters with jquery ajax request and date format error

I am trying to make an ajax call with two parameters - number + date.
Currently the error that I got is:
Warning: date_format() expects parameter 1 to be DateTimeInterface, boolean given in...
This is the html part:
<div class="textBox col-md-3 form-group">
<div class="input-group input-append" id="">
<input type="text" value="" maxlength="100" name="searchBox" placeholder="Number" class="form-control" id="search">
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
<div class="form-group col-md-3">
<div class="input-group input-append date" id="dateRangePicker">
<input type="text" class="form-control" name="date" placeholder="Date"/>
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<input type="submit" value="Search" class="searchBtn" /><br />
This is the ajax part:
$(document).ready(function(){
function showLoader(){
$('.search-background').fadeIn(200);
}
function hideLoader(){
$('#sub_cont').fadeIn(1500);
$('.search-background').fadeOut(200);
};
$(".searchBtn").click(function(){
showLoader();
$('#sub_cont').fadeIn(1500);
$("#content #sub_cont ").load("getData.php?q=" + $("#date").val() + "&val=" + $("#search").val(), hideLoader());
});
This is the getData.php:
include 'db.conn.php';
$pdo = Database::connect();
$rec = $_REQUEST['val'];
$q = date_create($_REQUEST['q']);
$date = date_format($q, 'Y-m-d');
if($date && $rec) {
// query the database
If I remove this part q=" + $("#date").val() + which is for the date and leave search only by number there is not a problem and I got results. But I want to be able to search number for particular date.

There no field with id="date"
Just replace line
<input type="text" class="form-control" name="date" placeholder="Date"/>
with
<input type="text" class="form-control" name="date" id="date" placeholder="Date"/>