通过选择选项的两个动态表单(datepicker)

时间:2014-11-12 17:10:07

标签: javascript jquery html forms datepicker

我想在main_form(帖子底部的小提琴)中选择form_two和for_three。主窗体下应该是两种形式之一(form_two / form_three)。我可以在两种表单之间进行选择,但它们不可编辑,因为如果我使用浏览器检查代码,它们不在源代码中。

我想在其中添加一个来自jquery的日期选择器,以提交日期。但是我遇到了问题,我可以在浏览器中看到两个(form_two / form_three)不同的表单,但是如果我查看源代码,那么dom中就没有表单了。

这是我的代码:

选择其中一种表格(main_form)的表格

    <!-- Content begin -->
<div id="content">
    <form method="post" onsubmit="return false">
        <fieldset name="inseration_option">
            <legend>Inseratauswahl</legend>
            <label for="choice">Auswahl:</label>
            <select name="choice" id="choice" size="1">
                <option value="joboffers" selected="selected">Jobangebot aufgeben</option>
                <option value="workeroffers">Job finden</option>
            </select>
            <button value="ok" id="choice_btn" name="choice_btn" >Los</button>
        </fieldset>
    </form>
</div>
<div id="form"></div>
<!-- Content end -->

form_two

<!-- Content begin -->
<div id="content">
    <form action="index.php?site=suche_inserat" method="post">
        <fieldset name="search_option">
            <legend>Suche Inserate</legend>
            <fieldset>
                <legend>Jobinformationen</legend>
                <label for="j_select">Jobart:</label><br>
                <select name="j_select" size="1">
                    <option>Gelegenheitsjob</option>
                    <option>Ausbildungsplatz</option>
                    <option>Praktika</option>
                    <option>Fachkräfte</option>
                </select><br>
                <label for="j_cat">Berufsfeld:</label><br>
                <select name="j_cat" size="1">
                    <option>Bau, Architektur, Vermessung</option>
                    <option>Dienstleistung</option>
                    <option>Elektro</option>
                    <option>Gesellschaft-, Geisteswissenschaften</option>
                    <option>Gesundheit</option>
                    <option>IT, Computer</option>
                    <option>Kunst, Kultur, Gestaltung</option>
                    <option>Landwirtschaft, Natur, Umwelt</option>
                    <option>Medien</option>
                    <option>Metall, Maschinenbau</option>
                    <option>Naturwissenschaften</option>
                    <option>Produktion, Fertigung</option>
                    <option>Soziales, Pädagogik</option>
                    <option>Technik, Technologiefelder</option>
                    <option>Verkehr, Logistik</option>
                    <option>Wirtschaft, Verwaltung</option>
                </select><br>
                <label for="j_destrict">Stadtteil:</label><br>
                <select name="j_destrict" size="1">
                    <option>Charlottenburg</option>
                    <option>Friedrichshain</option>
                    <option>Hellersdorf</option>
                    <option>Köpenick</option>
                    <option>Kreuzberg</option>
                    <option>Lichtenberg</option>
                    <option>Marzahn</option>
                    <option>Mitte</option>
                    <option>Neuköln</option>
                    <option>Pankow</option>
                    <option>Reinickendorf</option>
                    <option>Schöneberg</option>
                    <option>Spandau</option>
                    <option>Steglitz</option>
                    <option>Tempelhof</option>
                    <option>Treptow</option>
                    <option>Zehlendorf</option>
                </select><br>
                <label for="j_date">Gesucht ab Datum:</label><br>
                <input type="date" name="j_date"><br>
                <label for="j_cash">Vergütung:</label><br>
                <input type="text" name="j_cash"><br>
                <label for="j_title">Titel:</label><br>
                <input type="text" name="j_title"><br>
                <label for="j_desc">Beschreibung:</label><br>
                <textarea name="j_desc"></textarea>
            </fieldset>
            <fieldset>
                <legend>Auftraggeberinformationen</legend>
                <label for="j_company">Unternehmen/Firma:</label><br>
                <input type="text" name="j_company"><br>
                <label for="j_street">Straße/Nr.:</label><br>
                <input type="text" name="j_street"><br>
                <label for="j_plz">PLZ:</label><br>
                <input type="text" name="j_plz"><br>
                <label for="j_town">Ort:</label><br>
                <input type="text" name="j_town"><br>
                <label for="j_pic">Foto/Logo:</label><br>
                <input type="file" name="j_pic">
            </fieldset>
            <fieldset>
                <legend>Kontaktinformationen</legend>
                <label for="j_email">E-Mail-Adresse:</label><br>
                <input type="text" name="j_email"><br>
                <label for="j_phone">Telefonnummer:</label><br>
                <input type="text" name="j_phone"><br>
                <label for="j_fax">Fax:</label><br>
                <input type="text" name="j_fax">
            </fieldset>
        <button name="search_btn">Inserieren</button>
        </fieldset>
    </form>
</div>
<!-- Content end -->

form_three

<!-- Content begin -->
<div id="content">
    <form action="index.php?site=finde_inserat" method="post">
        </fieldset>
        <fieldset name="find_option">
            <legend>Finde Inserat</legend>
            <fieldset>
                <legend>Jobinformationen</legend>
                <label for="w_select">Jobart:</label><br>
                <select name="w_select" size="1">
                    <option>Gelegenheitsjob</option >
                    <option>Ausbildungsplatz</option>
                    <option>Praktika</option>
                    <option>Fachkräfte</option>
                </select><br>
                <label for="w_cat">Berufsfeld:</label><br>
                <select name="w_cat" size="1">
                    <option>Bau, Architektur, Vermessung</option>
                    <option>Dienstleistung</option>
                    <option>Elektro</option>
                    <option>Gesellschaft-, Geisteswissenschaften</option>
                    <option>Gesundheit</option>
                    <option>IT, Computer</option>
                    <option>Kunst, Kultur, Gestaltung</option>
                    <option>Landwirtschaft, Natur, Umwelt</option>
                    <option>Medien</option>
                    <option>Metall, Maschinenbau</option>
                    <option>Naturwissenschaften</option>
                    <option>Produktion, Fertigung</option>
                    <option>Soziales, Pädagogik</option>
                    <option>Technik, Technologiefelder</option>
                    <option>Verkehr, Logistik</option>
                    <option>Wirtschaft, Verwaltung</option>
                </select><br>
                <label for="w_destrict">Stadtteil:</label><br>
                <select name="w_destrict" size="1">
                    <option>Charlottenburg</option>
                    <option>Friedrichshain</option>
                    <option>Hellersdorf</option>
                    <option>Köpenick</option>
                    <option>Kreuzberg</option>
                    <option>Lichtenberg</option>
                    <option>Marzahn</option>
                    <option>Mitte</option>
                    <option>Neuköln</option>
                    <option>Pankow</option>
                    <option>Reinickendorf</option>
                    <option>Schöneberg</option>
                    <option>Spandau</option>
                    <option>Steglitz</option>
                    <option>Tempelhof</option>
                    <option>Treptow</option>
                    <option>Zehlendorf</option>
                </select><br>
                <label for="w_date">Verfügbar ab Datum:</label><br>
                <input type="text" name="w_date" id="w_date"><br>
                <label for="w_cash">Vergütung:</label><br>
                <input type="text" name="w_cash"><br>
                <label for="w_title">Titel:</label><br>
                <input type="text" name="w_title"><br>
                <label for="w_desc">Beschreibung:</label><br>
                <textarea name="w_desc"></textarea><br>
                <label for="w_pic">Profilbild/Foto:</label><br>
                <input type="file" name="w_pic">
            </fieldset>
            <fieldset>
                <legend>Kontaktinformationen</legend>
                <label for="w_email">E-Mail-Adresse:</label><br>
                <input type="text" name="w_email"><br>
                <label for="w_phone">Telefonnummer:</label><br>
                <input type="text" name="w_phone"><br>
                <label for="w_fax">Fax:</label><br>
                <input type="text" name="w_fax">
            </fieldset>
        <button name="find_btn">Inserieren</button>
        </fieldset>
    </form>
</div>

和JS文件

$(document).ready(function(){

var pfad = "";

$("#choice_btn").click(function(){
 //console.log($("#choice").val());
if ( $("#choice").val() == "joboffers" ){

    pfad = "sites/suche_inserat.php";

    }else{

    pfad = "sites/finde_inserat.php";
 //console.log($("#choice").val());
    }

    $( "#form" ).load( pfad );
    $( "#w_date" ).datepicker();
  /*
    $.ajax({
        url:        pfad,
        type:       "POST",
        async:      true,
        success:    function(callback) {
                    //console.log(callback);
            $("#form").innerHTML(callback);
        }  
        })
   */       

    })
});

抱歉我的英文!我希望有人可以帮助我!

编辑:这是一个小提琴:click

(我不知道,如何在小提琴中制作更多的html窗口):(

1 个答案:

答案 0 :(得分:0)

我现在这样做了(jsfiddle)。也许有人可以看看它。 我把所有表格都放在一个文件中。所以我不需要三个不同的文件,必须加载它们。

$(document).ready(function(){

$("#form_1").hide();
$("#form_2").hide();

$("#choice_btn").click(function(){

if ( $("#choice").val() == "joboffers" ){
    $("#form_2").hide();
    $("#form_1").show();
}else{
    $("#form_1").hide();
    $("#form_2").show();
}
})

$("#j_date").datepicker();
$("#w_date").datepicker();

});