Question 311812 in Html Question posted in
Some basic documentation can be found here.

Html – Load concatenate link from form

I am having difficulty concatenating input from a field into a link which is loaded when the user clicks submit. My current code for the form looks like this:

<form id="your_form">
  <input type="text" name="FPCAbundanceGroup" id="keywords" 
  onclick="location.href='https://meet.jit.si/FPCAbundanceGroup' + document.getElementById("keywords").value;">
  <p></p>
  <input type="submit" value="Join Group" >
</form>

the intention is to load the generated link into the current window. This method works when I am not attempting to concatenate but fails when I do. Thanks in advance for taking a look.

Tags:

2

Answers


  1. 0

    It’s a syntax error. You’re prematurely closing the onclick function by using quotation mark " with getElementById. Only use " to start and end the function, use ' for any other strings inside the function

    It might also be good to escape the // in the link string:

    <input type="text" name="FPCAbundanceGroup" id="keywords" 
onclick="location.href='https://meet.jit.si/FPCAbundanceGroup' + document.getElementById('keywords').value;>"
    Login or Signup to reply.
  2. 0

    The form can do the get request without you having to change the location. Here I change the action attribute on the form each time the user writes something in the form field. The form will just do a get request to the url. Notice the form attribute on the input element has the value "none" (just a random value that does not refer to a form), so the value of the input element in not in the query string of the request.

    document.forms.form01.addEventListener('input', e => {
  document.forms.form01.action = `https://meet.jit.si/FPCAbundanceGroup${e.target.value}`;
});
    <form name="form01" action="https://meet.jit.si/FPCAbundanceGroup" method="GET">
  <input type="text" name="fpcabundancegroup" form="none">
  <input type="submit" value="Join Group">
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search