Взяв javascript .val () и используя его в URL для iframe

Question

У меня есть следующий HTML-код на моем веб-сайте

<form id="storyPanel" method="POST" action="<?= BASE_URL ?>/news/update/process/" style="display: none;">
    <h5>Story options</h5>
    <input type="text" id="title">
    <input type="" id="id" >

    <button type="submit" name="submit" value="edit">Edit story title</button>
    <button type="submit" name="submit" value="delete">Delete story</button>
</form>
<iframe id = "storyPanel2" src="http://localhost/P4/edit/news/<?= $story->id ?>" style="display: none;"></iframe>

И у меня есть этот фрагмент JavaScript, который дает мне значение, которое находится на входе

 if (Number.isInteger(+d.sortBy)) {
    //editSoldierName(d.id, d.item_id);
    console.log('clicked a story');
    $('#storyPanel').fadeIn();
    $('#storyPanel2').fadeIn();

    $('#title').val(d.id);
    $('#id').val(d.sortBy);
}

Я все еще учуськак все это работает, но сейчас я знаю, что у ввода есть идентификатор истории, которую я пытаюсь просмотреть.

Я хочу иметь возможность сохранить ее значение в переменной, а затем добавить его в конецНапример, мой URL:

P4 / edit / news / 57

Сейчас у меня есть несколько использованных php, которые обычно получают идентификатор моей истории, но я знаю, что это неправильно, потому что я не могу создатьобъект истории за пределами iframe, а затем передать в id таким образом.Я хотел знать, есть ли способ передать «id» из javascript во что-то, что я могу добавить в конец URL.Извините, если это звучит глупо

Answer 1

Это то, к чему вы стремитесь?

const $input = $("#story-id"), $frame = $("#story-panel-2");

$input.change(e => {
  const value = $input.val();
  $frame.attr('src', `https://placehold.it/${innerWidth}x${value}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>ID: <input id="story-id"></label>
<iframe id="story-panel-2"></iframe>