Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

246
Vistas
Javascript getElementById from user input ( For passing RSS FeedUrl )

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">

to

<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!

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda