Develop Reference

How to show and hide multiple drop downs and buttons using single button

<div class="content">
<div class="row" style="margin-top: 27px;">
<div class="col-sm-2" style="width: 13%;">
<select id = "app" class="form_input_box">
<option value="" selected="selected">App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<select id = "app or not" class="form_input_box">
<option value="" selected="selected" hidden>App Type</option>
<option value="" selected>App Type</option>
<option value="1">App</option>
<option value="2">Not a App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;">
<select id = "dept" class="form_input_box">
<option value="" selected="selected">Department</option>
</select>
</div>
<div class="col-sm-1" style="margin-left: -25px;width: 12%;">
<input type="text" name="date_box" id="date_box" class="form_input_box filter_date" Placeholder="Created Date">
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<input type="text" name="search" id="search" class="form_input_box" Placeholder="Search">
</div>
<div class="col-sm-1" style="margin-left: -25px;">
<button id="erase" class="form-control btn btn-primary" name="erase">Clear values</button>
</div>
<div class="row">
<div class="col-sm-1">
<input type="month" id="month" name="month" class="form_input_box" placeholder="Month">
</div>
<div class="col-sm-2" style="right: 30px">
<button type="button" name="report" id="file" class="button">Report file</button>
</div>
</div>
</div>
</div>
i have html page with buttons drop downs like above i need to set a single button when i click on the button it will show all these things if i again click then these need to be hided how can i achieve this.

To solve the problem simply you could use javascript or jquery and hide or show the options based on the selected values...
$('idoption').hide();
$('idoption').show();

Changing content of an single input field after cloning form fields

I am having an interface for my admins where they can add fields to a database. If they want to add several fields they can easily add a new line. This is done by cloning via JavaScript. Now there is one dropdown menu and based on the selection from the dropdown I want to write default values to the text-input fields for min[] and max[].
This works fine if I am having just one line. But if I clone it several times and make a selection (e. g. I am selecting the option "relative_number") in just one line (e. g.) the min and max fields are updated in every line. What can I do so that when the drop down is selected in a certain line only the min and max values in the same line are updated?
Here is my code:
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select"> <option value=""></option> <option value="absolute_number">absolute_number</option> <option value="relative_number">relative_number</option> <option value="likert_5">likert_5</option> <option value="likert_7">likert_7</option> <option value="string">string</option> </select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value=""/>
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value=""/>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>
<script>
$(document).ready(function () {
$(".add-plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function () {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function()
{
var sel_cat = this.value;
if(sel_cat == 'relative_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
}
if(sel_cat == 'absolute_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
</script>
Tried already different ways to solve it via DOM, identifying parent nodes, siblings and so on but I don't get it working.
Thanks a lot in advance for your help!

While you should definitely look at dynamically modifying the names and id's of your cloned inputs, the issue you are having relates to your selectors for min and max
In the case of your javascript
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
You are selecting all min and max on the page.
You need to find the related min and max, which means finding the closet .row to the select-box and then finding the child min/max
var $row = $(this).closest("div.row");
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("100");
jQuery closest()
jQuery find()
Here is a functioning snippet example.
$(document).ready(function() {
$(".add-plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function() {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function() {
var sel_cat = this.value;
var $row = $(this).closest("div.row"); //find the parent row we are in.
if (sel_cat == 'relative_number') {
$row.find('input[id^="min"]').val("0"); //use that row to find the related min
$row.find('input[id^="max"]').val("100"); //use that row to find the related max
}
if (sel_cat == 'absolute_number') {
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select">
<option value=""></option>
<option value="absolute_number">absolute_number</option>
<option value="relative_number">relative_number</option>
<option value="likert_5">likert_5</option>
<option value="likert_7">likert_7</option>
<option value="string">string</option>
</select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value="" />
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value="" />
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>

How to add <div> in <form> on button click html and jquery

I want to add the following div structure whenever the '+' button [the addMore() function] is clicked. Although i am able to add the div structure, but the alignment of the input text are not equal as compared to the hard coded.
html file:
<form class="align-center">
<p class="6u 12u$(medium)">
Start Date: <input type="date" name="startdate" id="startdate" />
End Date: <input type="date" name="enddate" id="enddate" />
</p>
<p>
<div class="6u$ 12u$(xsmall)"><input type="text" name="numParticipants" id="numParticipants" value="" placeholder="Number of Participants"/></div>
</p>
<p>
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<div>OR</div>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Venue" />
</div>
</div>
</div>
</p>
<p>
<div class="row" id="newProg">
</div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()"><div style="font-size: 35px">+</div></a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()"><div style="font-size: 35px">-</div></a>
</div>
</div>
<div class="2u 12u$(medium); image right">
Submit
</div>
</p>
</form>
main.js
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.setAttribute('class', 'row');
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <input type="text" value="" placeholder="Customize your own programme"/> </div> <div class="3u$ 12u$(medium)"> <input type="text" value="" placeholder="Venue" /> </div> ';
document.getElementById('newProg').appendChild(objNewDiv);
}
Result when page is loaded:
when page loaded
Actual and Expected result:
actual and expected outcome

You have differenc in the class names of the div tags which you are appending in jquery.
Make it same as the Static HTML content, And the expected result will be achieved.
Differences I see is as below.
Static HTML has - <div class="3u 12u$(medium)"> ,Your Jquery HTML has - <div class="5u 12u$(medium)">
Static HTML has - <div class="3u 12u$(medium)">, Your jquery HTML has - <div class="5u 12u$(medium)">
Static HTml has - <div class="2u$ 12u$(medium)">, Your Jquery HTML has <div class="3u$ 12u$(medium)">
Because of the differences in the class names you find the differences in the way its rendered in the UI.

You missed one of your divs in JavaScript inner HTML string. I think it should be like this:
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div> <div class="3u$ 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Venue" /> </div> </div> ';

JQuery multiple tag groups in one page

Related question where I got the scripts:
jQuery, multiple tab groups on one page
jquery conflict with identical scripts
So as the title says I have a page that contains multiple tab groups. the tabs only work on the first group and stops working on the rest.
the script:
$(function() {
$(".tab_content").hide();
$("ul.tabs").each(function() {
$(this).find('li:first').addClass("active");
$(this).next('.panes').find('.tab_content:first').show();
});
$("ul.tabs").each(function() {
$("ul.tabs li a").click(function() {
alert("hello");
var cTab = $(this).closest('li');
cTab.siblings('li').removeClass("active");
cTab.addClass("active");
cTab.closest('ul.tabs').nextAll('.panes:first').find('.tab_content').hide();
var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
The Full HTML:
<table id="cform" style="margin-left: 13px;">
<tbody><tr>
<td>
<form id="form1" name="form1" method="post" action="">
<div>
<div>
<div>
<b>Subject:</b>
<select name="email_id[]" id="email_id_0" style="width: 350px">
<optgroup label="Emails">
<option value="">-- Select --</option><option value="1">test(Email)</option><option value="2">test(Email)</option><option value="3" selected="">tesst(Email)</option>
</optgroup>
<optgroup label="SMS">
</optgroup>
</select> <br>
<b>Subject:</b>
<select name="email_id[]" id="email_id_1" style="width: 350px;margin-right: 5;">
<optgroup label="Emails">
<option value="">-- Select --</option>
<option value="1">test</option><option value="2">test</option><option value="3">tesst</option> </optgroup>
<optgroup label="SMS">
</optgroup>
</select>
<center> <input type="button" class="btn-link right" value="Add More" onclick="javascript:addRows();"></center>
</div>
</div>
</div>
<br>
<div style=" margin-top: 25px; ">
<b>Scheduled (Days)</b>
<br>
<ul class="tabs">
<li class="">Days</li>
<li class="active">Weekly</li>
<li class="">Monthly</li>
<li class="">Yearly</li>
</ul>
<div class="panes">
<div id="tab1" class="tab_content" style="padding-top: 20px; display: none;">
days
</div>
<div id="tab2" class="tab_content" style="padding-top: 20px; display: block;">
weekly
</div>
<div id="tab3" class="tab_content" style="padding-top: 20px; display: none;">
monthly
</div>
<div id="tab4" class="tab_content" style="padding-top: 20px; display: none;">
yearly
</div>
</div>
<br>
<input type="hidden" name="rows_ctr" id="rows_ctr" value="1">
<input type="hidden" name="gid" id="" value="1">
<input type="submit" value="Save" class="btn-link right">
</div>
</form>
</td>
</tr><tr><td><form>
<div>
<div>
<div>
<b>Subject:</b>
<select name="email_id[]" id="email_id_1" style="width: 350px;margin-right: 5;">
<optgroup label="Emails">
<option value="">-- Select --</option>
<option value="1">test</option><option value="2">test</option><option value="3">tesst</option> </optgroup>
<optgroup label="SMS">
</optgroup>
</select>
<center> <input type="button" class="btn-link right" value="Add More" onclick="javascript:addRows();"></center>
</div>
</div>
</div>
<br>
<div style=" margin-top: 25px; ">
<b>Scheduled (Days)</b>
<br>
<ul class="tabs">
<li class="active">Days</li>
<li>Weekly</li>
<li>Monthly</li>
<li>Yearly</li>
</ul>
<div class="panes">
<div id="tab5" class="tab_content" style="padding-top: 20px; display: block;">
days
</div>
<div id="tab6" class="tab_content" style="padding-top: 20px; display: none;">
weekly
</div>
<div id="tab7" class="tab_content" style="padding-top: 20px; display: none;">
monthly
</div>
<div id="tab8" class="tab_content" style="padding-top: 20px; display: none;">
yearly
</div>
</div>
<br>
<input type="hidden" name="rows_ctr" id="rows_ctr" value="1">
<input type="hidden" name="gid" id="" value="1">
<input type="submit" value="Save" class="btn-link right">
</div>
</form></td></tr>
</tbody></table>
Note that this is dynamic hence i can add more groups, the dynamic part is the tr that holds the form.
Thank you

your jQuery is a bit confuse for me. try this:
$(function() {
/* init: display only first tab */
$(".tab_content").hide();
$("ul.tabs li").removeClass("active");
$("ul.tabs li:first").addClass("active");
$("ul.tabs").next(".panes").find(".tab_content:first").show();
/* binding click to display another tab */
$("ul.tabs li a").click(function(event) {
event.preventDefault();
$(this).parents("ul:first").next(".panes").find(".tab_content").hide();
$(this).parents("ul:first").find("li").removeClass("active");
$(this).parent().addClass("active");
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
});
});
..see at jsfiddle

aligning in same line

How to make the the text box and the the form fields to align in same line...
i gave display inline but its not working...
providing my code below....
how to fix it...
text field is one line below the buttons....
http://jsfiddle.net/S9PYV/embedded/result/
<div class="bs-docs-example" id="notesDocumentsOuterDF">
<div class="documents-make-container">
<!--<div class="insert-items-container">
<label for="idName">Name</label>
<input id="idName" type="text" name="name" value="" required="required" />
</div>-->
<div class="insert-items-container">
<select class="greenButton">
<option value="volvo">Create</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select class="greenButton">
<option value="volvo">Email|Access</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit" class="greenButton" value="Add Contacts">
</div>
<div class="insert-items-container" style="float: right;">
<!--<label for="idImageUpload">Image</label>-->
<input type="file" name="file" id="idImageUpload" class="file" size="40">
<div id="fakefile" class="fakefile">
<input type="text" class="fakeinput">
<img src="/images/icons/search.png">
</div>
</div>
<!--<div class="insert-items-container">
<label for="idContactSel">Contacts List</label>
<select id="idContactSel" name="contactselect">
<option value="">select email to share </option>
</select>
<input id="shareListBtn" class="greenButton" type="button" value="Share List" alt="sharelist">
<input id="contactListBtn" class="greenButton" type="button" value="Contacts List" alt="contactlist">
<input id="AddContactBtn" class="greenButton" type="button" value="Add Contacts" alt="addcontacts">
</div>-->
<!--<div class="insert-items-container">
<label for="idShareList">Share List</label>
<div id="idShareList" class="email-selected-container">
<table cellspacing="0" cellpadding="0" border="0" class="table">
<thead>
<tr class="documentsListHeading" role="row">
<th width="100px;">name</th>
<th width="180px;">Email</th>
<th>Permission</th>
</tr>
</thead>
<!-- share list -->
</div>
</div>

Your first insert-items-container has 100% width (as default divs do) so it's filling the whole line. You can solve this either by putting the text box in the same insert-items-container with the other form fields, or by setting all insert-items-containers to float: left