Untitled

avatar
unknown
plain_text
3 years ago
6.4 kB
6
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...