Develop Reference

How to contain jQuery datepicker within div?

UPDATES: I tried the suggestions below but they did not work.
I want to contain the calendar within the white div with a dark grey border (class = "profileEdit"), and only have its overflow viewable by scrolling. Right now, it's spilling onto profileEdit's parent divs.
SELECTED HTML
<div class="profileEdit">
<div class="profilePic">
</div>
<input type="text" class="form-control" id="usernameEdit" placeholder="Damon">
<form class="habitForm">
<h2>MY EXERCISE HABIT</h2>
<div class="habitFormGroup">
<div class="custom-select">
<select>
<option value="0">Before</option>
<option value="1">After</option>
<option value="2">During</option>
<option value="3">Every time</option>
<option value="4">When</option>
</select>
</div>
<input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
<p class="punctuation">,</p>
</div>
<p class="helperText">trigger</p>
<div class="habitFormGroup lockedLesson">
<p>I will</p>
<div class="exerciseEdit"></div>
<p class="punctuation">.</p>
</div>
<p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
<div class="habitFormGroup lockedLesson">
<div class="exerciseEdit"></div>
<p>is my reward.</p>
</div>
<p class="helperText lockedLesson">reward</p>
</form>
<div class="reminderSwitch">
<p>Remind me to perform habit</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<form class="reminderControls">
<label for="startDate">Start:</label>
<!-- CALENDAR -->
<div class="dateParent">
<input type="text" id="datepicker" value="">
</div>
</form>
</div>
Save</button>
</div>
DATEPICKER JQUERY
$(function () {
$("#datepicker").datepicker();
});
DATEPICKER CSS
.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
overflow-y: scroll;
position: relative;
}
#ui-datepicker-div {
position: absolute;
width: 280px;
font-family: frutigerLight;
}
.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}
UPDATE: Solution works, but messes up spacing: The space between the "Starts" toggles on and off as well.

You can use an inline datepicker and control its visibility with JavaScript:
$(function() {
$('.dateParent').datepicker({ inline: true, altField: '#datepicker' });
$('#datepicker').focus(function(event) {
event.preventDefault();
$('.ui-datepicker').addClass('shown');
return false;
});
$(document).click(function(event) {
if(!$(event.target).is('.dateParent *'))
$('.ui-datepicker').removeClass('shown');;
});
});
.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
position: relative;
}
.ui-datepicker {
visibility: hidden;
height: 0;
margin: 1rem auto;
}
.ui-datepicker.shown {
visibility: visible;
height: initial;
}
.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" type="text/css">
<div class="profileEdit">
<div class="profilePic">
</div>
<input type="text" class="form-control" id="usernameEdit" placeholder="Damon">
<form class="habitForm">
<h2>MY EXERCISE HABIT</h2>
<div class="habitFormGroup">
<div class="custom-select">
<select>
<option value="0">Before</option>
<option value="1">After</option>
<option value="2">During</option>
<option value="3">Every time</option>
<option value="4">When</option>
</select>
</div>
<input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
<p class="punctuation">,</p>
</div>
<p class="helperText">trigger</p>
<div class="habitFormGroup lockedLesson">
<p>I will</p>
<div class="exerciseEdit"></div>
<p class="punctuation">.</p>
</div>
<p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
<div class="habitFormGroup lockedLesson">
<div class="exerciseEdit"></div>
<p>is my reward.</p>
</div>
<p class="helperText lockedLesson">reward</p>
</form>
<div class="reminderSwitch">
<p>Remind me to perform habit</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<form class="reminderControls">
<label for="startDate">Start:</label>
<!-- CALENDAR -->
<div class="dateParent">
<input type="text" id="datepicker" value="">
</div>
</form>
</div>
Save</button>
</div>

Try to remove height attr from calendar element. If it doesnt work check this jQuery UI inline Datepicker auto-resize to parent container

As a UX designer I'd think that you want to either make the containing DIV larger (personally think a popup like the calendar shouldn't extend outside it's container) or possibly change the direction that the calendar control opens in relative to the mouse position. If your trigger control is at the bottom of it's container you have the calendar pop upwards instead of down.

why value is not being inserted into table

$(document).ready(function(){
$("#first_form").submit(feedtable);
function feedtable(e){
e.preventDefault();
var task = $("#fname").val(),
male = $("input[type='radio']:checked").val(),
//female = $("#female:checked").val(),
desc = $("#age").val(),
type = $("#city").val();
console.log(male);
console.log(task);
console.log(type);
$('#content').append(
"<tr><td>"+task+"</td>"+
"<td>"+male+"</td>"+
"<td>"+desc+"</td>"+
"<td>"+type+"</td>"+
"<td>"+"uyt"+"</td></tr>"
);
}
});
I am using #first_form named form and want to insert values in #content named table
Every output is showing in console but values are not inserting in table
HTML code is bit of messy
here i want to insert values from form to the table
it is not giving any error every value i enter in form i displayed in console but value is not adding in table.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.6.0.min.js"></script>
<script src="./one.js"></script>
<title>Document</title>
<style>
body{background-color: rgb(175, 166, 166);}
#tablee{border: 2px solid rgb(13, 13, 14);
margin-top: 0px;
width:fit-content;}
.content{border-collapse: collapse;
margin: 5px 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);}
#inp {margin-left: 500px;
border: 2px solid rgb(13, 13, 14);
width:fit-content;height:fit-content;
}
#inp form{overflow: hidden;}
</style>
</head>
<body>
<div id="tablee">
<table class="content">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>City</th>
<th>Action</th>
</tr>
<tr>
<td>ahmad</td>
<td>hgg</td>
<td>34</td>
<td>fdf</td>
<td>rrgr</td>
</tr>
</table>
</div>
<div id="inp">
<form id=first_form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" placeholder="NAME"><br><br>
<input type="radio" name="gender" class="male" value="male">
<label for="Male">Male</label><br>
<input type="radio" name="gender" class="male" value="female">
<label for="female">Female</label><br><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" placeholder="Age" value="0" max="999" min="1"><br><br>
<label for="city">Choose a city:</label>
<select name="city" id="city" placeholder="Select CIty">
<option value="lahore">lahore</option>
<option value="karachi">karachi</option>
<option value="multan">Multan</option>
<option value="islamabad">Islamabad</option>
</select>
<br>
<input type="submit" onclick="" value="submit" button class="button">
</form>
</div>
</body>
</html>

Just a hunch. Replace the variable name "type" with something else. As you can see, it is rendered as keyword. Might mean something.

Updating div when using ajax

I have code that displays two rows of colored inputs of type image. When one of the inputs is clicked, it is highlighted with a shadow and the shadow on the previously clicked input is removed. This jsfiddle shows it working as non-ajax code.
But this needs to work using ajax. I have setup a jsfiddle trying to show this but it fails to run so I probably don't have the ajax code correctly setup in it. But the ajax works here locally. In my local setup, the clicked on input is shadowed, as it should be, but the previously clicked input stays shadowed.
I found a post that said the div needed to be updated so I added the following but that just made the div disappear.
$("#group_one").load(location.href + "#group_one");
Here's the full code. Can someone help with this, please?
<style>
.imgStr {display:inline-block }
.selected{ box-shadow:0px 12px 22px 1px #333;}
div.shadow { border: 0px solid #3DA1D2; padding: 10px; }
div.shadow:hover {
-moz-box-shadow: 0 0 5px rgba(61,161,210,0.5);
-webkit-box-shadow: 0 0 5px rgba(61,161,210,0.5);
box-shadow: 0 0 15px rgba(61,161,210,0.5);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="outside.img"></div>
<form method="post" action="/echo/html/" ajax="true">
<div class='container' id="group_one">
<div class="imgStr shadow" style="background:red">
<input id="red_1" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_1" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_1" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
</div>
<div class='container' id="group_two">
<div class="imgStr shadow" style="background:red">
<input id="red_2" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_2" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_2" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
<div id="showid"></div>
<script>
var last_selected;
$("input").click(function(){
var current_selected = $(this).closest('.container').find(".selected");
$("#showid").text('previous selected = '+current_selected.attr('id'));
$(this).closest('.container').find(".selected").removeClass('selected');
$(this).addClass("selected");
});
</script

I understood what you were saying about the jsfiddle but I didn't know how to do it. I finally found an example that got it working, I think. Here is the updated jsfiddle. For some reason it only works in FF and Chrome. And it has lost the ability to show the selected item. The original jsfiddle and my code here works fine in that respect so it is something with this new jsfiddle that is causing the problem but I don't know how to fix that.
For this new jsfiddle, I need to be able to click on one of the inputs and have it selected (shows by a shadow around it). Then when a different input in that row is clicked, the shadow moves to it. I hope this helps to see the problem.
<style>
.imgStr {display:inline-block }
.selected{ box-shadow:0px 12px 22px 1px #333;}
div.shadow { border: 0px solid #3DA1D2; padding: 10px; }
div.shadow:hover {
-moz-box-shadow: 0 0 5px rgba(61,161,210,0.5);
-webkit-box-shadow: 0 0 5px rgba(61,161,210,0.5);
box-shadow: 0 0 15px rgba(61,161,210,0.5);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showform"></div>
<script>
function ShowForm () {
$.ajax({
url: 'ajax2.php',
success: function(data) {
$("#showform").html(`
<div class="container" id="group_one">
<div class="imgStr shadow" style="background:red">
<input id="red_1" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_1" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_1" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
</div>
<div class="container" id="group_two">
<div class="imgStr shadow" style="background:red">
<input id="red_2" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_2" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_2" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
<div id="showid"></div>
`);
}
});
};
$(document).ready(function() {
ShowForm();
$("input").click(function(){
var current_selected = $(this).closest(".container").find(".selected");
$("#showid").text("previous selected = "+current_selected.attr("id"));
$(this).closest(".container").find(".selected").removeClass("selected");
$(this).addClass("selected");
});
});
</script>

Opening a form in an iFrame instead of new window

Currently I have the following code.
<form method="get" id="searchform" action="/scraper/l.php?">
<div>
<input type="text" placeholder="Some Name Here" value="" name="n" id="n" style="padding: 7px; border: 1px solid #ddd;width: 75%;">
<input type="submit" id="searchsubmit" value="Index" class="btn" style="padding: 6px; color: #fff; background-color: #ed207b; border: 2px solid #ed207b;">
</div>
</form>
I am trying to make it so that it opens the path example.com/scraper/l.php?n=(Our ID) in an iFrame window on the same page appose to creating a new window.

based on your requirement, you can check whether the $_GET['n'] param is set when the page is loaded.(because you are submitting to the same page itself) if it is loaded, you can display the iframe. since you are using php, i will give you the exact code as follows.
<html>
<head>
</head>
<body>
<form method="get" id="searchform" action="/scraper/l.php?">
<div>
<input type="text" placeholder="Some Name Here" value="" name="n" id="n" style="padding: 7px; border: 1px solid #ddd;width: 75%;">
<input type="submit" id="searchsubmit" value="Index" class="btn" style="padding: 6px; color: #fff; background-color: #ed207b; border: 2px solid #ed207b;">
</div>
</form>
<?php
if(isset($_GET['n']) && !empty($_GET['n'])){
?>
<iframe src="http://www.google.com"></iframe>
<?php
}
?>
</body>
</html>

Remove disabled attribute using JQuery [duplicate]

This question already has answers here:
How to remove "disabled" attribute using jQuery?
(11 answers)
Closed 2 years ago.
I have tried following code given in JSFIDDLE...
But it is not working...
I want to Enable submit button only after filling all input fields....
JSFIDDLE
code tried :
<script>
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
</script>

What you're looking for is:
$('#register').prop('disabled', true); //makes it disabled
$('#register').prop('disabled', false); //makes it enabled

First of all, listen input event instead of keyup, The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed(including paste using right-click etc.)
You are updating empty value for every element. If last element is having valid value, variable will be false. use the same variable as flag in .each loop and prevent loop for next occurrences if value is false
(function() {
$('form input').on('input', function() {
var empty = false;
$('form input').each(function() {
if (!empty && $(this).val() == '') {
empty = true;
}
});
$('#register').prop('disabled', empty);
});
})()
.link-button-blue {
font: bold 14px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #002633;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: pointer;
}
.link-button-blue:disabled {
font: bold 14px Arial;
text-decoration: none;
background-color: #333;
color: #ccc;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: no-drop;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<div class="form-field-input">
<input type="submit" value="Go To Step 2" id="register" class="link-button-blue" disabled="disabled">
</div>
<div class="form-field-label">Full Name :</div>
<div class="form-field-input">
<input type="text" value="" name="fname" id="fname" required>
</div>
<div class="form-field-label">Address :</div>
<div class="form-field-input">
<textarea value="" name="address" id="address" rows="4" pattern=".{15,}" required title="15 characters minimum" required></textarea>
</div>
<br>
<div class="form-field-label">Email :</div>
<div class="form-field-input">
<input type="text" value="" name="email" id="email" required>
</div>
<br>
<div class="form-field-label">Mobile :</div>
<div class="form-field-input">
<input type="text" value="" maxlength="12" minlength="10" name="mobile" id="mobile" onkeypress="return isNumber(event)" required>
</div>
<br>
<div class="form-field-label">Phone :</div>
<div class="form-field-input">
<input type="text" value="" name="phone" id="phone" onkeypress="return isNumber(event)" required>
</div>
<div class="form-field-label">Fax :</div>
<div class="form-field-input">
<input type="text" value="" name="fax" id="fax" onkeypress="return isNumber(event)">
</div>
<div class="form-field-label">Birthdate :</div>
<div class="form-field-input">
<input type="text" name="birthdate" id="birthdate" placeholder="Click To Open Calendar" required>
</div>
<br>
<div class="form-field-label">Age :</div>
<div class="form-field-input">
<input type="text" value="" name="age" id="age" placeholder="Select Birthdate" required>
</div>
<br>
<div class="form-field-label">Select Questionnaire Catagary :</div>
<div class="form-field-input">
<label class="checkbox">
<input id="select_question_category-0" type="checkbox" name="select_question_category[]" value="General" />General</label>
<br>
<label class="checkbox">
<input id="select_question_category-1" type="checkbox" name="select_question_category[]" value="Stressfull Life Like - IT/BPO/Management" />Stressfull Life Like - IT/BPO/Management</label>
<br>
<label class="checkbox">
<input id="select_question_category-2" type="checkbox" name="select_question_category[]" value="Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer" />Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer</label>
<br>
<label class="checkbox">
<input id="select_question_category-3" type="checkbox" name="select_question_category[]" value="Heredity of Diabetes/Presently Suffering from Diabetes" />Heredity of Diabetes/Presently Suffering from Diabetes</label>
<br>
<label class="checkbox">
<input id="select_question_category-4" type="checkbox" name="select_question_category[]" value="Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack" />Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack</label>
<br>
</div>
<br>
<div class="form-field-label">Gender :</div>
<div class="form-field-input">
<select name="gender" id="gender" required>
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<br>
<div class="form-field-label"></div>
</form>
Fiddle demo

$(document).ready(function() {
$('.input-field').change(function() {
var empty = false;
$('.input-field').each(function() {
$('#btn').addClass('disabled');
if($(this).val() == ''){
empty = false;
return false; //u need to break out from each
}
empty = true; //then u need to set value when it's out from each
});
if(empty == true) {
$('#btn').removeClass('disabled');
}
});
});
u need to break out from each,then u need to set value when it's out from each