title: How to modify the position of a cursor after submitting a form in javascript?
body: <p>I've created a text input form in <code>html</code> that sends user input words via <code>POST</code> method to Django <code>views.py</code> file. Here is the code for this form</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form method=&quot;POST&quot; action=&quot;search&quot;&gt;
                          {% csrf_token %}
                          &lt;input  type=&quot;search&quot; name=&quot;search&quot; value=&quot;{{form.search.value}}&quot; placeholder=&quot;Search here...&quot;  autofocus x-webkit-speech/&gt;
                  &lt;/form&gt;  
  </code></pre>
  <p>The <code>value</code> attribute takes the value returned by <code>Django</code> after a submit. Here is the code of my Django <code>views.py</code> file:</p>
  <pre><code>from django.shortcuts import render 
  import requests 
  from bs4 import BeautifulSoup as bs
  
  
  from search.models import MyForm
  
  
  
  def index(request):
      return render(request, 'index.html')
  
  def search(request):
      if request.method == 'POST':
          search = request.POST['search']
          form = MyForm(request.POST)
          
          max_pages_to_scrap = 15
          final_result = []
          for page_num in range(1, max_pages_to_scrap+1):
              url = &quot;https://www.ask.com/web?q=&quot; + search + &quot;&amp;qo=pagination&amp;page=&quot; + str(page_num)
              res = requests.get(url)
              soup = bs(res.text, 'lxml')
              result_listings = soup.find_all('div', {'class': 'PartialSearchResults-item'})
  
              for result in result_listings:
                  result_title = result.find(class_='PartialSearchResults-item-title').text
                  result_url = result.find('a').get('href')
                  result_desc = result.find(class_='PartialSearchResults-item-abstract').text
             
                  final_result.append((result_title, result_url, result_desc))
  
          context = {'final_result': final_result, 'form':form}
          
  
          return render(request, 'index.html', context)
  
      else:
          return render(request, 'index.html')
  
  
  </code></pre>
  <p>When I submit the form, the value of the input field is well preserved but the cursor goes from the final position to the initial position. To solve this problem, I inserted a <code>javascript</code> script in my <code>index.html</code> file which contains my form:</p>
  <pre><code> 
      &lt;script&gt;
    
          /* Creating a function called PosEnd
           in JavaScript to place the cursor 
           at the end */
          function PosEnd(end) {
              var len = end.value.length;
                
              // Mostly for Web Browsers
              if (end.setSelectionRange) {
                  end.focus();
                  end.setSelectionRange(len, len);
              } else if (end.createTextRange) {
                  var t = end.createTextRange();
                  t.collapse(true);
                  t.moveEnd('character', len);
                  t.moveStart('character', len);
                  t.select();
              }
          }
      &lt;/script&gt;
  </code></pre>
  <p>and I modified the form like this:</p>
  <pre><code>&lt;input  type=&quot;search&quot; name=&quot;search&quot; value=&quot;{{form.search.value}}&quot; placeholder=&quot;Search here...&quot;  autofocus x-webkit-speech/&gt;
  </code></pre>
  <p>became:</p>
  <pre><code>&lt;input  type=&quot;search&quot; name=&quot;search&quot; PosEnd(value=&quot;{{form.search.value}}&quot;) placeholder=&quot;Search here...&quot;  autofocus x-webkit-speech/&gt;
  </code></pre>
  <p>but now when I submit the form the input values ​​are lost. I look forward to your responses, thank you.</p>