Javascript初心者｜jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい

下記のようなフォームからinput id="email" とinput id="agreement" の入力値を取得し、取得した値を連結させて出力したいのですが、連結部分の記述をどのように書けばよいのかわからないため、教えてください。


参考ソース

▼HTML
<form>
<input id="email" type="email" name="email" placeholder="例）[e-mail]">
<input id="agreement" type="checkbox" name="privacy" value="プライバシーポリシーに同意">
<div id="placeholder"></div>
<button id="btn" type="button" class="submit">申し込む</button>
</form>

▼JavaScript
function hoge(){
const src =
'https://hogehoge.com?test=' +
$('#email').val();
$('#agreement').val();
console.log('src', src);
$(placeholderSelector).empty();
iframe=$('<iframe>').with(1).height(1).attr('src', src);
$(placeholderSelector).append(iframe);
}

あとconsole.log('src', src);　のなかの　src　はURLを出力するメソッドという理解で正しいのでしょうか。


最終的にこのように出力させたいです。
<div id="placeholder">
<iframe src="https://hogehoge.com?test=[e-mail]&priva … style="wi
1px"; height="1px";></iframe>
</div>

No.2 回答者： fujillin 回答日時： 2022/06/02 14:36

こんにちは

なんだかかなりの独自仕様のようですが、通常のクエリ文字列の仕様に合わせるようにしておけば、jQueryのserialize()がそのまま利用できると思います。
https://api.jquery.com/serialize/

そうすることで、
　baseUri + $('form').serialize()
で済んじゃいますけれど・・

No.1 回答者： Ogre7077 回答日時： 2022/06/02 13:29

var b = encodeURIComponent( $('textのinput').val() );

var c = $('checkboxのinput').prop('checked');
var src = `aaa?bbb=${b}&ccc=${c}`;