通过选择选项(日期选择器）的两个动态表单
Two Dynamic Forms via Select Option (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);
}
})
*/
})
});
对不起我的英语！！我希望有人能帮助我！
编辑：这是一个小提琴：点击
（我不知道，如何在小提琴中制作更多的html窗口）:(
我现在就是这样（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();
});
相关文章：
- 在servlet中提交两个表单
- 我如何让我的脚本连续提交两个表单
- 在一次点击中发布到两个表单 JavaScript
- 只需一个按钮即可在页面上提交两个表单
- HTML5两个表单将分别打印出来
- 使用jQuery组合两个表单输入值
- 两个表单，一个选择/下拉框-需要将选择值从一个表单复制到另一个表单
- 我怎么能只提交两个表单元素
- 收听在同一页面上使用两个表单提交事件
- 两个表单 - 一个提交按钮
- 如何使用一个带有 rails 和 javascript 的提交按钮提交两个表单
- Angularjs 两个表单用于同一个控制器
- Rails/General HTML:如何从两个表单提交内容
- 如何使用一个 JavaScript 函数管理两个表单
- 尝试在 Bootstrap 中将两个表单并排放置.任何想法如何
- 点击时事件会触发两个表单的提交
- 如果一个表单输入被禁用，那么两个表单输入是否可以具有相同的名称
- 验证两个表单并将其作为一个jquery提交
- 如何对两个表单使用公共输入
- 同一页面上的两个表单和两个脚本，第一个脚本将被调用而不考虑提交
