插入<input id="name">內在價值<img src=".....">

Question

如何將存儲在輸入框中的值插入到 img scr= 標簽中。 我找到這段代碼來創建條形碼

<div id="aggiungi" class="modal fade" role="dialog">
        <form method="post" class="form-horizontal" role="form" name="invio">
            <div class="modal-dialog modal-lg">
                <!-- Modal content-->
                <div class="modal-content">     
                    <div style='text-align: center;'>
                    <!-- insert your custom barcode setting your data in the GET parameter "data" -->
                       <img alt='Barcode Generator TEC-IT'src='https://barcode.tec-it.com/barcode.ashx?data=Nome%5Ct+Cognome%5Cn&code=&multiplebarcodes=false&translate-esc=true&unit=Fit&dpi=96&imagetype=Gif&rotation=0&color=%23000000&bgcolor=%23ffffff&codepage=Default&qunit=Mm&quiet=0&hidehrt=False'/>
                    </div>
                    <div style='padding-top:8px; text-align:center; font-size:15px; font-family: Source Sans Pro,   Arial, sans-serif;'>
                    <!-- back-linking to www.tec-it.com is required -->
                        <a href='https://www.tec-it.com' title='Barcode Software by TEC-IT' target='_blank'>
                        TEC-IT Barcode Generator<br/>
                            <!-- logos are optional -->
                            <img alt='TEC-IT Barcode Software' border='0' src='http://www.tec-it.com/pics/banner/web/TEC-IT_Logo_75x75.gif'>
                        </a>
                     </div>
                </div>
          </form>
 </div> 

我想更改 scr=... 內的 Nome 和 Cognome，使用插入到兩個輸入框中的值，如下所示：

<input type="text" class="form-control" id="name" name="name">
<input type="text" class="form-control" id="cognome" name="cognome">

最終我將這兩個變量也存儲在兩個 javascrip 變量（javascript 函數）中

編輯中的 PS：代碼在引導模式中

從圖像中可以看出，條形碼下方的 Nome & Cognome 必須采用輸入框中插入的值。 真的，我只是在所有輸入框都填滿時才嘗試顯示條形碼。 我已經將 Nome & Cognome 聲明為 javascript 變量（var nome = document.getElementById('nome').value; 和 cognome 相同）在另一個 javascript function 中，由這兩個輸入框上的 onkeyup 事件調用。 我的問題是如何在 img scr=...中更改它們 我嘗試插入為 <script>.... 或 <?php... 但沒有得到肯定的結果

Answer 1

基本上這是關於使用變量 arguments 修改部分 url 字符串（在您的情況下是其data參數）的問題，獲得預期的 url。可以解決使用URLSearchParams操作 url 參數的問題，如下所示：

 let url = new URL('https://barcode.tec-it.com/barcode.ashx?data=Nome%5Ct+Cognome'); let nome = "nameValue"; let cognome = "surnameValue"; const data = `${nome}\\t ${cognome}`; url.searchParams.set("data", data); //it prints https://barcode.tec-it.com/barcode.ashx?data=nameValue%5Ct+surnameValue console.log(url);

然后您可以將新的 url 存儲為 img 標簽的 src 屬性。