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

Html – How to input variable in a text field?

I have this if condition where if you’re input "[first_name]" in the text field the result will be "John". But if you’re input "Hello [first_name]" the result will be "Hello [first_name]".

Here’s the code, i know if you’re input only "[first_name]" in text field it works. But how do i fix this if i write whatever in the text field the result would be what i write and the variable "[first_name]" would be "John". Thank you.

<p> Input [first_name] for variable </p>

<input id="myInput" type="text">

<button onclick="myFunction()">Enter</button>

<p id="result"></p>

function myFunction(){
    var input = document.getElementById("myInput").value;
    var myVar = "[first_name]"
    
    if (input == myVar){
        var data = document.getElementById('result').value= "John"
        document.getElementById("result").innerHTML = data;
    }
    else{
        document.getElementById("result").innerHTML = input
    }
}

What Did I Tried
Input field:
Hello [first_name] Result:
Hello [first_name]

What I’m Expecting
Input field:
Hello [first_name] Result:
Hello John

or whatever i write in the text field with variable "[first_name]" would be "John" and another text that i write.

Tags:

3

Answers


  1. 0

    You need to modify your JavaScript code slightly. Instead of comparing the entire input string with "[first_name]", you should check if "[first_name]" is present in the input string using the indexOf() method. Here’s the modified code:

    function myFunction(){
    var input = document.getElementById("myInput").value;
    var myVar = "[first_name]";
    
    if (input.indexOf(myVar) !== -1){
        var data = input.replace(myVar, "John");
        document.getElementById("result").innerHTML = data;
    }
    else{
        document.getElementById("result").innerHTML = input;
    }
}
    <p>Input [first_name] for variable</p>

<input id="myInput" type="text">

<button onclick="myFunction()">Enter</button>

<p id="result"></p>
    Login or Signup to reply.
  2. 0

    I think you want something like this

    function myFunction() {
  var input = document.getElementById("myInput").value;
  var myVar = "[first_name]";
  if (input == myVar) {
    var data = (document.getElementById("result").value = "John");
    document.getElementById("result").innerHTML = data;
  } else {
    document.getElementById("result").innerHTML = input.replace(
      myVar,
      "John"
    );
  }
}
    <p>Input [first_name] for variable</p>
<input id="myInput" type="text" />
<button onclick="myFunction()">Enter</button>
<p id="result"></p>

    I hope this helps

    Login or Signup to reply.
  3. 0

    Input [first_name] for variable

    <input id="myInput" type="text"> 
<button onclick="myFunction()">Enter</button> 
<p id="result"></p>

    function myFunction() {
  var input = document.getElementById("myInput").value;
  var myVar = "[first_name]";
  var result = input.replace(myVar, "John");
  document.getElementById("result").innerHTML = result;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search