0

I have the following html code:

<form>
      <input autofocus type="text" name="rnum" id="rnum" class="input-field" placeholder="Number of rows in a page">
</form>
<script type="text/javascript">
        document.getElementById('rnum')
        .addEventListener('keyup', function(event) {
               if (event.code === 'Enter') {
                  .append(window.location.search)
                  .toString();
                  event.preventDefault();
                  document.querySelector('form').submit();
               }
        });</script>

I have a search data in window.location that I want to add to the submitted value of the form. For instance, the url is:

http://127.0.0.1:5000/result?searchbox=cor

and the value of the form is rnum=10 that I want to combine and make:

http://127.0.0.1:5000/result?searchbox=cor&rnum=10

update 1: As @Yasir suggested, I replaced the code,

<form style="float: right;">
 <input autofocus type="text" name="rnum" id="rnum" class="input-field" placeholder="Number of rows in a page">
</form>
<script type="text/javascript">
     document.getElementById('rnum')
     .addEventListener('keyup', function(event) {
     if (event.code === 'Enter') {
         let child = document.createElement('input');
         child.name = "searchBox";
         child.value = window.location.search.toString();
         event.preventDefault();
         var form = document.querySelector('form');
             form.appendChild(child);
             form.submit()
      }
});</script>

But still the result is like: http://127.0.0.1:5000/result?rnum=10 for 10 in form.

Shrm
  • 426
  • 4
  • 8

2 Answers2

1

well, you can create an input node with the desired value within the form and then submit it.

<form>
      <input autofocus type="text" name="rnum" id="rnum" class="input-field" placeholder="Number of rows in a page">
</form>
<script type="text/javascript">
        document.getElementById('rnum')
        .addEventListener('keyup', function(event) {
               if (event.code === 'Enter') {
                  let child = document.createElement('input');
                  child.name = "searchBox";
                  child.value = window.location.search.toString();
                  event.preventDefault();
                  var form = document.querySelector('form');
                  form.appendChild(child);
                  form.submit()
               }
        });</script>

and if you are looking for updating the page url appending some value from form input

<script type="text/javascript">
        document.getElementById('rnum')
        .addEventListener('keyup', function(event) {
               event.preventDefault();
               if (event.code === 'Enter') {
                  let input = document.getElementById("rnum");
                  window.location.search += "&rnum=" +input.value;
               }
        });</script>
Yasir
  • 332
  • 2
  • 9
  • The same issue, when I write 10 in the form, I get `http://127.0.0.1:5000/result?rnum=10` as the result. – Shrm Aug 01 '22 at 20:48
  • re: @Yasir `and if you are looking for updating the page url appending some value from form input` yes exactly, but unfortunately the result is the same. – Shrm Aug 01 '22 at 22:02
  • hope you figured out a way around. try experimenting with 'window.location' attributes on console window of chrome or firefox. try 'location.replace()' – Yasir Aug 05 '22 at 10:36
0

I think you have a syntax error in this part

if (event.code === 'Enter') {
 .append(window.location.search) 
                  .toString();// this is an error since we are not appending the string anywhere
                  event.preventDefault();
                  document.querySelector('form').submit();
               }
Artan
  • 1
  • 2