jQuery copy textfield on click
I am using the jQuery library to copy the text enter in one textfield to another textfield using a check box when clicked.. which is as follows:
<html>
<head>
<script src="js/jquery.js" ></script>
</head>
<body>
<f开发者_如何学Corm>
<input type="text" name="startdate" id="startdate" value=""/>
<input type="text" name="enddate" id="enddate" value=""/>
<input type="checkbox" name="checker" id="checker" />
</form>
<script>
$(document).ready(function(){
$("input#checker").bind("click",function(o){
if($("input#checker:checked").length){
$("#enddate").val($("#startdate").val());
}else{
$("#enddate").val("");
}
});
}
);
</script>
</body>
</html>
Now here I want the check box to be selected by default, so that the data entered in start date get copied automatically as check box is checked by default... so what event should be called here in jQuery script?
Please help me in resolving this issue... Solutions given below is not working for me...
You would want the value to be copied whenever there is a change, so you can use the keypress event:
function copyDate() {
if($("#checker").is(":checked")){
$("#enddate").val($("#startdate").val());
}
}
$(function(){
$("#startdate").keypress(copyDate).click(copyDate);
});
what about:
$("#startdate").change(function() {
// code here
});
First of all you have two options for checkbox to be checked by default... 1) from the html where the checkbox was defined using
checked='checked'
2) from jquery using
$(document).ready(function() { $("#checker").attr("checked","checked"); )};
Now coming to the main point... which is already mentioned above by 'Guffa'
$("#startdate").keypress(function(){
if($("#checker").is(":checked")){
$("#enddate").val($("#startdate").val());
}
});
function copyDate() {
if($("#checker").prop("checked")==true){ $("#enddate").val($("#startdate").val());
} }
$(function(){
$("#startdate").keypress(copyDate).click(copyDate);
});
In 2022 you most probably want to do this without having to resort to a library, so here's the vanilla JS / DOM API version. I've also added a bit of a grid-based layout and labels, along with changing input type="text" to input type="date". Also we now have a better event than keyPress to immediately react to user input, which is simply called input:
const startdate = document.getElementById('startdate');
const enddate = document.getElementById('enddate');
const checker = document.getElementById('checker');
startdate.addEventListener('input', function() {
if (!checker.checked) return;
enddate.value = this.value;
});form {
display: grid;
grid-template-columns: repeat(2, auto);
align-items: center;
gap: 10px;
}<form>
<input type="date" name="startdate" id="startdate" value="" /><label for="startdate">Start Date</label>
<input type="date" name="enddate" id="enddate" value="" /><label for="enddate">End Date</label>
<label><input type="checkbox" name="checker" id="checker" checked /> Start Date = End Date</label>
</form>Your question isn't very clear. It seems to me that you want to have the checkbox checked when the page loads, and that the start date is copied to the end date also:
$(document).ready(function() {
$("#checker").attr("checked","checked");
$("#enddate").val($("#startdate").val());
});
EDIT:
combined with your event handler:
$(document).ready(function() {
function checker() {
if ($("#checker").is(":checked"))
$("#enddate").val($("#startdate").val());
else
$("#enddate").val("");
}
$("#checker")
.click(checker)
.attr("checked","checked");
checker();
});
This looks complicated, but there's a problem with jQuery: when setting the "checked" attribute, firing the event handler right away using .click() will not work because the .is(":checked") function will not return the changed value (I don't know why, but that's how it is).
加载中,请稍侯......
精彩评论