javascript - フォーム送信後に画像を読み込む

Question

次のページがありますここに画像の説明を入力

コード

<table border="0" cellspacing="1" cellpadding="1" id="echipajucator" title="Echipa Jucator">
    <tr>
        <th><div align="left"><span>Echipa</span></div></th>
    </tr>
</table>

<table cellspacing="2" cellpadding="1" id="echipa">
    <tr>
        <td>
            <select name="selectechipa" id="select" onclick="check_list()">
                <option value="AC Milan" id="milan">Milan</option>
                <option value="Juventus" id="juve">Juventus</option>
                <option value="Napoli" id="nap">Napoli</option>
                <option value="Bayern Munchen" id="bmun">B.Munchen</option>
                <option value="Real Madrid" id="realm">Real Madrid</option>
                <option value="Valencia" id="vale">Valencia</option>
                <option value="P.S.G" id="psg">PSG</option>
                <option value="Arsenal" id="ars">Arsenal</option>
                <option value="Man. Untd" id="manutd">Man. United</option>
                <option value="Chelsea" id="chls">Chelsea</option>
            </select>
        </td>
    </tr>
</table>

フォームを送信すると、このテーブルが表示されました

ここに画像の説明を入力

<form name="atrbjucator">
<table>
    <% 
        response.setContentType("text/html");
        String docType = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 " + "Transitional//EN\">\n";
        String title = "Parametrii Jucator";
    %>
    <% out.println(docType +
            "<html>\n" +
            "<head><title>"+title + "</title></head>\n"+
            "<body bgcolor=\"#FDF5E6\">\n" +
            "<h1 align=center>" + title + "</h1>\n" +
            "<table border=1 align=center>\n" +
            "<tr bgcolor=\"#FFAD00\">\n" +
            "<th>Nume Parametru<TH>Valoare Parametru"); 
        %>
    <%-- http://www.roseindia.net/tutorial/servlet/useBeanInServlet.html --%>
    <tr><td>Nume</td><td>${jucator.nume}</td></tr>
    <tr><td>Prenume</td><td>${jucator.prenume}</td></tr>
    <tr><td>Varsta</td><td>${jucator.varsta}</td></tr>
    <tr><td>Pozitie</td><td>${jucator.pozitie}</td></tr>
    <tr><td>Echipa</td><td>${jucator.selectechipa}</td></tr>
    <%

私がやりたいことは、提出されたテーブルで選択されたチームに従って、チーム名 (AC ミラン) の後に小さなアイコンを追加することです。

PS: Java、javascript、jsp、javabeans の基礎知識

テーブルを使用してjspページにjavascriptを作成しようとしました

function loadImages() {
            if (document.getElementById("select")) {        
                document.getElementById("milan").src = "/HTML-CODE/icons/milan.png";
                document.getElementById("juve").src = "/HTML-CODE/icons/juventus.png";
                document.getElementById("nap").src = "/HTML-CODE/icons/napoli.png";
                document.getElementById("bmun").src = "/HTML-CODE/icons/bayern.png";
                document.getElementById("realm").src = "/HTML-CODE/icons/madrid.png";
                document.getElementById("vale").src = "/HTML-CODE/icons/valencia.png";
                document.getElementById("psg").src = "/HTML-CODE/icons/psg.png";
                document.getElementById("ars").src = "/HTML-CODE/icons/arsenal.png";
                document.getElementById("manutd").src = "/HTML-CODE/icons/machester.png";
                document.getElementById("chls").src = "/HTML-CODE/icons/chelsea.png";       
            }
        }

body に onload="loadImages()" として関数を追加しましたが、画像がありません。

score 1 · Accepted Answer

jsp を使用せずに、JavaScript のみを使用してこれを行います。

<script>
function changeimage(choice){
document.getElementById('icon').src=choice + ".png";
}
</script>

<img src="" id="icon" width='52' height='50'>


<table cellspacing="2" cellpadding="1" id="echipa">
        <tr>
            <td>
                <select name="selectechipa" id="select" onchange="changeimage(this.value);">
                    <option value="AC Milan" id="milan">Milan</option>
                    <option value="Juventus" id="juve">Juventus</option>
                    <option value="Napoli" id="nap">Napoli</option>
                    <option value="Bayern Munchen" id="bmun">B.Munchen</option>
                    <option value="Real Madrid" id="realm">Real Madrid</option>
                    <option value="Valencia" id="vale">Valencia</option>
                    <option value="P.S.G" id="psg">PSG</option>
                    <option value="Arsenal" id="ars">Arsenal</option>
                    <option value="Man. Untd" id="manutd">Man. United</option>
                    <option value="Chelsea" id="chls">Chelsea</option>
                </select>
            </td>
        </tr>
    </table>

この JavaScript 関数を使用して画像を変更します。画像のオプション値として画像に名前を付けてください。私が使用している拡張子は .png です。.png に画像がない場合は、if-else条件を使用する必要がある場合があります。ユベントスの画像がpngである場合のように、残りはすべてjpgとして、

if (choice=="Juventus") image="Juventus.png";
else image= choice+".jpg";

あなたの関数は今持っているでしょう

document.getElementById('icon').src=image;

オプション値を as に変更してから"Juventus.png", "AC Milan.jpg",、エクステンションサーバー側を削除することをお勧めします。

score -1 · Accepted Answer

I've done it!

<script type="text/javascript">
        function loadImage() {
                if (document.getElementById("jucatorechipa").innerHTML == "AC Milan") {
                    icn.src="HTML-CODE/icons/AC Milan.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Arsenal") {
                    icn.src="HTML-CODE/icons/Arsenal.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Bayern Munchen") {
                    icn.src="HTML-CODE/icons/Bayern Munchen.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Chelsea") {
                    icn.src="HTML-CODE/icons/Chelsea.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Juventus") {
                    icn.src="HTML-CODE/icons/Juventus.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Man. Untd") {
                    icn.src="HTML-CODE/icons/Man. Untd.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Napoli") {
                    icn.src="HTML-CODE/icons/Napoli.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "PSG") {
                    icn.src="HTML-CODE/icons/PSG.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Real Madrid") {
                    icn.src="HTML-CODE/icons/Real Madrid.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Valencia") {
                    icn.src="HTML-CODE/icons/Valencia.png";
                }
        }
    </script>

Using this script here:

<tr><td>Echipa</td><td><span id="jucatorechipa">${jucator.selectechipa}</span> <img align="top" id="icn"/></td></tr>

javascript - フォーム送信後に画像を読み込む

2 に答える 2

Related

Reference