Javascript getElementById from user input ( For passing RSS FeedUrl )-CodePudding

I've been trying to create a simple form where you input a Feed Url and it will display the contents on the HTML page. I'm using "https://jquery-plugins.net/rss" as a testing template for the feedUrl, as it works as normal.

Here was the guide I used in order to put the FeedEk elements in place : https://jquery-plugins.net/FeedEk/FeedEk.html

Here is the code I've come up with so far:

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="FeedEk.min.js"></script>  
<form method="post" id="form">
    <span>Paste the feed url here:</span>
    <input type="text" id="rssUrl">
    <input type="submit" value="submit">
</form>

<div id="divRss">
    <script>
        var form = document.getElementById("form");
        var url = document.getElementById("rssUrl");
        form.onsubmit = function()
        {
            $('#divRss').FeedEk({
                FeedUrl : url,
                MaxCount : 16,
            });
        }
    </script>
</div>

I think the problem may lie in the submit, since it keeps reloading the page when I submit, I'm not sure though. How should I go about making a user submit work?

Edit: CBroe offered an alternative solution which ended up making the code work the way I intended it to.

Here's what I changed in the HTML :

<input type="submit" value="submit">

<input type="button" value="enter" id="enter">

and in the javascript

    <script>
        var form = document.getElementById("form");
        form.enter.onclick = function()
        {
            var url = document.getElementById("rssUrl").value;
            $('#divRss').FeedEk({
                FeedUrl : url,
                MaxCount : 16,
            });
        }
    </script>

The change ended up yielding exactly what I wanted!

I also believe that Rory's answer is a good one if you still want to have a submit button, while preventing the page from resetting itself, and thank you for mentioning that I've been using an outdated version of it, and giving us a more optimized solution to the problem!

I will now mark this problem as solved, thank you for the help everyone!

CodePudding user response：

The main issue in your code is that you need to stop the form from submitting the data. To do that add an argument to your event handler which accepts the event that's raised, and call preventDefault() on it to stop the submission.

Also note that as you're loading jQuery in order to implement the FeedEk library, you may as well keep the code consistent and use it to attach your event handlers and work with the DOM.

Then you need to retrieve the value property from the #rssUrl input field, not pass the entire Element object in the request. To do that in jQuery use the val() method.

Finally, note that jQuery 1.9.1 is very old, 8.5 years in fact, and should be updated. The latest version at time of this answer is 3.6.0.

With all that said, try this:

$('#form').on('submit', e => {
  e.preventDefault();
  var url = $("#rssUrl").val();
  $('#divRss').FeedEk({
    FeedUrl: url,
    MaxCount: 16,
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FeedEk/3.1.1/js/FeedEk.min.js" integrity="sha512-Uosz6p3yP153Q89RIlaNgC80VzYrhBieLERzmSoePYUMyFF1IAs weU4QtK9qLGs0kBpsrWeYCDAMVFK8Tuopw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/FeedEk/3.1.1/css/FeedEk.css" integrity="sha512-bjtPNxnJiFsQXL5I9OayKNOCrg3IDSclupjp4vaZzExR21PSqv3uCybarA1HMTHXVB8gVPX ANGYncVnsBUDOA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<form method="post" id="form">
  <span>Paste the feed url here:</span>
  <input type="text" id="rssUrl" value="http://feeds.bbci.co.uk/news/rss.xml" />
  <button type="submit">Submit</button>
</form>

<div id="divRss"></div>