Change variable containing url in Laravel blade

Question

So I have a page that has an iframe. In my database I have stored 3 different urls, which are url, url2 and url3. What happens is when I open the page, the iframe works this way:

<iframe src="{{$episode->url}}"></iframe>

Now I have 3 buttons below, which is basically url1 url2 url3. As seen by the code, url1 is opening by default. What I want is if select url2, the src of the iframe changes to:

<iframe src="{{$episode->url2}}"></iframe>

and if I chose url3, it changes to:

<iframe src="{{$episode->url3}}"></iframe>

without having to load another page with a different route. It should also be noted that url2 and url3 are optional, and would sometimes be empty, or lets say only url1 and url2 have url. Is this possible, or should I create a different page for each url to play on.
I am ready to use javascript, but it should be noted that I have 0 experience in it.
Edit:
Here is my complete blade view because it was asked for:

@extends('layouts.app')

@section('title', '{{$episode->name}}')

@section('content')

<header>
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
        <img class="d-block w-100" src="/storage/images/episodes/{{$episode->image}}" alt="First slide">
        </div>
    </div>
    </div>
</header>

<div class="row pb-5">
    <div class="col-md-9">
        <div class="card">
            <div class="card-body">
                <h1 class="card-title">
                    {{$episode->name}}
                </h1>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="{{$episode->url}}"></iframe>
                </div>
                <p class="pt-3">
                    <button class="btn btn-primary btn-sm">Server 1</button>
                    <button class="btn btn-primary btn-sm">Server 2</button>
                    <button class="btn btn-primary btn-sm">Server 3</button>
                </p>
                <p class="subtitle">
                    {{$episode->about}}
                </p>
            </div>
        </div>
    </div>
</div>

@endsection

@FouedMOUSSI sure, I have just added it to my question above — Sarmad Khalil
– Sarmad Khalil, Commented Feb 23, 2020 at 17:22

Foued MOUSSI · Accepted Answer · 2020-02-23 17:27:35Z

1

You may edit your HTML to be like

<div class="embed-responsive embed-responsive-16by9">
   <iframe id='myIframe' class="embed-responsive-item" src="{{$episode->url}}"></iframe>
</div>
<p class="pt-3">
   <button class="btn btn-primary btn-sm" onClick="newSite('{{$episode->url}}')">Server 1</button>
   <button class="btn btn-primary btn-sm" onClick="newSite('{{$episode->url2}}')">Server 2</button>
   <button class="btn btn-primary btn-sm" onClick="newSite('{{$episode->url3}}')">Server 3</button>
</p>

Then in your JS

<script type="text/javascript">

function newSite($url) {

    document.getElementById('myIframe').src = $url;
}    
</script>

answered Feb 23, 2020 at 17:27

Foued MOUSSI

4,8334 gold badges21 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

Change variable containing url in Laravel blade

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related