Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I copy input from one textbox to another via checkbox using jQuery?

I'm cleaning up a simple form that has a Start Date textbox and an End Date textbox. I want to add a checkbox in between these fields that the user can check if the End Date is the same as the Start Date, so when they check it, the Start Date input value (e.g., 04/01/09) will automagically appear in the End Date textbox, so they don't have to type in the same date twice. Does that make sense?

BTW, I'm using the sexy jquery datepicker UI, and it's sweet, but I just can't figure out the above problem.

I know there's a simple solution (event handler?) but I'm stumped.

like image 829
Jesse Avatar asked Apr 01 '09 16:04

Jesse


People also ask

How copy text from one textbox to another in jQuery?

All one need to do is to bind keyup event on textbox and then copy textbox value to another textbox. Below jQuery code will copy text from txtFirst and copy it to txtSecond. $(document). ready(function() { $('#txtFirst').

How can copy textbox value from another in Javascript using checkbox?

You can write a javascript function to copy value from one textbox into the other textbox, and call the same function on “onclick” event of the checkbox. Same function can be used to clear the textbox on unchecking the checkbox.

How can get value entered textbox using jQuery?

jQuery val() method is used to get the value of an element. This function is used to set or return the value. Return value gives the value attribute of the first element. In case of the set value, it sets the value of the attribute for all elements.

How can I get checkbox value in jQuery?

With jQuery, you can use the . val() method to get the value of the Value attribute of the desired input checkbox.


2 Answers

Try this code:

$("#checkboxId").click(copyDate);

function copyDate()
{
   var start=$("#startDate").val();
   if (this.checked==true)
     $("#endDate").val(start);
}

Replace the 'id's with your own field ids.

like image 160
Ali Avatar answered Sep 19 '22 18:09

Ali


Simple hack to solve your problem.

<html>
<head>
    <script src="js/jquery.js" ></script>
</head>
<body>
    <form>
        <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>
like image 35
Tom Schaefer Avatar answered Sep 18 '22 18:09

Tom Schaefer