Problem accessing a form within a script with Jquery and HTML

Question

I have problems accessing my form from the JS file, and I don't know how to access it. Here's my code:

$("#my-form").submit(function(e) {
  e.preventDefault();
  var textInput = $("#my-input").val();
  $("#container").html(textInput);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container-fluid"></div>
<script id="view-contact" type="text/html">
  <form id="my-form" class="form">
    <input id="my-input" type="text">
    <input type="submit">
  </form>
</script>

Why is there a <script> tag around your form? Remove it, then your code will work. — Rory McCrossan
– Rory McCrossan, Commented Feb 14, 2021 at 12:10
If you're using a <script> as some for of hack replacement for a <template> element (or even if you're using an actual template element) then there isn't going to be a submit button to trigger the submit event without some code to create an actual form in the document. Provide a minimal reproducible example — Quentin
– Quentin, Commented Feb 14, 2021 at 20:53

Aalexander · Accepted Answer · 2021-02-15 06:30:09Z

1

Don't put your html inside the <script> tag. Put your JavaScript / JQuery inside the script tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container-fluid"></div>
<form id="my-form" class="form">
  <input id="my-input" type="text">
  <input type="submit">
</form>
<script>
  $("#my-form").submit(function(e) {
    e.preventDefault();
    var textInput = $("#my-input").val();
    $("#container").html(textInput);
  });
</script>

edited Feb 15, 2021 at 6:30

answered Feb 14, 2021 at 12:12

Aalexander

4,9843 gold badges14 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

felixn123 Over a year ago

But can i access the form in any way when it is located in a script? I am trying to make a one-page website..

Aalexander Over a year ago

then don't put the form inside the script put your jquery / js code inside the script

Collectives™ on Stack Overflow

Problem accessing a form within a script with Jquery and HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related