We Keep Coding

Choose between ids that only meet some conditions

I'm facing a problem with my project. My user can create a new div by clicking a button, but he can remove whatever div he wants, expect the first one. So if he create 2 new divs here is what the code will look like:
<div id="container1">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
<div id="container2">
<input type="text" id="title2"><br />
<input type="text" id="description2">
</div>
<div id="container3">
<input type="text" id="title3"><br />
<input type="text" id="description3">
</div>
If the user remove the second div my code will look like this.
<div id="container1">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
<div id="container3">
<input type="text" id="title3"><br />
<input type="text" id="description3">
</div>
Pretty simple. Now I want to use the information entered by the user in the text inputs, but I don't know how to select the active divs. Is there a way to select the container1 and container3 in the example above?
Keep in mind that the user can use up to 99 new div.
Your help is appreciated. Thank you,

Just apply a CSS selector:
<div id="parent">
<div id="container1">
<input type="text" id="title"><br />
<input type="text" id="description">
</div>
<div id="container3">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
</div>
$('#parent > div')
See here for more information: https://api.jquery.com/category/selectors/

You can add a class to each item. You would need to amend your code that is called when the button is clicked to handle this.
Let's say you gave all titles a class of "myTitle" and you gave all descriptions a class of "myDescription". Your div created would look something like this:
<div id="container1">
<input type="text" id="title" class="myTitle">
<br />
<input type="text" id="description" class="myDescription">
</div>
Now, in order to get all titles and descriptions you'd use jQuery and say:
$('.myTitle').each(function () {
console.log($(this).val());
});
$('.myDescription').each(function () {
console.log($(this).val());
});

First of all, you have multiple divs with the id "title" and "description", so change those to class. You can select the nth div with jquery: $("#container" + n)
you can select the title of the nth div: `$("#container" + n).children(".title");
you can select all of the divs by adding a class to them, such as .container

Scroll to Form and Fill a Field on Button Click

I've been fiddling with an idea using different languages, and I'm not sure what would work best. Maybe jQuery or a simple PHP script. I'd appreciate some help. I don't need a new field to be created on button click, I just want an existing form field to input text depending on the button clicked.
Here is the fiddle:
#contactform1 .sendmessagetext{padding-top:50px;text-transform:none;padding-bottom:35px;}
#contactform1 form{width:75%; margin:0 auto;}
#contactform1 form .ribbon {background: url(../images/contactribbon.png) 0 0 no-repeat transparent;width: 575px;height: 303px;position: absolute;right: 0;top: 175px;}
#leftblock{margin:-72px 0 0 0;}
#centerblock{margin:-123px 0px 0px 15px;}
#rightblock{margin:-71px 0px 0px 15px;}
.pricing_table2{line-height: 150%;font-size: 12px;margin: 0 auto;width: 75%;max-width: 800px;padding-top: 10px;}
.price_block2{text-align: center;width: 100%;color: #fff;float: left;list-style-type: none;transition: all 0.25s;position: relative;box-sizing: border-box;margin-bottom: 10px;border-bottom: 1px solid transparent;}
.pricing_table2 h3{text-transform: uppercase;padding: 5px 0;background: #333;margin: -10px 0 1px 0;}
.price3{display: table;background-image: url("../images/deepblue.jpg");width: 100%;height: 100px; border-radius:5px; background-size:cover;}
.price4{display: table;background-image: url("../images/trueblue.jpg");width: 100%;height: 130px; border-radius:5px; background-size:cover;}
.price5{display: table;background-image: url("../images/bluemove.jpg");width: 100%;height: 100px; border-radius:5px; background-size:cover;}
.price_figure2{font-size: 24px;text-transform: uppercase;vertical-align: middle;display: table-cell;}
.price_number2{font-weight: bold;display: block; text-transform:none; font-size:calc(0.5vw + 1.5vh + 1vmin);}
.price_tenure2{font-size: 11px;}
.price60{font-size:49px;}
.features2{background: #ffffff;color: #000; margin:0;}
.features2 li{padding: 8px 15px;font-size: 14px;list-style-type: none; font-family:"gilroylight"; padding-top:35px;}
.action_button2{text-decoration: none;color: #fff;font-weight: bold;border-radius: 5px;background: linear-gradient(#666, #333);padding: 5px 20px;font-size: 11px;text-transform: uppercase;}
<ul class="pricing_table2">
<li id="leftblock" class="price_block2">
<div class="price3">
<div class="price_figure2">
<span class="price_number2">Deep Blue</span>
</div>
</div>
<ul class="features2">
<li>First time, top to bottom comprehensive cleaning. Gets rid of dirt, grime and general all around gunk. Your home is returned  to a manageable level of clean.<br><br><button type="submit" class="button2" name='submit'>Select</button><br>
</li><span class="packagebottom">* An initial cleaning fee plus the regular fee is charged on the first visit.</span></li>
</ul>
</li>
<li id="centerblock" class="price_block2">
<div class="price4">
<div class="price_figure2">
<span class="price_number2">True Blue</span>
</div>
</div>
<ul class="features2">
<li>Our regular maintenance cleaning. We follow our checklist to the letter. You may choose weekly, bi-weekly or monthly cleanings. If you would like a custom cleaning arrangement, just let us know and we will gladly accommodate your preferences.<br><br><button type="submit" class="button2" name='submit'>Select</button><br>
</li><span class="packagebottom">* Client must have a Deep Blue cleaning first.</span></li>
</ul>
</li>
<li id="rightblock" class="price_block2">
<div class="price5">
<div class="price_figure2">
<span class="price_number2">Blue Move</span>
</div>
</div>
<ul class="features2">
<li>Our move out / empty house cleaning. Say goodbye to your old house, apartment or condo and hello to your new one with a copious cleaning. Just open the front door and we will take care of everything.<br><br><br>
<button type="submit" class="button2" name='submit'>Select</button></li>
</ul>
</li>
</ul>
<section id="contactform1" class="cform">
<div class="wrap">
<h2 class="sendmessagetext">Get in Touch</h2>
<form name="simp_cont" method="post" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" class="contact" onSubmit="return validateForm(this)">
<div class="ribbon"></div>
<input class="input" name="captcha" style="position:absolute; left:-9999px;" id="captcha" type="text" />
<input type="text" name="fname" id="name" placeholder="NAME">
<input type="text" name="phone" id="phone" placeholder="PHONE NUMBER">
<input type="text" name="email" id="email" placeholder="EMAIL ADDRESS">
<input type="text" name="footage" id="footage" placeholder="ESTIMATED SQUARE FOOTAGE">
<textarea class="textarea" name="message" placeholder="COMMENTS"></textarea>
<input name="form_name" type="hidden" value="contact_form" />
<button type="submit" class="buttoncontact2" name='submit'>SEND MESSAGE</button>
</form>
<br><br>
<div class="clear"></div>
</div>
</section>
My apologies it's horribly unstyled.
I'm trying to have it set so basically when you click select on a package, it fills the "Comments" field with the package name selected.
What would be the best approach to take here?

Kindly find below working html. I have used jQuery. I have removed one unnecessar br tag and have also updated broken HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".button2").click(function(){
//console.log($($(".price_number2")[$(this).index()-1]).text()+$(this).index());
$(".textarea").text($($(".price_number2")[$(this).index()-1]).text());
});
});
</script>
</head>
<body>
<ul class="pricing_table2">
<li id="leftblock" class="price_block2">
<div class="price3">
<div class="price_figure2">
<span class="price_number2">Deep Blue</span>
</div>
</div>
<ul class="features2">
<li>Our regular maintenance cleaning. We follow our checklist to the letter. You may choose weekly, bi-weekly or monthly cleanings. If you would like a custom cleaning arrangement, just let us know and we will gladly accommodate your preferences.<br><button type="submit" class="button2" name='submit'>Select</button><br>
</li><li><span class="packagebottom">* An initial cleaning fee plus the regular fee is charged on the first visit.</span></li>
</ul>
</li>
<li id="centerblock" class="price_block2">
<div class="price4">
<div class="price_figure2">
<span class="price_number2">True Blue</span>
</div>
</div>
<ul class="features2">
<li>Our regular maintenance cleaning. We follow our checklist to the letter. You may choose weekly, bi-weekly or monthly cleanings. If you would like a custom cleaning arrangement, just let us know and we will gladly accommodate your preferences.<br><br><button type="submit" class="button2" name='submit'>Select</button><br>
</li><li><span class="packagebottom">* Client must have a Deep Blue cleaning first.</span></li>
</ul>
</li>
<li id="rightblock" class="price_block2">
<div class="price5">
<div class="price_figure2">
<span class="price_number2">Blue Move</span>
</div>
</div>
<ul class="features2">
<li>Our move out / empty house cleaning. Say goodbye to your old house, apartment or condo and hello to your new one with a copious cleaning. Just open the front door and we will take care of everything.<br><br><br>
<button type="submit" class="button2" name='submit'>Select</button></li>
</ul>
</li>
</ul>
<section id="contactform1" class="cform">
<div class="wrap">
<h2 class="sendmessagetext">Get in Touch</h2>
<form name="simp_cont" method="post" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" class="contact" onSubmit="return validateForm(this)">
<div class="ribbon"></div>
<input class="input" name="captcha" style="position:absolute; left:-9999px;" id="captcha" type="text" />
<input type="text" name="fname" id="name" placeholder="NAME">
<input type="text" name="phone" id="phone" placeholder="PHONE NUMBER">
<input type="text" name="email" id="email" placeholder="EMAIL ADDRESS">
<input type="text" name="footage" id="footage" placeholder="ESTIMATED SQUARE FOOTAGE">
<textarea class="textarea" name="message" placeholder="COMMENTS"></textarea>
<input name="form_name" type="hidden" value="contact_form" />
<button type="submit" class="buttoncontact2" name='submit'>SEND MESSAGE</button>
</form>
<br><br>
<div class="clear"></div>
</div>
</section>
</body>
</html>

To add the product name in the form's teaxtarea, you have to get it from the button clicked.
$(".button2").on("click",function(){
// Get the package name
var packageName = $(this).closest(".price_block2").find(".price_number2").text();
// add it to the form's textarea
$("#contactform1 textarea").text("Product selected: "+packageName);
});
.closest() does an upward lookup to find a matching parent.
.find() does a downward lookup to find a matching child.
CodePen. (I removed the partial style which was preventing the button clicks)

jQuery would be the best way.
By the way, you got some strange behaviour on your html code. I did try to make a fiddle, but its impossible with your buttons, but dont know why.
But have a look here, i did make an example, how you can accomplish this.
`https://jsfiddle.net/eed0wh3u/1/`

Create a javascript function called handleSelect or something similar. Add a value to the select buttons. This value will be the thing put into the comments. For example:
`<button type='button' value='OptionName' onclick='handleSelect()'>Option Name!</button>`
The javascript will be kind of like this:
var handleSelect = function(e) {
('#comments').val(e.target.value) //Give your comment box a unique id i.e. 'comments'
}
This might have some minor errors cause I'm not that smart but it should point you in the right direction.

jqm flipswitch, float label left, switch right?

I am trying to get a bunch of flipswitches on a page in a mobile app.
I am using:
<div class="ui-content">
<form>
<fieldset>
<div data-role="fieldcontain">
<label for="checkbox-based-flipswitch">Checkbox-based:</label>
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch">
</div>
</fieldset>
</form>
</div>
It seems my "container" field is shortened. It does not stretch the entire width of the screen.
What am I missing?
I am looking to have the option fill the entire width of the screen. Label left, flipswitch right.

In this case a jQM grid might work better for you than a fieldcontain:
<div class="ui-grid-a flipContain">
<div class="ui-block-a">
<label for="chk1">Checkbox-based:</label>
</div>
<div class="ui-block-b">
<input type="checkbox" id="chk1" data-role="flipswitch" />
</div>
<div class="ui-block-a">
<label for="chk2">Checkbox-based:</label>
</div>
<div class="ui-block-b">
<input type="checkbox" id="chk2" data-role="flipswitch" />
</div>
</div>
Then with CSS, you can align the second column to the right and set the column widths as desired:
.flipContain .ui-block-a {
width: 70%;
line-height: 48px;
}
.flipContain .ui-block-b {
width: 30%;
text-align: right;
}

Apparently field-contain has been deprecated in 1.4 and will be removed in 1.5.
Can't you use a table width 100% and table cell ?
JsFiddle
<table width="100%">
<tr>
<td><label for="checkbox-based-flipswitch">Checkbox-based:</label></td>
<td><input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch"></td>
</tr>
</table>
And you can set the cell alignement as you want, as in the exemple both are centered.
td{
text-align:center;
}
You can set the alignment directly on the td JsFiddle :
<td align="right">

Submit Button not disappearing with ng-disabled

I've set up a form with Angular integrated into it. In this form, I want the final submit button to only show up when the form is valid. There are a number of fields, but the only fields that are required are the one's for a user'a name, email-address, and a checkbox. The form recognizes when a required field is invalid, however I can't get the submit button to disappear (and subsequently reappear).
Here's code for reference:
index.html:
<form name="captions" ng-controller="CaptionCtrl>
<div class="current-page">
<div class="pages">
<div class="page active" id="page1">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption1" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(2)">NEXT</button> </div>
</div>
<div class="page" id="page2">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption2" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(3)">NEXT</button>
</div>
</div>
<div class="page" id="page3">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption3" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(4)">NEXT</button>
</div>
</div>
<div class="page" id="page4">
<img src="images/blank_image.jpg">
<div class="page-form-submit-page">
<h4>TO ENTER YOUR CAPTION IN THE CONTEST, TELL US YOUR NAME AND CONTACT METHOD.</h4>
<input type="text" ng-model="user.name" size="70" placeholder="Name" required>
<input type="email" ng-model="user.email" size="70" placeholder="E-mail Address" required>
<br>
<input type="checkbox" required>I have read and accept the Terms & Conditions
<br>
<input class="page-form-submit-page-submit" ng-disabled="captions | validateFields" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
</div>
</div>
<div class="page" id="page5">
<img src="images/blank_image.jpg">
<div class="page-form-thankyou">
<span><strong>THANK YOU</strong></span>
</div>
<div class="chapter-two-story-link"><span class="yellow">CLICK TO TELL US YOUR STORY</span></div>
</div>
</div>
</div>
</form>
If you notice towards the bottom, I have a ng-disabled set with "captions | validateFields". I've tried this with a simply truthy statement as well so its not the filter I set up.
Edit: With feedback I've gotten what I initially wanted to do working with ng-show. However, ng-disabled would actually be more appropriate for what I want. I've added relevant css.
style.css
.page-form-submit-page-submit {
display: block;
padding: 5px 15px;
border: none;
border-radius: 2px;
margin: 40px 400px 20px auto;
text-align: center;
background-color: #001F45;
color: #FFD200;
}
.page-form-submit-page-submit:active {
background-color: #0250B0;
}
Can anyone explain how to get the submit button to show only after all fields are valid?

Try ng-enabled="captions.$valid" to disable (visible but not clickable) and ng-show="captions.$valid" to hide the button if the form is invalid.
More about forms in angular: https://docs.angularjs.org/api/ng/directive/form

Not tested, but you can use the $valid property of your form like this:
<input class="page-form-submit-page-submit" ng-disabled="!captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
But if you want the button to disappear completely, use ng-hide="!captions.$valid" instead of the ng-disabled directive

It's fairly easy
hide completly
<input class="page-form-submit-page-submit" ng-if="captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
visually disable
<input class="page-form-submit-page-submit" ng-disabled="captions.$invalid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">

Jquery how to give direction using show effect for multiple divs?

I have a problem with some jQuery code, I'm trying to show some fields in a form, but they have to appear only if the user clicks on Yes and hides when he clicks No. This works but when it shows the fields, it mounts them one on top of each other. I'm trying to give it direction, but is not working. Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<label> Do you want to create a new entry? </label>
<button id="showr" type="button" >YES</button>
<button id="hidr" type="button" >NO</button>
<br/>
<div class="mydiv">
<label> Field #1
<span class="small">Describe your field</span>
</label>
<textarea rows="10" cols="40" name="" id="" ></textarea>
</div>
<div class="mydiv">
<label> Field #2
<span class="small">Describe your field</span>
</label>
<textarea rows="10" cols="40" name="" id="" ></textarea>
</div>
<script>
$("#showr").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});
$("#hidr").click(function () {
$("div").hide(1000);
});
</script>
</body>
</html>
relevant jsFiddle
If somebody has an idea please let me know, thanks

Add this to your style:
.mydiv{ clear:both;}
What do you mean by direction?

jsFiddle
To get your desired result including centering, use the following CSS:
.mydiv {
background:#def3ca;
margin: 0 auto;
width:400px;
text-align:left;
clear:both;
display: none;
}
.mytext {
text-align:center;
}
.wrapper {
display:block;
}
With the following markup:
<div class="wrapper">
<label>Do you want to create a new entry?</label>
<button id="showr" type="button">YES</button>
<button id="hidr" type="button">NO</button>
<br/>
<div class="mydiv">
<label>Field #1 <span class="small">Describe your field</span>
</label>
<div class="mytext">
<textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
</div>
</div>
<div class="mydiv">
<label>Field #2 <span class="small">Describe your field</span>
</label>
<div class="mytext">
<textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
</div>
</div>
</div>
Notice I added a wrapper around everything and set display: block then in your margin for .mydiv I set it to 0 auto. This allows for centering.
I also worked on your jQuery to improve it a little bit.
$("#showr").click(function () {
$(".mydiv").show("fast");
});
$("#hidr").click(function () {
$(".mydiv").hide(1000);
});