CODEWITHSUNDEEP
javascripthtmljsp
Shrm
Shrm

Reputation: 453

How to add a value to submitted form using JS

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.

Upvotes: 0

Views: 56

Answers (2)

Yasir
Yasir

Reputation: 402

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>

Upvotes: 1

Artan
Artan

Reputation: 1

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();
               }

Upvotes: 0

Related Questions