CODEWITHSUNDEEP
javascripthtmlcss
Rudy Mj
Rudy Mj

Reputation: 9

Not pop up input field

I have 2 input fields that I want to display in the modal box after user clicks on submit button. Do I have to change the type for matrix to type="text" in javascript? If so, how can I do that?

<form><br>
<h1 style="text-align: center; color:red;">LOGIN</h1>
    <input type="text" name="name" placeholder="NAME" id="name"><br><br>
    <input type="password" name="matrixno" placeholder="MATRIX NO" id="matrix"><br><br><br>
<input id="myBtn" type="button" value="Submit" style="cursor:pointer; margin-right: 4.5cm; padding: 7px 16px;">
</form>

Jsfiddle

Upvotes: 0

Views: 65

Answers (3)

Asifuzzaman
Asifuzzaman

Reputation: 1783

hello check the below fiddle I hope you are looking for this. hope it helps

pop up input demo Fiddle

don't use .value for global variable in the first Place because when you submit it or call It in any event then the value get lost

To Skip this I will suggest

1.Initialize the variable var some = document.getElementById("someid");

2.call the variable along with its value anywhere var answer=some.value I am describing this below for more further knowledge.

#Working

var x = document.getElementById("name"); //global variable
var btn = document.getElementById("myBtn");

btn.onclick = function(e) {
e.preventDefault();
alert(x.value);
  }
<input type="text" name="name" placeholder="NAME" id="name">
<input id="myBtn" type="button" value="Submit" style="cursor:pointer; margin-right: 4.5cm; padding: 7px 16px;">

#Not Working

var x = document.getElementById("name").value;
var btn = document.getElementById("myBtn");

btn.onclick = function(e) {
 e.preventDefault();
 alert(x);
}
<input type="text" name="name" placeholder="NAME" id="name">
<input id="myBtn" type="button" value="Submit" style="cursor:pointer; margin-right: 4.5cm; padding: 7px 16px;">

Upvotes: 0

thekodester
thekodester

Reputation: 668

Just need to a small change here:

var x = document.getElementById("name"), y = document.getElementById("matrix");

btn.onclick = function() {
  document.getElementById("show").innerHTML = x.value;
  document.getElementById("show1").innerHTML = y.value;
  modal.style.display = "block";
}

Access the value of the inputs after clicking the button not on document ready/page load. Also on show1 style="colorw:white;" to style="color:white;"

Upvotes: 1

xerq
xerq

Reputation: 2792

You don't need to change the type, you can simply access it's value property. So:

var pass = document.getElementById("matrix").value;

Upvotes: 0

Related Questions