Как открыть ссылку в фрейме?

Question

[Chesterfield25]

Как открыть ссылку в фрейме при нажатие на кнопку?

Есть простая форма

<form class="row justify-content-center">
                    <div class="col-8">
                      <label for="inputPassword2" class="visually-hidden">URL</label>
                      <input type="text" class="form-control" id="inputUrl" placeholder="Url">
                    </div>
                    <div class="col-auto">
                      <button type="submit" class="btn btn-primary mb-3">Open</button>
                    </div>
                </form>

Как сделать так что бы когда я введу в поле нужную мне ссылку и нажимал на кнопку, эта ссылка открывалась в том же окне только в фрейме?

Comments

[Вадим]

Повесить обработчик на форму на событие сабмит, в котором:
1. Сделать превент дефолт.
2. Считать значение из инпута.
3. Создать фрэйм(если не создан) или заменить в имещемся фрейме атрибут ссылки на значение из инпута.
4. Отобразить фрэйм.

Что из этого Вы попробовали и что не получилось?

Answer 1

[Надим]

<form class="row justify-content-center">
	<div class="col-8">
		<label for="inputPassword2" class="visually-hidden">URL</label>
		<input type="text" class="form-control" id="inputUrl" placeholder="Url">
	</div>
	<div class="col-auto">
		<button type="submit" class="btn btn-primary mb-3">Open</button>
	</div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
	
	$(function() {
		
		$('form').submit(function() {
			
			event.preventDefault();
			
			$('body').html('<iframe src="'+$('#inputUrl').val()+'"></iframe>')
			
		});
		
	});
	
</script>

Comments

[Chesterfield25]

А можно сделать так что бы ссылка открывалась не во фрейме а в том же окне только в определенном контейнере?

<div class="container w-100 p-3">

        <div class="row justify-content-center">
            <div class="col-4">col-4</div>
            <div class="col-8">
                
                <form class="row justify-content-center">
                    <div class="col-8">
                      <label for="inputPassword2" class="visually-hidden">URL</label>
                      <input type="text" class="form-control" id="inputUrl" placeholder="Url">
                    </div>
                    <div class="col-auto">
                      <button type="submit" class="btn btn-primary mb-3">Open</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

А конкретно в контейнере <div class="col-8">

[Надим]

Chesterfield25,

<script>
  
  $(function() {
    
    $('form').submit(function() {
      
      event.preventDefault();
      
      $(this).parent().html('<iframe src="'+$('#inputUrl').val()+'"></iframe>');
      
    });
    
  });
  
</script>