Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

243
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda