通过选择选项（日期选择器）的两个动态表单答案

【问题标题】：Two Dynamic Forms via Select Option (datepicker)通过选择选项（日期选择器）的两个动态表单
【发布时间】：2014-11-12 17:10:06
【问题描述】：

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

我想在其中有一个来自 jquery 的日期选择器，用于提交日期。但是我有一个问题，我可以在浏览器中看到两个（form_two/form_three）不同的表单，但是如果我查看源代码，dom中没有表单。

这是我的代码：

Form 选择其中一种形式（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窗口）:(

【问题讨论】：

我根据您的代码创建了一个JSFiddle，但我不清楚您在问什么。现在，在单击 #choice_btn 按钮之前，jQuery-UI 日期选择器不会被实例化。您的意思是让日期选择器在 document.ready 上实例化吗？您是否包含 jQuery-UI 的样式表？另外，我只看到一种形式。您能否制作一个 JSFiddle 来帮助说明您的代码所期望的行为是什么，以及您遇到的问题？
我也做了一个 jsfiddle (link)，但我不知道如何制作多个 html 窗口。我有三个 php 文件。一个用于表单选择，另外两个用于表单。我希望，你知道我的意思。在我的示例中，我可以在两种形式之间进行选择，但日期选择器不起作用。因为我没有在 dom 中得到这两种形式。
我仍然很难理解您对代码的解释。例如，当您说“我有一个带有“两个选择选项”的表单，当我点击其中一个选项并提交时，它会显示一个不同的表单。”，您是哪个特定表单在谈论什么？我认为，如果您编辑您的问题，使其更清楚和具体地说明哪些表单正在执行 what，我认为您可能会得到更好的答复。
我已经更新了。 fiddle中的html（main_form，form_two和form_three）有三种形式。在我的原始代码中，这三种形式是三个不同的文件。在 main_form 中，我想在 form_two 和 form_three 之间进行选择，并且应该在 main_form 下加载。它们出现了，但源代码中没有。

标签： javascript jquery html forms datepicker

【解决方案1】：

我现在是这样做的(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();

});

【讨论】：