Get text box with textfields on radio button click

Get text box with textfields on radio button click - javascript

I'm coding a page with some radio buttons and stuck with some problems. Here is my
current output
Below is my code
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#sitehtn {
display: none
}
.container {
width: 100%;
height: 600px;
background-color: rgb(179, 174, 174);
}
#datepickerT {
margin-left: 2em;
}
.eventDateDiv {
height: 150px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
#daysBetween {
margin-top: -1.4em;
margin-left: 30%;
}
.eventShowDiv {
height: 250px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
.event {
color: green;
margin-top: 5px;
}
</style>
<script>
$(function() {
$( "#datepickerF" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$( "#datepickerT" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$('#getdays').click(function() {
var start = $('#datepickerF').datepicker('getDate');
var end = $('#datepickerT').datepicker('getDate');
var days = (end - start)/1000/60/60/24;
document.getElementById("daysBetween").innerText=days;
});
$('input[type=radio]').change(function() {
$('#sitehtn').hide()
$(this).parent().next().show()
});
function displayResult(browser) {
document.getElementById("result").value=browser
}
});
</script>
</head>
<body>
<div class="container">
<div class="eventDateDiv">
<div class="event">
EVENT DATE
</div>
<p>FROM: <input type="text" id="datepickerF" /></p>
<p>To: <input type="text" id="datepickerT" /></p>
<button id="getdays">NO.OF DAYS </button>
<p id="daysBetween"> </p>
</div>
<div class="eventShowDiv">
<div class="event">
EVENT SHOW TIME
</div>
<p>TYPE OF SHOW: </p>
<label>
<input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" />
Unique
</label>
<input type="text" name="site" id="sitehtn" />
<br />
<label>
<input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
Varied
</label>
<input type="text" name="textfield3" id="sitehtn" />
</div>
</div>
</body>
</html>
My actual expected output is.
When I click on Unique radioButton, A textbox will appear and automatically Next
Radio Button(Varied)will hide
The Text Box include..Four Text Fields Inside it..two fields For The FROM and
TO Date picker and a Content Placeholder,and Last a Button To add same 4
Fields to the next Line in the same Text Box
As I'm new in this field, I need your support and valuable comments to solve this.

This may work with the date picker. You have to add the content holder and textbox though.
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#sitehtn {
display: none
}
.container {
width: 100%;
height: 600px;
background-color: rgb(179, 174, 174);
}
#datepickerT {
margin-left: 2em;
}
.eventDateDiv {
height: 150px;
width: 400px;
margin-left: 0;
margin-right: auto;
}
#daysBetween {
margin-top: -1.4em;
margin-left: 30%;
}
.eventShowDiv {
height: 250px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
.event {
color: green;
margin-top: 5px;
}
</style>
<script>
function loading() {
$( ".datepickerF" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$( ".datepickerT" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$('.getdays').click(function() {
var start = $(this).prev().prev().find('input').datepicker('getDate');
var end = $(this).prev().find('input').datepicker('getDate');
var days = (end - start)/1000/60/60/24;
$(this).next().text(days);
});
$('input[id=courtierRadio]').change(function() {
$('#hideRadio').html("");
$('#hideRadio').append(getAppleInfo());
});
function displayResult(browser) {
document.getElementById("result").value=browser
}
};
window.onload = loading;
// anti-pattern! keep reading...
function getAppleInfo() {
var eventDateDiv ="";
eventDateDiv = $("<div></div>").addClass("eventDateDiv");
eventDateDiv.append($("<p></p>").text("FROM: ").append($("<input>").attr("class", "datepickerF").attr("type", "text")));
eventDateDiv.append($("<p></p>").text("TO: ").append($("<input>").attr("class", "datepickerT").attr("type", "text")));
eventDateDiv.append($("<button></button>").text("NO.OF DAYS ").attr("class", "getdays"));
eventDateDiv.append($("<p></p>").attr("class", "daysBetween"));
eventDateDiv.append($("<a>").text("Add Another").attr("href", "#").attr("onclick", "belowDiv(this)"));
return eventDateDiv;
}
function belowDiv(self){
$('#hideRadio').append(getAppleInfo());
loading();
}
</script>
</head>
<body>
<div class="container">
<div class="eventDateDiv" title="numb">
<div class="event">
EVENT DATE
</div>
<p>FROM: <input type="text" class="datepickerF" /></p>
<p>To: <input type="text" class="datepickerT" /></p>
<button class="getdays">NO.OF DAYS </button>
<p class="daysBetween"> </p>
</div>
<div class="eventShowDiv" title="dumb">
<div class="event">
EVENT SHOW TIME
</div>
<p>TYPE OF SHOW: </p>
<label>
<input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" />
Unique
</label>
<input type="text" name="site" />
<br />
<div id="hideRadio">
<label>
<input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
Varied
</label>
<input type="text" name="textfield3" />
</div>
</div>
</div>
</body>
</html>

For your #1 question try this.
$('#courtierRadio').on('change', function () {
$('#sitehtn').show();
$('#agenceRadio').hide();
});

Related

Why is the content being appended to the wrong dynamically-generated tab?

I am trying to create jQuery Tabs dynamically. It should work so that every time I click on "Generate" Multiplication table button a new Tab should be created and a table with the current data parameters will be displayed in this tab.
Currently, the first tab stores all the tables, and the subsequent tabs do not store anything:
How can I make the first tab store only the first table and the second tab the next table and so on?
$( document ).ready(function() {
var tabs = [];
//Function to generate a multiplication table based on user's range input.
function generateTable(minCol, maxCol, minRow, maxRow) {
let tabsList = document.getElementById("tabsList");
let tableTabs = document.getElementById("tableTabs");
let tabObject = {
name: tabs.length,
minCol: minCol,
maxCol: maxCol,
minRow: minRow,
maxRow: maxRow
};
tabs.push(tabObject);
let listItem = document.createElement("li");
let anchor = document.createElement("a");
anchor.href = `#tab-${tabs.length-1}`;
anchor.innerText = `tab-${tabs.length-1}`;
listItem.appendChild(anchor);
tabsList.appendChild(listItem);
listItem.classList.add("ui-tabs-tab");
let tableDiv = document.createElement("div");
tableDiv.id = `tab-${tabs.length-1}`;
tableTabs.appendChild(tableDiv);
var error = document.getElementById("message");
var table = document.createElement("table");
var result = "";
//creating a multTable
for(var i=minRow; i<=maxRow;i++)
{
if(i==minRow)
{
result += "<tr>";
result += "<th>×</th>";
}
for(var j=minCol; j<=maxCol; j++)
{
if(i==minRow || j==minCol)
{
if(i==minRow)
result += "<th>" + j + "</th>";
else
result += "<td>"+ (i-1)*j + "</td>";
}
else
result += "<td>"+ (i-1)*j + "</td>";
}
result += "</tr>";
result += "<tr>";
result += "<th>" + i + "</th>";
if(i==maxRow)
{
for(var j=minCol; j<=maxCol; j++)
{
result += "<td>"+ i*j + "</td>";
}
}
}
//printing the table
table.innerHTML=result;
tableDiv.appendChild(table);
$("#tableTabs").tabs( { "active" : tabs.length-1});
return false;
}
//Function to validate user's input
$(function() {
$("#inputForm").submit(function(e) {
e.preventDefault();
}).validate({
submitHandler: function(form) {
var minCol = parseInt(document.getElementById("minCol").value);
var maxCol = parseInt(document.getElementById("maxCol").value);
var minRow = parseInt(document.getElementById("minRow").value);
var maxRow = parseInt(document.getElementById("maxRow").value);
generateTable(minCol, maxCol, minRow, maxRow);
return false;
}
});//end validate
});//end function
});
html {
background-color: #9FA5FF;
height: 100%;
}
body {
background-color: #E2E3FF;
margin: 0 auto;
width: 70%;
}
h2 {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
background-color: #c68de2;
}
h6 {
text-align: center;
margin-bottom: 0px;
}
.purple-background {
background-color:#c68de2;
}
.black {
color:#000000;
}
.inputfield{
height:30px;
}
.containerInput {
padding-left: 0px;
padding-right: 0px;
}
.container {
padding: 20px 0;
overflow: scroll;
height: 400px;
}
#multTable {
margin: auto;
}
#multTable td, th {
width: 50px;
font-size: 20px;
border: 1px solid blue;
}
#multTable td:nth-child(even) {
background-color: #ffffff;
}
#multTable th {
background-color: #9FA5FF;
}
#message p{
color: red;
margin-bottom: 0px;
padding-top: 15px;
padding-left: 15px;
text-align: center;
}
.error {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiplication table</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" integrity="sha512-9h7XRlUeUwcHUf9bNiWSTO9ovOWFELxTlViP801e5BbwNJ5ir9ua6L20tEroWZdm+HFBAWBLx2qH4l4QHHlRyg==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/validate.js"></script>
</head>
<body>
<div class="containerInput">
<h2>Multiplication Table</h2>
<div class="row justify-content-center">
<div class="col-lg-6 col-md-6-offset-3 col-sm-12 well" >
<form id="inputForm" class = 'card p-3 bg-light' class="form-horizontal">
<h6>Please enter range values for your Multiplication Table.</h6>
<hr>
<div class="form-group">
<label class="control-label col-sm-10" for="minCol">Minimum Column Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="minCol" name="minCol" value="-50">
</div>
<div id="minColSlider" class="sliderMC"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="maxCol">Maximum Column Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="maxCol" name="maxCol" value="-50">
</div>
<div id="maxColSlider" class="sliderMC2"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="minRow">Minimum Row Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="minRow" name="minRow" value="-50">
</div>
<div id="minRowSlider" class="sliderMR"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="maxRow">Maximum Row Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="maxRow" name="maxRow" value="-50">
</div>
<div id="maxRowSlider" class="sliderMR2"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary purple-background black">Generate</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="message">
</div>
<div id="tableTabs">
<ul id="tabsList">
</ul>
</div>
</body>
</html>
Fiddle demo

Re-initialization of the tabs is failing. You need to destroy them if they exist first.
if ($('#tableTabs').tabs()) {
$("#tableTabs").tabs('destroy');
}
$("#tableTabs").tabs({
"active": tabs.length - 1
});
Also note that your table markup is incomplete. It's lacking a closing table row tag:
<tr><th>×</th><th>-50</th></tr><tr><th>-50</th><td>2500</td>
$( document ).ready(function() {
var tabs = [];
//Function to generate a multiplication table based on user's range input.
function generateTable(minCol, maxCol, minRow, maxRow) {
let tabsList = document.getElementById("tabsList");
let tableTabs = document.getElementById("tableTabs");
let tabObject = {
name: tabs.length,
minCol: minCol,
maxCol: maxCol,
minRow: minRow,
maxRow: maxRow
};
tabs.push(tabObject);
let listItem = document.createElement("li");
let anchor = document.createElement("a");
anchor.href = `#tab-${tabs.length-1}`;
anchor.innerText = `tab-${tabs.length-1}`;
listItem.appendChild(anchor);
tabsList.appendChild(listItem);
listItem.classList.add("ui-tabs-tab");
let tableDiv = document.createElement("div");
tableDiv.id = `tab-${tabs.length-1}`;
tableTabs.appendChild(tableDiv);
var error = document.getElementById("message");
var table = document.createElement("table");
var result = "";
//creating a multTable
for(var i=minRow; i<=maxRow;i++)
{
if(i==minRow)
{
result += "<tr>";
result += "<th>×</th>";
}
for(var j=minCol; j<=maxCol; j++)
{
if(i==minRow || j==minCol)
{
if(i==minRow)
result += "<th>" + j + "</th>";
else
result += "<td>"+ (i-1)*j + "</td>";
}
else
result += "<td>"+ (i-1)*j + "</td>";
}
result += "</tr>";
result += "<tr>";
result += "<th>" + i + "</th>";
if(i==maxRow)
{
for(var j=minCol; j<=maxCol; j++)
{
result += "<td>"+ i*j + "</td>";
}
}
}
//printing the table
table.innerHTML=result;
tableDiv.appendChild(table);
if ($('#tableTabs').tabs()) {
$("#tableTabs").tabs('destroy');
}
$("#tableTabs").tabs( { "active" : tabs.length-1});
return false;
}
//Function to validate user's input
$(function() {
$("#inputForm").submit(function(e) {
e.preventDefault();
}).validate({
submitHandler: function(form) {
var minCol = parseInt(document.getElementById("minCol").value);
var maxCol = parseInt(document.getElementById("maxCol").value);
var minRow = parseInt(document.getElementById("minRow").value);
var maxRow = parseInt(document.getElementById("maxRow").value);
generateTable(minCol, maxCol, minRow, maxRow);
return false;
}
});//end validate
});//end function
});
html {
background-color: #9FA5FF;
height: 100%;
}
body {
background-color: #E2E3FF;
margin: 0 auto;
width: 70%;
}
h2 {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
background-color: #c68de2;
}
h6 {
text-align: center;
margin-bottom: 0px;
}
.purple-background {
background-color:#c68de2;
}
.black {
color:#000000;
}
.inputfield{
height:30px;
}
.containerInput {
padding-left: 0px;
padding-right: 0px;
}
.container {
padding: 20px 0;
overflow: scroll;
height: 400px;
}
#multTable {
margin: auto;
}
#multTable td, th {
width: 50px;
font-size: 20px;
border: 1px solid blue;
}
#multTable td:nth-child(even) {
background-color: #ffffff;
}
#multTable th {
background-color: #9FA5FF;
}
#message p{
color: red;
margin-bottom: 0px;
padding-top: 15px;
padding-left: 15px;
text-align: center;
}
.error {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiplication table</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" integrity="sha512-9h7XRlUeUwcHUf9bNiWSTO9ovOWFELxTlViP801e5BbwNJ5ir9ua6L20tEroWZdm+HFBAWBLx2qH4l4QHHlRyg==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/validate.js"></script>
</head>
<body>
<div class="containerInput">
<h2>Multiplication Table</h2>
<div class="row justify-content-center">
<div class="col-lg-6 col-md-6-offset-3 col-sm-12 well" >
<form id="inputForm" class = 'card p-3 bg-light' class="form-horizontal">
<h6>Please enter range values for your Multiplication Table.</h6>
<hr>
<div class="form-group">
<label class="control-label col-sm-10" for="minCol">Minimum Column Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="minCol" name="minCol" value="-50">
</div>
<div id="minColSlider" class="sliderMC"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="maxCol">Maximum Column Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="maxCol" name="maxCol" value="-50">
</div>
<div id="maxColSlider" class="sliderMC2"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="minRow">Minimum Row Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="minRow" name="minRow" value="-50">
</div>
<div id="minRowSlider" class="sliderMR"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="maxRow">Maximum Row Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="maxRow" name="maxRow" value="-50">
</div>
<div id="maxRowSlider" class="sliderMR2"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary purple-background black">Generate</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="message">
</div>
<div id="tableTabs">
<ul id="tabsList">
</ul>
</div>
</body>
</html>

Jquery validation error displayed on "label". How to fix it?

My form is made using the “bootstrap” styles. To check for input fields, I use “jquery” validation. Label with the name is on top of input, when you click on input, “label” moves over “input”. When you click “Next”, the error “validation” appears on top of the “label” with the name, and should be located under the “input”. How to fix so that “label” moves above “input” and the error is below “input”?
my code
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
</script>
<style type="text/css">
#step2,#step3,#step4,#step5{
display: none;
}
.form-group label
{
position: absolute;
top: 3px;
pointer-events: none;
left: 20px;
transition: .5s;
}
.container .form-group input:focus ~label,
.container .form-group input:valid ~label
{
left: 20px;
top: -20px;
color: rgb(66,133,244);
font-size: 12px;
font-weight: bold;
}
</style>
<script>
$(document).ready(function(e){
$.validator.addMethod("minlenghtname", function (value, element) {
return /^[a-z]+$/i.test(value);
}," does not match the format");
$.validator.addMethod("requiredname", function (value, element) {
return value.length > 2;
}," fill this field");
var v = $("#commentForm").validate({
rules: {
fname: {
requiredname: true,
minlenghtname: true
},
lname: {
requiredname: true,
minlenghtname: true
}
},
submitHandler: function() {
alert("Submitted, thanks!");
}
})
$(".next1").click(function() {
if (v.form()) {
$("#step2").show();
$("#step1").hide();
$("#progressText").html("Step 2 of 4");
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="progressText" style="margin-bottom:20px;">Step 1 of 4</div>
<form class="cmxform" id="commentForm" method="get" action="">
<div id="step1">
<div class="row">
<div class="form-group col-md-6 col-sm-6">
<input class="form-control" id="fname" name="fname" required="">
<label>First Name:</label>
</div>
<div class="form-group col-md-6 col-sm-6">
<input class="form-control" id="lname" name="lname" required="">
<label>Last Name:</label>
</div>
<p class="buttonWrapper">
<input name="formNext1" type="button" class="next1 nextbutton" value="Next" alt="Next" title="Next">
</p>
</div>
</div>
<div id="step2">
Next
</div>
</form>
</div>
</body>
</html>

Validation also uses labels to show errors so you end up with double label for each field. Those from validation come with error class, so you can target them and either show it normally:
.form-group label.error {
position: static;
}
or treat it like that label but move down:
.form-group label.error {
top: 35px;
}

How to ignore click listening on child elements in jQuery?

I have simple div with one element:
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
When I click on #drop-zone I want to trigger input manually. I'm trying like this:
jQuery('#drop-zone:not(input)').click(function() {
jQuery(this).find('input[type="file"]').trigger('click')
})
The main problem is that I'm getting an endless loop of clicks as my manual click trigger listener on parent element.

Make sure that the element clicked was the drop-zone by checking the id of the target. When jQuery emulates an event it will pass the same this reference but will not pass the event, so just check if the event is set.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone" && event.originalEvent) {
$("#drop-zone>input").trigger("click");
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
You could also just trigger the event manually.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone") {
$("#drop-zone>input")[0].click();
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>

Maybe this is what you want:
var x_m = 0;
var y_m = 0;
$('#drop-zone').click(function(event) {
var mtarget = document.elementFromPoint(x_m, y_m);
if (mtarget.id === "drop-zone") {
var input = $(this).find('input[type="file"]');
var h = false;
if ($(input).is(":visible")) {
input.hide();
} else {
input.show();
h = true;
}
console.log("You clicking, the #drop-zone, input.visible =>", h);
} else {
console.log("You clicking the input.");
}
})
$('body').mousemove(function(evt){
x_m = evt.pageX;
y_m = evt.pageY;
});
#drop-zone {
height: 40px;
width: 250px;
background-color: #8b5fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none; background: green;" multiple="multiple">
</div>

How can I define select one element in jQuery?

Here is my code:
$(".add_more_file").on("click", function(){
var $input = $(this).siblings('input').clone();
$input.insertBefore($(this));
})
a, input{
display: block;
margin-bottom: 5px;
}
a{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
<input class="upload" type="file" name="activity_licenses" required />
<a class="add_more_file" style="display:block">Add more file</a>
</div>
When I click on that button twice, I will have 4 inputs. While I want to have 2 inputs. I know, it's because for the second time, two elements will be matched in the siblings function. Any idea?

You can use .first() function to get just first sibling element.
$(".add_more_file").on("click", function(){
var $input = $(this).siblings('input').first().clone();
$input.insertBefore($(this));
})
a, input{
display: block;
margin-bottom: 5px;
}
a{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
<input class="upload" type="file" name="activity_licenses" required />
<a class="add_more_file" style="display:block">Add more file</a>
</div>

All you need is using .prev() (which only selects the previous element, not all previous ones) instead of .siblings(). Try this:
$(".add_more_file").on("click", function() {
var $input = $(this).prev('input').clone().val("");
$input.insertBefore($(this));
})
a,
input {
display: block;
margin-bottom: 5px;
}
a {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
<input class="upload" type="file" name="activity_licenses" required />
<a class="add_more_file" style="display:block">Add more file</a>
</div>

Your selector siblings('input') selects all the input elements in the div, which is 1 in the first click, 2 in the second one etc.
Select only 1 input for clone, you can keep a reference to the original element and keep cloning it
var $file = $('.w_activity_licenses_inputs input.upload');
$(".add_more_file").on("click", function() {
$file.clone().insertBefore(this);
})
a,
input {
display: block;
margin-bottom: 5px;
}
a {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
<input class="upload" type="file" name="activity_licenses" required />
<a class="add_more_file" style="display:block">Add more file</a>
</div>

You can use 'input:first' to only select first input and not all or use $('<input class="upload" type="file" name="activity_licenses" required />') to create a brand new input element
$(".add_more_file").on("click", function(){
var $input = $('<input class="upload" type="file" name="activity_licenses" required />');
$input.insertBefore($(this));
})
a, input{
display: block;
margin-bottom: 5px;
}
a{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
<input class="upload" type="file" name="activity_licenses" required />
<a class="add_more_file" style="display:block">Add more file</a>
</div>

Use last() to clone only the last input.
$(".add_more_file").on("click", function(){
var $input = $(this).siblings('input').last().clone().val("");
$input.insertBefore($(this));
})
a, input{
display: block;
margin-bottom: 5px;
}
a{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
<input class="upload" type="file" name="activity_licenses" required />
<a class="add_more_file" style="display:block">Add more file</a>
</div>

Try $(this).siblings('input:eq(0)') to target the first input. To clear the in input value if exists use .val(""):
$(".add_more_file").on("click", function(){
var $input = $(this).siblings("input:eq(0)").clone().val("");
// val("") will clear the value from cloned input if there is any
$input.insertBefore($(this));
});
a, input{
display: block;
margin-bottom: 5px;
}
a{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
<input class="upload" type="file" name="activity_licenses" required />
<a class="add_more_file" style="display:block">Add more file</a>
</div>

Drop-down list closes at unwanted time

I want to create search-input with drop-down list. The list must close when i have focused or clicked anywhere except search-input.
I added listClose() to "blur"-Listener. But now I can`t catch click-event from drop-down elements. Which is the event-listener I really need? Or I need the another realization?
Please, run snippet below. I tried to write it the most clear.
document.addEventListener("DOMContentLoaded", function() {
var inputElement = document.getElementById("input_word-search");
var listElement = document.getElementById("dd-menu_search-input");
// Input will focused when document is ready.
inputElement.focus();
listOpen = function() {
listElement.classList.add('dd-open');
};
listClose = function() {
listElement.classList.remove('dd-open');
};
inputElement.addEventListener("focus", function(e) {
listOpen();
});
inputElement.addEventListener("blur", function(e) {
listClose();
});
})
.dd-menu {
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
position: absolute;
display: none;
}
.dd-suggestion {
cursor: pointer;
text-align: left;
padding: 3px 20px;
line-height: 24px;
}
.dd-suggestion:hover {
color: #fff;
background-color: #697981;
}
.dd-open {
display: block;
}
.dd-empty {
display: none;
}
#dd-menu_search-input {
width: 74%;
}
<body>
<div id="input-group">
<input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach">
<div id="dd-menu_search-input" class="dd-menu dd-open">
<div class="dd-dataset">
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-1
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-2
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-3
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-4
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-5
</div>
</div>
</div>
</div>
</body>

A solution (or may I say workaround) is to use onmousedown instead of onclick, so it will look like this (Note that I'm also removing the alert() and using a console.log() instead)
<body>
<div id="input-group">
<input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach">
<div id="dd-menu_search-input" class="dd-menu dd-open">
<div class="dd-dataset">
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-1
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-2
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-3
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-4
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-5
</div>
</div>
</div>
</div>
</body>

The reason is when you focusout the textbox, it call blur function and the list immediately disapear. So you can't click on the list. You can walkaround by setTimeout to listClose() like this
listClose = function() {
setTimeout(()=>{
listElement.classList.remove('dd-open');
},100)
};

I added boolean-variable that indicates mousedown-event on drop-down list
var mousedownOnNodeCalee = false;
listElement.addEventListener("mousedown", function (e) {
mousedownOnNodeCalee = true;
});
inputElement.addEventListener("blur", function (e) {
if(!mousedownOnNodeCalee) {
listClose();
return;
}
inputElement.focus();
mousedownOnNodeCalee = false;
});

Develop Reference

JavaScript is the programming language of the Web.

Get text box with textfields on radio button click - javascript

For your #1 question try this. $('#courtierRadio').on('change', function () { $('#sitehtn').show(); $('#agenceRadio').hide(); });

Related

Why is the content being appended to the wrong dynamically-generated tab?

Jquery validation error displayed on "label". How to fix it?

How to ignore click listening on child elements in jQuery?

How can I define select one element in jQuery?

Drop-down list closes at unwanted time

Categories

Resources