JavaScript

JavaScript フォームボタン別の遷移

| by 優

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>概算御見積フォーム</title>

<style>
table.type09 {
        border-collapse: collapse;
        text-align: left;
        line-height: 1.5;

}
table.type09 thead th {
        padding: 10px;
        font-weight: bold;
        vertical-align: top;
        color: #369;
        border-bottom: 3px solid #036;
}
table.type09 tbody th {
        width: 150px;
        padding: 10px;
        font-weight: bold;
        vertical-align: top;
        border-bottom: 1px solid #ccc;
        background: #f3f6f7;
}
table.type09 td {
        width: 350px;
        padding: 10px;
        vertical-align: top;
        border-bottom: 1px solid #ccc;
}


button#submit_button {
    padding: 15px 40px;
    font-size: 1.2em;
    // 背景色を黒に指定
    background-color: #000;
    // 文字色を白に指定
    color: #fff;
    // submitボタンのを枠を非表示にする
    border-style: none;
}

#wrapper {
        width: 1000px;
        margin: auto;
}

</style>

<div onscroll="display_account()">
<script type="text/javascript">
<!--

function keisan(){

        // 計算開始
        var tax = 5; // 消費税率

        var price1 = parseInt(document.form1.goods1.value) * document.form1.volume1 .selectedIndex; // 数量×単価
        var price2 = parseInt(document.form1.goods2.value) * document.form1.volume2 .selectedIndex;
        var price3 = parseInt(document.form1.goods3.value) * document.form1.volume3 .selectedIndex;

        var total1 = parseInt(price1) + parseInt(price2) + parseInt(price3); // 合計を計算
        var tax2   = Math.round( (total1 * tax)/100 );                       //消費税を計算

        // フォームのテキストエリアに表示する金額
        document.form1.field_total1.value = total1;        // 合計を表示
        document.form1.field_tax.value    = tax2;          // 消費税を表示
        document.form1.field_total2.value = total1 + tax2; // 税込合計を表示

        //右の窓に表示する金額
        //document.getElementById("display_account_amount").innerHTML = total1;
        //document.getElementById("display_account_tax").innerHTML    = tax2;
        //document.getElementById("display_account_all").innerHTML    = total1 + tax2;
}

//3桁カンマ区切り
function addFigure(str) {
　var num = new String(str).replace(/,/g, "");

　while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
　return num;
}




// フォーム submitボタンの遷移先の指定
function goMail(){
        document.getElementById('form1').action = 'est_mail.php';
        document.getElementById('form1').target = '';
}

function goPdf(){
        document.getElementById('form1').action = 'est_done.php';
        document.getElementById('form1').target = '_blank';
}


</script>



</head>
<body>
<div id="wrapper">

        <h1>概算御見積りシステム デモ</h1>
        <p>これは動作確認用のデモです。</p>
        <p>下記項目を選択すると自動計算します。</p>
        <form name="form1" action="" id="form1" method="post">
        <table class="type09">
        <tr>
        <td>お客様名(必須)</td>
        <td><input type="text" name="customer_name"></td>
        <td></td>
        </tr>
        <tr>
        <td>会社名</td>
        <td><input type="text" name="company_name"></td>
        <td></td>
        </tr>
        <tr>
        <td>Email(必須)</td>
        <td><input type="text" name="email"></td>
        <td></td>
        </tr>
        <tr>
        <td>電話番号</td>
        <td><input type="text" name="tel"></td>
        <td></td>
        </tr>
        <tr>
        <td>住所</td>
        <td><input type="text" name="address"></td>
        <td></td>
        </tr>
        </table>

        <hr/>
        &nbsp;
        &nbsp;
        <table class="type09">
        <tr>
        <td>ジャンル</td>
        <td>商品選択</td>
        <td>数量</td>
        </tr>
        <tr>
        <td>小物</td>
        <td><select name="goods1" onChange="keisan()">
                <option value="0" selected="selected">選択してください</option>
                <option value="1000">USBメモリ（3個入り）1,000円</option>
                <option value="450">ペンドライブ 450円</option>
                <option value="35900">貯金箱　35900円</option>
                </select></td>
                <td><select name="volume1" onChange="keisan()">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
        </select></td>
        </tr>
        <tr>
        <td>通貨</td>
        <td><select name="goods2" onChange="keisan()">
                <option value="0" selected="selected">選択してください</option>
                <option value="500">ドル（100g）500円</option>
                <option value="400">ジンバブエドル 400円</option>
                <option value="300">BC 300円</option>
        </select></td>
        <td><select name="volume2" onChange="keisan()">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
        </select></td>
        </tr>
        <tr>
        <td>貴金属</td>
        <td><select name="goods3" onChange="keisan()">
                <option value="0" selected="selected">選択してください</option>
                <option value="110">プラチナ　110円</option>
                <option value="120">金貨　120円</option>
                <option value="130">銀貨　130円</option>
        </select></td>
        <td><select name="volume3" onChange="keisan()">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
        </select></td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        </tr>
        <tr>
        <td>合計</td>
        <td><input type="text" name="field_total1" size="8" value="0">
        円</td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <td>消費税</td>
        <td><input type="text" name="field_tax" size="8" value="0">
        円</td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <td>税込合計</td>
        <td><input type="text" name="field_total2" size="8" value="0">
        円</td>
        <td>&nbsp;</td>
        </tr>
        </table>





        <div id="display_account" > 見積金額<br />
        合計：<span id="display_account_amount">0</span> 円<br />
        消費税：<span id="display_account_tax">0</span> 円<br />
        税込合計：<span id="display_account_all">0</span> 円<br />
        </div>

        <hr/>
        &nbsp;
        &nbsp;
        <div align="center">
                <button id="submit_button" type="submit" name="submit" onClick="goPdf()">お見積書PDFダウンロード</button>　
                <button id="submit_button" type="submit" name="submit" onClick="goMail()">見積依頼送信</button>
        </div>
        </form>

</div><!--#wrapper-->
</body>

 

 

 

 

 

 

 

関連記事 - More from my site -

Amazonおすすめ

iPad 9世代 2021年最新作

iPad 9世代出たから買い替え。安いぞ！🐱 初めてならiPad。Kindleを外で見るならiPad mini。ほとんどの人には通常のiPadをおすすめします＞＜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）