how to find the value type entered in input box?-CodePudding

This is my code, I am creating input block on button click. I want to show the details entered in the input box i.e Name and workemail/work phone. And on button click(Show) I want to display it. currently I am creating the array of first name and last name and then displaying them. How can i do the same for work phone and work email. How can i distinguish whether user has entered email id or phone number. can anyone please help?

Something like this:

if user has enterd email id
then - Name: ABC DEF Email: "Email-id"
otherwise this -- Name: ABC DEF Phone: "phone-number"

let firstarr = [];
let lastarr = [];

function addpoc() {
  let el = '';
  el  = '<div class="contactIp"><div><div class="name"><label for="fname">First name:</label><br><input type="text" class="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" class="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="showMail(this)"><option disabled selected>Prefered contact method</option><option value="workmail">Work email </option><option value="workphone">Work Phone</option></select></div><div class="two" id="two" style="display: none;"><input class="mailvalue" type="email" name="workemail" placeholder="Work email"></div><div class="three" id="three" style="display: none;"><input class="mailvalue" type="email" name="workphone" placeholder="Work Phone"></div></div><br><br></div>'

  $('.addelement').append(el);
}

function contine() {
  for (var i = 0; i < $(".fname").length; i  ) {
    if ($(".fname:eq("   i   ")").val() != undefined) {
      firstarr.push($(".fname:eq("   i   ")").val())
    }
    if ($(".lname:eq("   i   ")").val() != undefined) {
      lastarr.push($(".lname:eq("   i   ")").val())
    }

    //--------how to find phone/mail?
  }
  for (let i = 0; i < firstarr.length; i  ) {
    document.getElementById("contact").innerHTML  = 'Name:'   firstarr[i]   " "   lastarr[i]   '<br>';

  }

}

function showMail(selecteop) {
  if (selecteop.value == "workmail") {
    $(selecteop).closest(".parent").find(".two").show();
    $(selecteop).closest(".parent").find(".three").hide();

  } else {
    $(selecteop).closest(".parent").find(".three").show();
    $(selecteop).closest(".parent").find(".two").hide();

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="addelement">
</div>
<div style="width:100%">
  <button style="width:100%" id="addbtn" onclick="addpoc()">Add another point of contact</button>
</div>
<div id="contact"></div>
<button class="inbtn" onclick="contine()">SHOW</button>

CodePudding user response：

Since you're using jQuery, you can detect the input selected by:

$('#one select :selected').index();

which gives you:

1, if email was selected

2, if phone was selected

So, first define your target:

const target = {
    1: {
        selector: '#two input',
        text: 'Email: ',
    },
    2: {
        selector: '#three input',
        text: 'Phone: ',
    }
};

// upon the `Show` call, run:

const selectedIndex = $('#one select :selected').index(); // to get index

const t =  target[selectedIndex]; // to specify the target selector and text

console.log(`${t.text} ${$(t.selector).val()}`); // see your selected output with desired text

P.S. Using target as object is just an idea to keep a code clean, you can also use ternary operator.

CodePudding user response：

Consider the following.

$(function() {

  function addpoc(target) {
    var poc = $("#contact-template").prop("content");
    if (target != undefined) {
      $(poc).appendTo(target);
    }
    return poc;
  }

  function getContactData() {
    var myData = [];
    var tempObj = {};
    $(".contactIp").each(function(i, el) {
      $("input, select", el).each(function(j, v) {
        tempObj[$(v).attr("name")] = $(v).val();
      });
      myData.push(tempObj);
    });
    return myData;
  }

  function makeContactCard(cData, target) {
    var card = $("<div>", {
      class: "card"
    });
    $("<p>", {
      class: "name"
    }).html("Name: "   cData.fname   " "   cData.lname).appendTo(card);
    $("<p>").html("Work "   (cData.cmethod == "workmail" ? "Mail" : "Phone")   ": "   cData[cData.cmethod]).appendTo(card);
    if (target != undefined) {
      card.appendTo(target);
    }
    return card;
  }

  function showContactCards(event) {
    var contacts = getContactData();
    $.each(contacts, function(i, contact) {
      makeContactCard(contact, "#contact");
    });
  }

  function showContactMethod(event) {
    var $self = $(event.target);
    var cnt = $self.closest(".contactIp");
    $(".two, .three", cnt).addClass("hidden");
    if ($self.val() == "workmail") {
      $(".two", cnt).removeClass("hidden").focus();
    } else if ($self.val() == "workphone") {
      $(".three", cnt).removeClass("hidden").focus();
    }
  }

  $("#addbtn").click(function() {
    addpoc(".addelement");
  });

  $(".addelement").on("change", "select.contact-method", showContactMethod);

  $(".inbtn").click(showContactCards);
});

.contactIp label {
  display: block;
}

.contactIp .hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template id="contact-template">
<div class="contactIp">
  <div class="name">
    <label for="fname">First name:</label>
    <input type="text" class="fname" name="fname" placeholder="Ricky">
  </div>
  <div class="name">
    <label for="lname">Last name:</label>
    <input type="text" class="lname" name="lname" placeholder="Ju">
  </div>
  <div class="one">
    <label for="cmethod">Prefered contact method</label>
    <select class="contact-method" name="cmethod">
      <option></option>
      <option value="workmail">Work email</option>
      <option value="workphone">Work Phone</option>
    </select>
  </div>
  <div class="two hidden">
    <label for="workemail">Work E-Mail:</label>
    <input class="mail" type="email" name="workmail" placeholder="Work email">
  </div>
  <div class="three hidden">
    <label for="workphone">Work Phone:</label>
    <input class="phone" type="tel" name="workphone" placeholder="415-555-1212" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
  </div>
</div>
</template>

<div class="addelement">
</div>
<div class="row">
  <button style="width:100%" id="addbtn">Add another point of contact</button>
</div>
<div id="contact"></div>
<button class="inbtn">SHOW</button>

You do not have to use HTML Template, yet it may be a good option for this use case. It just makes it a bit easier to see the HTML. Also you will want to avoid using IDs in any template as they must be Unique for each element. In this case, if you create two or more, they will the ID Attributed would no longer be unique.

It's is a better practice to make use of Styling to help show, hide, or define the look and feel. To do this, I used classes. This can be seen with the Contact Method selection. The user makes a selection, both are Hidden and only one is revealed based on the Users selection.

You might consider replacing the Select with a Radio Button. It's more commonly used when you have a small few unique selection options.

Once the details are filled in, you want to have a Get and Show type of function. I moved all the Event callbacks into jQuery as a best practice.