Question 42481 in Html Question posted in
Some basic documentation can be found here.

Trying to get changes made for two fields – Html

So, I have two input fields, and I’m trying to store values into a string. The problem is that I’m not sure how to store the variable in the first input. For instance, if the user only inputs the value for p1, it should be "Partner IN (" + document.getElementById("p1").value + ")" but if the user enters both values for p1 and p2 it should be Partner IN (" + document.getElementById("p1").value + "," + document.getElementById("p2").value + ")". I want to make sure, that the variable ep has the updated values (i.e. if user decides to change values multiple times)

https://jsfiddle.net/Charan98/ynbh142x/

let ep;
document.getElementById("p1").addEventListener("blur", () => {
  document.getElementById("p2").addEventListener("blur", () => {
    if (document.getElementById("p2").value.length == 0) {
      ep = "Partner IN (" + document.getElementById("p1").value + ")";
    } else {
      ep = "Partner IN (" + document.getElementById("p1").value + "," + document.getElementById("p2").value + ")";
    }

  });
  ep = "Partner IN (" + document.getElementById("p1").value + ")";

  console.log(ep)
});
<div>
  <input id="p1" type="text" value="" />
  <br>
  <br>
  <input id="p2" type="text" value="" />

</div>
Tags:

5

Answers


  1. 0

    I would listen to both and create a funciton getContent which is in charge of creating the content formatted

    const getContent = (v1,v2) => "Partner IN (" + v1 + (v2 && v1 ? "," : "") + v2 + ")";

document.getElementById("p1").addEventListener('blur', () => {
    console.log(getContent(document.getElementById("p1").value, document.getElementById("p2").value))
});
document.getElementById("p2").addEventListener('blur', () => {
    console.log(getContent(document.getElementById("p1").value, document.getElementById("p2").value))
});

    Here is an example in this fiddle:https://jsfiddle.net/o1cwb6th/

    Login or Signup to reply.
  2. 0

    This is a great example of where arrays and their methods can work nicely. Post the values to the array individually, then join them into a comma-delimited string.

        const partnerValues = [];
    if (document.getElementById("p1").value.trim() != "") {
      partnerValues.push(document.getElementById("p1").value.trim());
    }
    if (document.getElementById("p2").value.trim() != "") {
      partnerValues.push(document.getElementById("p2").value.trim());
    }

    ep = `Partner IN (${partnerValues.join(",")})`;
    Login or Signup to reply.
  3. 0 
    let ep = "";
function inputConcat(){
  document.getElementById("p1").addEventListener("blur",()=>{
    let showContain =  document.getElementById("show")
    let p1 = document.getElementById("p1").value;
    let p2 = document.getElementById("p2").value;
    ep = `Partner IN ${p1}`+" "+`${p2}`;
  });
  document.getElementById("p2").addEventListener("blur",()=>{
    let showContain =  document.getElementById("show")
    let p1 = document.getElementById("p1").value;
    let p2 = document.getElementById("p2").value;
    ep = `Partner IN ${p1}`+" "+`${p2}`;
  });
}

inputConcat();

document.getElementById("showbtn").addEventListener('click',()=>{
  document.getElementById("show").innerText = ep;
});
    <div>
  <input id="p1" type="text" />
  <br>
  <br>
  <input id="p2" type="text" />
  <button id='showbtn'>show</button>
  <div id="show"></div>
</div>
    Login or Signup to reply.
  4. 0

    I assume you want to have #p2‘s listener active only after #p1 received a blur event. But your current code is adding a new listener to #p2 whenever #p1 receives a blur event.

    Instead, you could have the listener always attached, but return early in case #p1 contains no value:

    let ep;
document.getElementById("p1").addEventListener("blur", () => {
  ep = "Partner IN (" + document.getElementById("p1").value + ")";
  console.log(ep);
});
document.getElementById("p2").addEventListener("blur", () => {
  if (document.getElementById("p1").value.length == 0) return;

  if (document.getElementById("p2").value.length == 0) {
    ep = "Partner IN (" + document.getElementById("p1").value + ")";
  } else {
    ep = "Partner IN (" + document.getElementById("p1").value + "," + document.getElementById("p2").value + ")";
  }
  console.log(ep);
});
    <input id="p1"><br>
<input id="p2">

    You could also attach the same listener to both elements. That listener could then evaluate what and how many values to add dynamically. (See mykaf’s answer.)

    If you don’t want to add the same listener twice, you could also make use of event delegation: Add the listener to a common ancestor. Example:

    let ep;
document.getElementById("p1").addEventListener("blur", () => {
  ep = "Partner IN (" + document.getElementById("p1").value + ")";
  console.log(ep);
});
document.getElementById("p2").addEventListener("blur", () => {
  if (document.getElementById("p1").value.length == 0) return;

  if (document.getElementById("p2").value.length == 0) {
    ep = "Partner IN (" + document.getElementById("p1").value + ")";
  } else {
    ep = "Partner IN (" + document.getElementById("p1").value + "," + document.getElementById("p2").value + ")";
  }
  console.log(ep);
});
    <input id="p1"><br>
<input id="p2">
    Login or Signup to reply.
  5. 0

    Edit : I didn’t know that the answer was marked as solved, sorry…
    Anyway…

    I saw your comment :

    code it doesnt work if i have i have value for both p1 and p2 and i
    end up changing the value for p1, i dont get updated value for p1 and
    p2

    So there’s an idea to avoid this but I use keyupevent.

        window.addEventListener("DOMContentLoaded",run);
    var partnerValues0,partnerValues1;
    var p1, p2;
    function run(e){
        ep = document.getElementById("ep"); 
        p1 = document.getElementById("p1");
        p2 = document.getElementById("p2");
        p1.addEventListener("keyup",fillForm);
        p2.addEventListener("keyup",fillForm);
    }
    function fillForm(e){
        if (document.getElementById("p1").value.trim() == ""){
            ep.textContent = "field 1 is required";
        }else{
            partnerValues0 = "";
            partnerValues0 = document.getElementById("p1").value.trim();
            partnerValues1 = "";
            partnerValues1 = document.getElementById("p2").value.trim();
                if (document.getElementById("p1").value.trim() != ""){
                    ep.textContent = `Partner IN (${partnerValues0})`;
                }
                if (document.getElementById("p2").value.trim() != ""){
                    ep.textContent = `Partner IN (${partnerValues0}, ${partnerValues1})`;
                }
            }
        
    }
    <div>
  <input id="p1" type="text" value="" />
  <br>
  <br>
  <input id="p2" type="text" value="" />
</div>
<div>
    <p id="ep">field 1 is required</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search