Untitled
unknown
plain_text
3 years ago
6.4 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>char</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <style> .box { width: 100%; height: 150px; margin-bottom: 30px; } .count { width: 80px; font-size: smaller; text-align: top; font-family: "Roboto", sans-serif; color: green; } form { width: 60%; margin: auto; margin-top: 5%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding: 2%; border-radius: 10px; } form div { margin: 10px 0px; } </style> </head> <body> <form action="" method="post"> <div class="row"> <div class="col"> <input id="fname" name="fname" type="text" class="form-control" placeholder="First name" /> </div> <div class="col"> <input id="lname" name="lname" type="text" class="form-control" placeholder="Last name" /> </div> </div> <div> <input id="phone" name="phone" type="tel" class="form-control" placeholder="Phone number" /> </div> <div class="box"> <textarea name="explanation" rows="6" cols="65" class="txtara form-control" ></textarea> <p class="count">100</p> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="gender" id="exampleRadios1" value="male" checked /> <label class="form-check-label" for="radio1"> male </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="gender" id="radio2" value="female" /> <label class="form-check-label" for="radio2"> female </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="1" name="fconfirm" id="confirm" /> <label class="form-check-label" for="confirm" ><p id="conf-label">check</p></label > </div> <div> <input type="submit" class="btn-check" id="btn" checked autocomplete="off" name="submit" disabled /> <label class="btn btn-primary" for="btn">Submit</label> </div> </form> <script> $(document).ready(function () { let maxLength = 100; let confirm_flag = false; let fname_value = ""; let lname_value = ""; let phone_value = ""; let gender_flag = true; $("textarea").keyup(function () { let charsEntered = $(this).val().length; $(".count").text(maxLength - charsEntered); if (maxLength - charsEntered < 0) { $(".count").css("color", "red"); } else { $(".count").css("color", "green"); } }); $("#fname").keyup(function () { fname_value = $(this).val(); returnCheckBoxLabel(fname_value, lname_value,phone_value); }); $("#lname").keyup(function () { lname_value = $(this).val(); returnCheckBoxLabel(fname_value, lname_value,phone_value); }); $("#phone").keyup(function () { phone_value = $(this).val(); returnCheckBoxLabel(fname_value, lname_value,phone_value); }); $("#radio2").click(function () { gender_flag = false; }); $("#radio1").click(function () { gender_flag = true; }); $("#confirm").click(function () { if (!confirm_flag) { $("#btn").removeAttr("disabled"); confirm_flag = true; console.log("click1"); } else { $("#btn").attr("disabled", ""); confirm_flag = false; console.log("click2"); } }); function returnCheckBoxLabel(fname_value, lname_value,phone_value) { if (fname_value!="") { $("#conf-label").html( "من مطمئنم که میخواهم آقا/خانوم " + fname_value+ " را در دفترچه وارد کنم" ) } else if (fname_value!=""&& lname_value!="") { $("#conf-label").html( "من مطمئنم که میخواهم آقا/خانوم " + fname_value + " " + lname_value + " را در دفترچه وارد کنم") } else if (fname_value!=""&& lname_value!=""&&phone_value!="") { $("#conf-label").html( "من مطمئنم که میخواهم آقا/خانوم " + fname_value + " " + lname_value + " با شماره تلفن " + phone_value + " را در دفترچه وارد کنم") } else{ $("#conf-label").html("لطفا اسمتون را وارد کنید") } } // $.ajax({ // type: "POST", // url: "index", // data: data, // success: success, // dataType: dataType, // }); }); </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous" ></script> </body> </html>
Editor is loading...