We Keep Coding

jQuery add another html tag to an existing tag

I have this code from the browser console that is coming from Javascript of datatables plugin (All codes are shortened):
<div class="dataTables_length" id="mytable_length">
<label>
"عرض "
<select name="mytable_length" aria-controls="mytable" class="form-select form-select-sm"></select>
"نتائج"
</label>
</div>
and underneath of this code I have this code (All codes are shortened):
<div id="mytable_filter" class="dataTables_filter">
<label>
"بحث: "
<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="mytable">
</label>
</div>
This is a picture taken from the browser console just to make things clear
https://i.stack.imgur.com/UeLz9.png
Now I need to remove the parent tag <div id="mytable_filter" class="dataTables_filter">
and take/move the child tags with elements label and input and add them to/underneath <div class="dataTables_length" id="mytable_length"> using jQuery. So the final code will be:
<div class="dataTables_length" id="mytable_length">
<label>
"عرض "
<select name="mytable_length" aria-controls="mytable" class="form-select form-select-sm"></select>
"نتائج"
</label>
<label>
"بحث: "
<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="mytable">
</label>
</div>
using jQuery, what I did so far is:
$(document).ready(function(){
$('#mytable').DataTable({
initComplete: function () {
$('.dataTables_filter').remove();
},
});
});
but this will only remove <div id="mytable_filter" class="dataTables_filter"> with its child tags, and that's not what I need. How can I do this?

I need to remove the parent tag <div id="mytable_filter" class="dataTables_filter"> and take/move the child tags with elements label and input and add them to/underneath <div class="dataTables_length" id="mytable_length">
Appending nodes to a given container is a basic operation in jQuery. Select the nodes, use .appendTo(), done.
$(function () {
$('#mytable').DataTable({
initComplete: function () {
$('.dataTables_filter').children().appendTo('#mytable_length');
$('.dataTables_filter').remove();
},
});
});
A DOM node can only have one parent. If you append it to a different parent, it will effectively be removed from its current parent.

Clear text field

Problem: Hello, I would like to be able to clear a field when a value is entered.
The following is the form:
Currently, when the user selects a city. If there is value in the zip code field, the zip code field value will be removed and vice versa. However, when I try to apply the same logic for the same Hospital Name field, instead of leaving the value blank, the value remains there.
The following is what I have done when the user enters a zip code, the city drop down will be blanked and vice versa:
$(document).ready(function(){
$('#zip').on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
/*console.log('input');*/
});
$('#city').on("change",function(){
$('#zip').val('').trigger('input');
/*console.log('change');*/
});
});
and works fine.
However, I tried to use the same logic to be applied when a user enters a name of a hospital followed by the city. It does remove the city dropdown but not the hospital name field. When I enter a Hospital Name and enter a city, the zip code field will not be blank but remains:
$(document).ready(function(){
$('#zip').on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
/*console.log('input');*/
});
$('#city').on("change",function(){
$('#zip').val('').trigger('input');
/*console.log('change');*/
});
});
$(document).ready(function(){
$('#zip').on("change",function(){
$('#hospital option[value=""]').prop('selected',true).trigger('input');
/*console.log('input');*/
});
$('#hospital').on("change",function(){
$('#zip').val('').trigger('input');
/*console.log('change');*/
});
});
Here is the form I am using:
<cfset name_list1 = "Hosp">
<cfset name_list2 = "MMG,MG,RG">
<cfquery name="HospCityFind" datasource="Source">
SELECT Distinct officecity FROM UrgHosp
where utilizedspecialty in (<cfqueryparam value="#name_list1#" list="true" cfsqltype="cf_sql_varchar">)
and Company in (<cfqueryparam value="#name_list2#" list="true" cfsqltype="cf_sql_varchar">)
order by officecity
</cfquery>
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select></div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
</div>
</div>

The hospital field is a text field, but you are trying to clear it the way you cleared the drop down field. Updated:
$(document).ready(function(){
var $zip = $('#zip');
var $city = $('#city');
var $hospital = $('#hospital');
$zip.on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
$hospital.val('').trigger('input');
});
$city.on("change",function(){
$zip.val('').trigger('input');
});
$hospital.on("change",function(){
$zip.val('').trigger('input');
});
});
I haven't checked this actually runs, but you get the idea.
Other changes I made:
Only one $(document).ready() is ideal.
jQuery is expensive, so I saved jQuery objects to variables and called the variables when possible.
Consolidated both zip changes into the same function.

I was able to resolve my own problem. Just tried to get fancy with the code instead of just going the simple approach. I did the following to resolve my problem:
$(document).ready(function(){
$('#zip').on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
/*console.log('input');*/
});
$('#city').on("change",function(){
$('#zip').val('').trigger('input');
/*console.log('change');*/
});
$('#hospital').on("change",function(){
$('#zip').val('').trigger('input');
/*console.log('change');*/
});
$('#zip').on("change",function(){
$('#hospital').val('').trigger('input');
/*console.log('change');*/
});
});

how to change input type with onclick event in javascript

I have a check box and a text box in same row. Initially the type of the text box will be hidden, When I click the check box the type of the text box should change from hidden to text. if I unchecked it should change from type text to hidden. How can I do this? here is my code:
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="checkbox" name="Customer_Web" value="yes" style="float:left;"> <h4 align="left" style="font-size:16px; margin-left:20px !important;">Web Designing</h4>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="hidden" name="Web_Designing_Details" placeholder="Web Designing Details" class="form-control input-md" >
</div>
</div>
</div>

Instead of changing the type of input you are probably looking for visibility of input type text, you can set display to none or block or use jQuery method show and hide.
Live Demo
$('.row :checkbox').change(function(){
$('.form-control.input-md')[0].style.display = this.checked ? 'block' : 'none';
});

Change the type of text box from hidden to text.
HTML
<input type="text" name="Web_Designing_Details" placeholder="Web Designing Details" class="form-control input-md hidden" >
JQUERY/JAVASCRIPT
$(document).ready(function(){
$('input[name=Web_Designing_Details]').hide();
$('input[name=Customer_Web]').change(function(){
if( $(this).is(":checked"))
{
$('input[name=Web_Designing_Details]').hide();
}
else
{
$('input[name=Web_Designing_Details]').show();
}
});
});

If you want to hidden the input (don't care about the type), you can use toggleClass as below:
$('YOUR_INPUT').toggleClass('hidden', $('YOUR_CHECKBOX').is(':checked'));

Use jQuery to show and hide it depending on state of checkbox
$('#nameOfElement').show();
$('#nameOfElement').hide();

how to restric users not to enter special characters in text box using angularjs

Below is my code, for editable drop down.
<div class="form-group has-success" name="projectForm" style="margin-left:30%;">
<label for="select2" class="control-label">Select Project</label>
<div class="select-editable" id="select2">
<select ng-options="item.label for item in projectValues track by item.id" ng-change="getDataOnProjectLoad(selectedProject)" ng-model="selectedProject">
<input type="text" name="Project" value="select" ng-model="selectedProject.label" id="txtProject" required />
</div>
</div>
And if user tries to enter special character inside this editable drop down an error message should be displayed !!!

Some sort of regex matching in your controller should do the trick, I'd imagine:
$scope.labelIsAlphanumeric = function() {
$scope.selectedProject.label.match(/^[0-9a-z]*$/i)
}
Then, in your view:
<div ng-hide="labelIsAlphanumeric()" class="error-message">
Selected project label has non-alphanumeric characters!
</div>

Jquery get value of text box next to a radio button

I am creating a form with multiple radio buttons and text boxes.
Each Text box is next to radio button like below:
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="correct_answer_id">
Correct
</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required>
</div>
</div>
There are several radio button and text box pair like above in the form.
On click of the radio button, i want to get whatever has been written in the corresponding text box
i am trying to use Jquery's next() function like below:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).next('input[type="text"]').val());
}
});
But my log shows undefined. What i am doing wrong?

Try this : find parent div of radio and do next().next() to get input box div and then find input box to get value.
NOTE - You need not to check if ($(this).is(':checked')) as when you click on radio button it will get checked always.
$('input[type="radio"]').click(function(){
var value = $(this).closest('.radio').next().next('.col-sm-10').find('input[type=text]').val();
console.log(value );
});

use below code using parents(); see working fiddle
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parents('div.radio').next().next('div.col-sm-10').find('input[type="text"]').val());
}
});

You should put the value that you want submitted in the value attribute of your input elements.
e.g. <input type="radio" name="correct_answer_id" value="correct">
Your click handler would change to:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).val());
}
});
If there's some value that you don't want to place in the value attribute then it's still best to have a reference to the value in the input element instead of relying on a particular document layout.

Try this
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parent().parent().siblings().find('input[type="text"]').val());
}
});
Working Demo

If you can change the html a little, here is a different approach http://jsfiddle.net/xa9cjLd9/1/
<div class="form-group">
<div class="radio">
<label data-for='answer[]'>
<input type="radio" name="correct_answer_id" />Correct</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required />
</div>
</div>
$('input[type="radio"]').click(function () {
if ($(this).is(':checked')) {
var data = $(this).closest('label').attr('data-for');
console.log($('input[name=' + '"' + data + '"' + ']').val());
}
});
Just Define a data attribute to the label , which contains the name of the related input.