Change options depending on the URL

I'm doing a form with an input URL. I would like to know how do I if the URL is a Youtube video change the input values and the radio label text, if the Vimeo for example change the value and the label text and want to be your one more input radio.

<form method="post" id="form">
<label>URL: <input type="url" size="60px" name="url" ><br>
<div class="examplo">http://www.example.com/304005/name-video</div><br></label>
<b>Tamanho:</b>
<label><input type="radio" name="t" value="488" checked> 488 x 366px</label>
<label><input type="radio" name="t" value="400" > 400 x 300px</label>
<label><input type="radio" name="t" value="240" > 240 x 180px</label>
<label><input type="radio" name="t" value="180" > 180 x 135px</label>
<input type="submit" name="btn" id="buton" value="Submit" />
</form>

Answers 1

  • Just use String.prototype.startsWith e.g.

    <label>URL: <input id="foo" type="url" size="60px" name="url" ><br>
    

    With

    const input = document.getElementById('foo');
    const value = input.value;
    const isYouTube = value.startsWith('http://www.youtube'); // for youtube
    

Related Articles