Inserting

Question

I have a webpage with an input box and a button. If a user inputs some values (12345) an object need to appear below or instead of that form (the input box and the button).

I am handling a value check through and my whole code looks like this:

<form name="form" action="" method="post">
  <input type="text" name="subject" id="subject" placeholder="UNESI KOD">
</form>

<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button>
<script>
  function proveriKljuc() {
    if (document.getElementById("subject").value == 12345) {
      document.write(
        "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>"
      );
    }
  }

</script>

Currently this code is showing a object in a new window (only a object on the page).

Also this is offtopic but if you can help, how can I handle if enter is pressed to activate function proveriKljuc()?

You can NEVER use document.write after page load. It will wipe the page. Instead have div or a span and fill the innerHTML of it or appendChild of a div created using document.createElement. return false onsubmit to stop submission or make the button `type="button"` - alternatively show a hidden div http://stackoverflow.com/questions/31587326/how-to-show-hidden-div-after-hitting-submit-button-in-form — mplungjan, Dec 10 '16 at 15:36

score 0 · Accepted Answer · answered Dec 10 '16 at 15:37

0

Don't use document.write. If you want to replace the current form:

<div id="wrapper">
<form name="form" action="" method="post">
  <input type="text" name="subject" id="subject" placeholder="UNESI KOD">
</form>
</div>

<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button>
<script>
function proveriKljuc()
{
if(document.getElementById("subject").value == 12345)
{
document.getElementById("wrapper").innerHTML = "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>";
}
}
</script>

If you want your object to appear under the form:

<div id="wrapper">
<form name="form" action="" method="post">
  <input type="text" name="subject" id="subject" placeholder="UNESI KOD">
</form>
</div>

<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button>
<script>
function proveriKljuc()
{
if(document.getElementById("subject").value == 12345)
{
document.getElementById("wrapper").innerHTML += "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>";
}
}
</script>

answered Dec 10 '16 at 15:37

Hydrothermal

4,851
7
26
45

1

and make button type="button" - to show example click the `<>` snippet editor – mplungjan Dec 10 '16 at 15:38
but that should not be a problem in this case as the button is outside of form. – Jai Dec 10 '16 at 15:39
@mplungjan [` – Hydrothermal Dec 10 '16 at 15:39
Thanks, i got it. Do you maby know how to fix problem with enter? – Pacijent Dec 10 '16 at 15:39
Some browsers will submit the page if not type=button if type=submit inside the form and return false on the submit, the second question is answered too – mplungjan Dec 10 '16 at 15:40
@Pacijent See my answer for the solution for both issues – mplungjan Dec 10 '16 at 15:52

score 0 · Answer 2 · edited May 23 '17 at 12:24

You can NEVER use document.write after page load. It will wipe the page. Instead have div or a span and fill the innerHTML of it or appendChild of a div created using document.createElement. return false onsubmit to stop submission or make the button type="button" - alternatively show a hidden div How to show hidden div after hitting submit button in form?

I cannot show a working example because stacksnippets do not support submit

window.onload = function() {
  document.getElementById("form").onsubmit = function() {
    if (this.elements["subject"].value == 12345) {
      document.getElementById("objContainer").innerHTML = "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>";
    }
    return false; // ignore submit
  }
}

<form id="form" action="" method="post">
  <input type="text" name="subject" id="subject" placeholder="UNESI KOD">
  <button type="submit" style="margin-top:20px">Potvrdi!</button>
</form>
<div id="objContainer"></div>

2 Answers2