Here i have bunch of check boxes with in their respective div's.
I would like append a textbox to div#tables for every div which is having at least one check-box as checked, and vice versa.
Demo: Fiddle
How can i do this ?
Could anyone help me out ?
HTML
<select id="count" style="float:left;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<div style="float:left;" id="tables"></div>
<br/>
<br/>
<div class="checkbox" data-toggle="false" data-min="2" data-type="t1" style='float:left;background:yellow;width:100px'>
<input id="checkbox-1" type="checkbox" name="Data1" value="option1" />
<label for="checkbox-1">HTML</label>
<br />
<input id="checkbox-2" type="checkbox" name="Data2" value="option2" />
<label for="checkbox-2">CSS</label>
<br />
<input id="checkbox-3" type="checkbox" name="Data3" value="option3" />
<label for="checkbox-3">HTML</label>
<br />
<input id="checkbox-7" type="checkbox" name="Data7" value="option7" />
<label for="checkbox-7">HTML</label>
<br />
</div>
<div class="checkbox" data-toggle="false" data-min="3" data-type="t1" style='float:left;margin-left:100px;background:brown;width:100px'>
<input id="checkbox-4" type="checkbox" name="Data4" value="option4" />
<label for="checkbox-4">CSS</label>
<br />
<input id="checkbox-5" type="checkbox" name="Data5" value="option5" />
<label for="checkbox-5">HTML</label>
<br />
<input id="checkbox-6" type="checkbox" name="Data6" value="option6" />
<label for="checkbox-6">CSS</label>
<br />
<input id="checkbox-8" type="checkbox" name="Data8" value="option8" />
<label for="checkbox-8">HTML</label>
</div>
jQuery
$(document).ready(function () {
$('#count').on('change', function () {
//do stuff here
//my random "on change" behaviour {
var chkboxes = $('input[type=checkbox]:checked');
var txtboxes = $('input[type=text]');
for (var i = 0; i < chkboxes.length; i++) {
$(chkboxes[i]).prop('checked', false);
}
for (var i = 0; i < txtboxes.length; i++) {
$(txtboxes[i]).remove();
}
});
$('input[type=checkbox]').on('change', function (e) {
//this was deselected no need to check?
if ($(this).prop('checked')) {
var parent = $($(this).parent()[0]);
var newtextbox = '<input type="text" value="' + parent + '"/>';
$("#tables").append(newtextbox); //append table
}
if (!$(this).prop('checked')) {
return false;
}
});
});
Thanks in advance.
I added id to your appended textarea in order to be able to know if their exists or not.
var newtextbox = '<input id="textarea_'+classname+'" type="text" value="' + parent + '"/>';
And for vice versa, I used remove jquery method.
$("#textarea_"+classname).remove();
Can you check this fiddle ?
DEMO
Related
I have a problem i dont know how can i read the value stored in <select><option> </option></select> and from radio buttons here i have my code with js and html
function inport(){
var name = document.getElementById("name").value;
var index = document.getElementById("index").value;
var phone = document.getElementById("phone").value;
var grade = document.getElementById("grade").value;
var session = document.getElementById("session").value;
console.log(name);
console.log(index);
console.log(phone);
console.log(grade);
console.log(session);
}
<form>
<div>
<h1>Details</h1>
<div>
<label>Name</label>
<input type="text" id="name">
</div>
<div>
<label>Index</label>
<input type="text" id="index">
</div>
<div>
<label>Phone</label>
<input type="text" id="phone">
</div>
<div id="grade">
<label><input type="radio" name="groupName" value="5"> 5</label>
<label><input type="radio" name="groupName" value="6"> 6</label>
<label><input type="radio" name="groupName" value="7"> 7</label>
<label><input type="radio" name="groupName" value="8"> 8</label>
<label><input type="radio" name="groupName" value="9"> 9</label>
<label><input type="radio" name="groupName" value="10"> 10</label>
<div>
</div>
<div>
<label>Session</label>
<select id="session">
<option value="checkbox">Decembar</option>
<option value="checkbox">November</option>
<option value="checkbox">Octomber</option>
<option value="checkbox">September</option>
<option value="checkbox">August</option>
<option value="checkbox">July</option>
<option value="checkbox">June</option>
<option value="checkbox">May</option>
<option value="checkbox">April</option>
<option value="checkbox">March</option>
<option value="checkbox">February</option>
<option value="checkbox">January</option>
</select>
</div>
<div>
<input type="button" value="Input student"id="import" onclick="inport();">
</div>
</div>
</form>
When i try to console.log my values of grade and session i want to get the number or month selected how can get the value should i change something in my html ? It works fine with first 3 because i just read from <input type="text"> but in other 2 i tried getting the value from radio button and select options. I think you can run this code snipped and see the output if you need more info let me know :).
Add name attribute in input.
JS Code
document.getElementById("show_radio").onclick = function () {
var radio = document.getElementsByName("gender");
var radio_selected;
for (var a = 0; a < radio.length; a++) {
if (radio[a].checked) {
radio_selected = radio[a].value;
}
}
document.getElementById("selected_radio").innerHTML = radio_selected;
}
<form>
<input type="radio" name="gender" value="Male" checked=""> Male<br>
<input type="radio" name="gender" value="Female"> Female<br>
<input type="radio" name="gender" value="I'd rather not inform"> I'd rather not inform
</form>
<button id="show_radio">Show</button>
<p id="selected_radio"></p>
I have a select box with a few dropdown options. Under each option there will be a checklist and total (each checklist item has a value). I need to accomplish this using pure javascript.
My problem is I don't know how to make each checklist specific to its dropdown item, and to reset the checkbox values after a user clicks a new dropdown option. I've tried calling the totalIt function in the display function but I can't get it to work.
Fiddle
My HTML is:
<div>
<select id="store">
<option value="A">Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="box A">
Location A<br>
<input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box B">
Location B
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box C">
Location C
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
CSS:
.hide {
display: none;
}
JS:
document.querySelector("select#store").addEventListener("change", () => {
display(event.target.value);
});
const boxs = document.querySelectorAll("div.box");
// Select box show/hide div
function display(value) {
for (const box of boxs) {
if (box.classList.contains(value)) {
box.classList.remove("hide");
} else {
box.classList.add("hide");
}
}
}
display("A");
// Total the values of the checkboxes
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementsByName("total")[0].value = total + "%";
}
Try to use the selected box children property. So that only those elements under the box would be updated. You are almost there I just had to tweak the code just a little.
HTML:
<div>
<select id="store">
<option value="A">Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="box A">
Location A <br>
Select your items:
<br>
<input name="proPercent1" value="20" type="checkbox" onclick="totalIt()"/> 20%<br>
<input name="proPercent2" value="15" type="checkbox" onclick="totalIt()"/> 15%<br>
Total:<br>
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box B">
Location B <br>
Select your items:
<br>
<input name="proPercent1" value="20" type="checkbox" onclick="totalIt()"/> 20%<br>
<input name="proPercent2" value="15" type="checkbox" onclick="totalIt()"/> 15%<br>
Total:<br>
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box C">
Location C <br>
Select your items:
<br>
<input name="proPercent1" value="20" type="checkbox" onclick="totalIt()" name="percentage1"/> 20%<br>
<input name="proPercent2" value="15" type="checkbox" onclick="totalIt()"/> 15%<br>
Total:<br>
<input value="0" readonly="readonly" type="text" name="total" />
</div>
JS:
document.querySelector("select#store").addEventListener("change", () => {
display(event.target.value);
});
const boxs = document.querySelectorAll("div.box");
let selectedBox = "";
function display(value) {
for (const box of boxs) {
if (box.classList.contains(value)) {
box.classList.remove("hide");
selectedBox = box;
} else {
box.classList.add("hide");
}
}
}
display("A");
// Total the values of the checkboxes
function totalIt() {
let total = 0;
if(selectedBox.children.proPercent1.checked) total = total + parseInt(selectedBox.children.proPercent1.value)
if(selectedBox.children.proPercent2.checked) total = total + parseInt(selectedBox.children.proPercent2.value)
selectedBox.children.total.value = `${total} %`;
}
Hopefully this helps
Hi,
I get solution to your problem...
document.querySelector("select#store").addEventListener("change", () => {
display(event.target.value);
});
const boxs = document.querySelectorAll("div.box");
// Select box show/hide div
function display(value) {
for (const box of boxs) {
if (box.classList.contains(value)) {
box.classList.remove("hide");
} else {
box.classList.add("hide");
}
}
}
display("A");
// Total the values of the checkboxes
function totalIt(Group) {
let input = document.querySelectorAll(`.${Group} [name=product]`),
total = 0,
totalInput = document.querySelector(`.${Group} [name=total]`)
input.forEach(input => {
if(input.checked) total += parseFloat(input.value);
totalInput.value = total + "%"
})
}
.hide {
display: none;
}
.box {
margin-top:30px;
}
<div>
<select id="store">
<option value="A">Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="box A">
Location A<br>
<input name="product" value="20" type="checkbox" onclick="totalIt('A')" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt('A')" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box B">
Location B
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt('B')" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt('B')" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box C">
Location C
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt('C')" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt('C')" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
I Convert for loop to forEach array loop
I Change the selector from getElementsByNames to querySelector and querySelectorAll
I Add argument to the function represent the Group
I Noticed that you add class for each Group represent Name
I Use this to make input selector and totalInput selector dedicated for each group... Like document.querySelectorAll(.a [name=product])
Finally I call function and type name group in html
To uncheck a checkbox you set the element.checked value to false, (more here Check/Uncheck checkbox with JavaScript)
const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
function display (value) {
allCheckboxes.forEach(element => element.checked = false);
// your code
...
}
how to change this so that you can choose not through a checkbox but through select
$("input[name=koleso]:first").prop("checked", true);
$('body').on('click', '.koleso label', function (e) {
koleso = $('.koleso input#'+$(this).attr('for')).data('koleso');
calc();
});
html
<div class="radiosBl koleso clearfix">
<input type="radio" checked name="koleso" id="kol_4" value="4" data-koleso="0">
<label for="kol_4"><span>ALL</span></label>
<input type="radio" name="koleso" id="kol_3" value="3" data-koleso="1">
<label for="kol_3"><span>3</span></label>
<input type="radio" name="koleso" id="kol_2" value="2" data-koleso="2">
<label for="kol_2"><span>2</span></label>
<input type="radio" name="koleso" id="kol_1" value="1" data-koleso="3">
<label for="kol_1"><span>1</span></label>
<input type="radio" name="koleso" id="kol_0" value="0" data-koleso="4">
<label for="kol_0"><span>NO</span></label>
</div>
I assume that you want to convert group checkbox to select
<div class="radiosBl koleso clearfix">
<select>
<option value="4" data-koleso="0">ALL</option>
<option value="3" data-koleso="1">3</option>
<option value="2" data-koleso="2">2</option>
<option value="1" data-koleso="3">1</option>
<option value="0" data-koleso="4">NO</option>
</select>
</div>
$("input[name=koleso]:first").prop("checked", true);
$('body').on('change', '.koleso select', function (e) {
koleso = $(this).children("option:selected").data("koleso");
calc();
});
Please run the below code.
i am a beginner in coding.
I am making a form which contains various fields.
As you can see that in the Education field on click of add education button I am successfully able to add another education field but I am not able to delete the exact field. Please help!
Thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment</title>
</head>
<body>
<h1>Candidate Information</h1>
<h2>Submit Your Info</h2>
<form>
<!-- name -->
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter your name" name="name" required><br />
<!-- gender -->
<br/><label for="gender"><b>Gender</b></label><br/>
<br/><label for="male"> Male</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="female"> Female</label>
<input type="radio" id="female" name="gender" value="female" /><br />
<!-- address -->
<br /><label for="address"><b>Address</b></label>
<br /><textarea rows="6" name="address" cols="70" placeholder="Enter your address" maxlength="200" required></textarea><br />
<!-- email -->
<br/><label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter your email" name="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" title="Please enter the correct email" required><br />
<!-- phone -->
<br/><label for="phone"><b>Phone</b></label>
<input type="tel" placeholder="Enter your phone number" name="phone" pattern="[0-9]{10}" title="Phone number can only be 10 digits" required><br /><br />
<!-- education -->
<p><b>Education</b></p>
<div id="education">
<label for="level"><b>Level:</b></label>
<select name="level" id="level">
<option>-Please select a level-</option>
<option value="SSC">SSC</option>
<option value="HSSC">HSSC</option>
<option value="Diploma">Diploma</option>
<option value="BE">BE</option>
<option value="BTech">BTech</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
</select>
<label for="year"><b>Year</b></label>
<input type="number" name="year1" max="2020" min="2000" />
<label for="grade"><b>Grade/%</b></label>
<input type="text" name="grade1" />
</div>
<input name="addeducation" type="button" value="Add Education" onClick="addEducation('education');"><br/><br/>
<script>
var counter = 1;
var limit = 4;
function addEducation(divname) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.className='addeduclass'+counter;
newdiv.innerHTML = "<label><b>Level: </b><label/>" + "<select><option>-Please select a level-</option><option value='SSC'>SSC</option><option value='HSSC'>HSSC</option><option value='Diploma'>Diploma</option><option value='BE'>BE</option><option value='BTech'>BTech</option><option value='BCA'>BCA</option><option value='MCA'>MCA</option></select>" +
"<label><b> Year</b><label/> " + "<input type='number' name='year' max='2020' min='2000'/>" +
"<label><b>Grade/%</b><label/> " + "<input type='text' name='grade'/>"+
"<button type='button' onClick='removeEducation('education',newdiv.className)'>Remove</button>";
document.getElementById(divname).appendChild(newdiv);
counter++;
console.log(counter);
console.log(newdiv.className);
}
}
function removeEducation(edudiv,divname) {
console.log("deleted");
document.getElementsByClassName(edudiv).removeChild(divname);
counter--;
}
</script>
<!-- skills -->
<p><b>Skills</b></p>
<div id="skills">
<label for="skillname"><b>Name</b></label>
<input type="text" name="skillname">
<label for="rating"><b>Rating:</b></label>
<select name="rating" id="rating">
<option>-Please select a rating-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<input name="addskill" type="button" value="Add Skill" onClick="addSkill('skills');"><br/>
<script>
var skillcounter = 1;
var skilllimit = 3;
function addSkill(divname1) {
if (skillcounter == skilllimit) {
alert("You have reached the limit of adding " + skillcounter + " inputs");
}
else {
var snewdiv = document.createElement('div');
snewdiv.className="addskillclass"
snewdiv.innerHTML = "<label><b>Name</b></label>" + "<input type='text' name='skillname1'/>"+
"<label><b>Rating:</b></label>" + "<select><option>-Please select a rating-</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option></select>";
document.getElementById(divname1).append(snewdiv);
skillcounter++;
console.log(counter);
}
}
// function removeSkill(divname1) {
// }
</script>
<!-- hobby -->
<br/>
<label for="hobby"><b>Hobby</b></label>
<input type="text" placeholder="Enter your hobby" name="hobby"><br /><br />
<!-- photourl -->
<label for="photourl"><b>Photo</b></label>
<input type="url" name="photourl" placeholder="photo url" /><br />
<!-- submit -->
<input type="submit" value="Submit" />
</form>
</body>
</html>
You could simplify this a little like so:
Pass the delete button into the function removeEducation using the keyword this, so change to the following on your delete education buttons:
onClick='removeEducation(this);'
Then in your removeEduction function, you pass in the delete button which is clicked, traverse it to the parent node of the parent div of the button and then use removeChild to remove the parent div of the delete button:
function removeEducation(deleteButton) {
deleteButton.parentNode.parentNode.removeChild(deleteButton.parentNode);
counter--;
}
Just a small piece of advice, it is recommended to add event handling to elements via javascript using .addEventListener instead of inline in the html You can read more about that here (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment</title>
</head>
<body>
<h1>Candidate Information</h1>
<h2>Submit Your Info</h2>
<form>
<!-- name -->
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter your name" name="name" required><br />
<!-- gender -->
<br/><label for="gender"><b>Gender</b></label><br/>
<br/><label for="male"> Male</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="female"> Female</label>
<input type="radio" id="female" name="gender" value="female" /><br />
<!-- address -->
<br /><label for="address"><b>Address</b></label>
<br /><textarea rows="6" name="address" cols="70" placeholder="Enter your address" maxlength="200" required></textarea><br />
<!-- email -->
<br/><label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter your email" name="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" title="Please enter the correct email" required><br />
<!-- phone -->
<br/><label for="phone"><b>Phone</b></label>
<input type="tel" placeholder="Enter your phone number" name="phone" pattern="[0-9]{10}" title="Phone number can only be 10 digits" required><br /><br />
<!-- education -->
<p><b>Education</b></p>
<div id="education">
<label for="level"><b>Level:</b></label>
<select name="level" id="level">
<option>-Please select a level-</option>
<option value="SSC">SSC</option>
<option value="HSSC">HSSC</option>
<option value="Diploma">Diploma</option>
<option value="BE">BE</option>
<option value="BTech">BTech</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
</select>
<label for="year"><b>Year</b></label>
<input type="number" name="year1" max="2020" min="2000" />
<label for="grade"><b>Grade/%</b></label>
<input type="text" name="grade1" />
</div>
<input name="addeducation" type="button" value="Add Education" onClick="addEducation('education');"><br/><br/>
<script>
var counter = 1;
var limit = 4;
function addEducation(divname) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.className='addeduclass'+counter;
newdiv.innerHTML = `<label><b>Level: </b><label/>
<select>
<option>-Please select a level-</option>
<option value='SSC'>SSC</option>
<option value='HSSC'>HSSC</option>
<option value='Diploma'>Diploma</option>
<option value='BE'>BE</option>
<option value='BTech'>BTech</option>
<option value='BCA'>BCA</option>
<option value='MCA'>MCA</option>
</select>
<label><b> Year</b><label/> <input type='number' name='year' max='2020' min='2000'/>
<label><b>Grade/%</b><label/> <input type='text' name='grade'/>
<button type='button' onClick="removeEducation('education','${newdiv.className}')">Remove</button>`;
document.getElementById(divname).appendChild(newdiv);
counter++;
console.log(counter);
console.log(newdiv.className);
}
}
function removeEducation(edudiv,divname) {
console.log("deleted");
document.getElementById(edudiv).removeChild(document.getElementsByClassName(divname)[0]);
counter--;
}
</script>
<!-- skills -->
<p><b>Skills</b></p>
<div id="skills">
<label for="skillname"><b>Name</b></label>
<input type="text" name="skillname">
<label for="rating"><b>Rating:</b></label>
<select name="rating" id="rating">
<option>-Please select a rating-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<input name="addskill" type="button" value="Add Skill" onClick="addSkill('skills');"><br/>
<script>
var skillcounter = 1;
var skilllimit = 3;
function addSkill(divname1) {
if (skillcounter == skilllimit) {
alert("You have reached the limit of adding " + skillcounter + " inputs");
}
else {
var snewdiv = document.createElement('div');
snewdiv.className="addskillclass"
snewdiv.innerHTML = "<label><b>Name</b></label>" + "<input type='text' name='skillname1'/>"+
"<label><b>Rating:</b></label>" + "<select><option>-Please select a rating-</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option></select>";
document.getElementById(divname1).append(snewdiv);
skillcounter++;
console.log(counter);
}
}
// function removeSkill(divname1) {
// }
</script>
<!-- hobby -->
<br/>
<label for="hobby"><b>Hobby</b></label>
<input type="text" placeholder="Enter your hobby" name="hobby"><br /><br />
<!-- photourl -->
<label for="photourl"><b>Photo</b></label>
<input type="url" name="photourl" placeholder="photo url" /><br />
<!-- submit -->
<input type="submit" value="Submit" />
</form>
</body>
</html>
Try this out. It worked. Made few changes to the remove function
I've got a big help with this community to achieve on show a "next" button when some input tag are compiled.
I've used this code:
$('.name').keyup(function() {
$('#next1').toggle(this.value != '');
});
#next1 {
display: none;
}
But how can I modify it if in my page is more complex?
For example here i have some checkbox, radio input and select tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="name" type="text" name="name" />
<input type="text" name="phone" placeholder="Phone" />
<label class="radio-inline"><input type="radio" name="internet" value='Y'>Y</label>
<label class="radio-inline"><input type="radio" name="internet" value='N'>N</label>
<label for="degree">Degree</label><br/>
<input type="checkbox" name="degree" value="degree"> Degree
<select id='city' name='city' title='City' class='required1Sel form-control' >
<option value=''></option>
<option value='1'>NY</option>
<option value='2'>LA</option>
<option value='3'>MIAMI</option>
</select>
<div id="next1">
<input type="button" name="next" class="next action-button" value="Next" />
</div>
For the Select or the Checkbox you can use the change() function.
$('#city').change(function() {
$('#next1').toggle(this.value != '');
});
See this JSFiddle: https://jsfiddle.net/fpwo8e7e/1/