how to make an input field add text after submission

Question

I was wondering if it is possible to have an input field that has a bit of text added to it after the user enters the information they want. EX. a user types youtube.com into a search bar, and the input applies https://www.

You can do it in the form's submit event listener.

Barmar
– Barmar

2019-09-06 23:13:22 +00:00
Commented Sep 6, 2019 at 23:13 — Barmar
– Barmar, Commented Sep 6, 2019 at 23:13

Reza Saadati · Accepted Answer · 2019-09-06 23:52:14Z

1

You could use an event listener that will change the value of the input field.

Use RegEx to find out if the string (https://www.) has been set before (for instance by copying and pasting the URL).

Here is an example:

document.getElementById('url').addEventListener('keyup', (e) => {
  if (!/^(https:\/\/www.)/.test(e.target.value) && e.target.value) {
    e.target.value = `https://www.${e.target.value}`;
  }
});

<input type="text" id="url">

edited Sep 6, 2019 at 23:52

answered Sep 6, 2019 at 23:41

Reza Saadati

5,4644 gold badges33 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zcionn · Accepted Answer · 2019-09-06 23:12:33Z

0

use blur event you can run a function after a user leaves the input field

see https://www.w3schools.com/jsref/event_onblur.asp

answered Sep 6, 2019 at 23:12

zcionn

716 bronze badges

Comments

shubham jha · Accepted Answer · 2019-09-06 23:35:08Z

You need to manipulate the user input for that use javascript. If user presses submit button then don't submit input immediately use event.preventDefault() to stop default action and then change user input if needed after that manually submit it using AJAX.

function manuallySubmit(event){
   event.preventDefault();
   // manipulate  input here
   var input = document.getElementById("input").value;
   input = "changed value " + input;
   console.log(input);
   
   /* AJAX POST request
   
   let xhr = new XMLHttpRequest();
    xhr.open('POST','location',true);
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=UTF-8');
    data = 'input='+(input);
    xhr.send(data);
    
    */
   // window.location.href="newlocation" if you want to redirect
}

<form onsubmit="manuallySubmit(event)" action='#' method="POST">
  <input type="text" name="input" id="input" /><br/>
  <input type="submit">
</form>

Collectives™ on Stack Overflow

how to make an input field add text after submission

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related