在onclick页面加载html表单

时间:2014-10-01 17:49:39

标签: javascript php jquery html forms

使用onclick方法选择表单类型。我有很多表单类型 - here is the example

  • 当我点击一个onclick子菜单时会打开,当我选择表单类型时,所选表单应该在菜单下面打开
  • 如何在子菜单中选择选项
  • 时加载表单
  • 我需要在同一页面中加载HTML表单,但HTML代码将存储在单独的HTML文件中

form.php的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>1st indian site</title>
    <link rel="shortcut icon" href="../../../../images/ico/fav.ico" >
    <link rel="stylesheet" href="formoid_files/formoid1/formoid-solid-blue.css" type="text/css" />
    <link href="../../../css/proper align.css" rel="stylesheet">
    <link href="../../../css/main.css" rel="stylesheet">
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <style>
        a{text-decoration:none;}a:hover{}
    </style>
</head><!--/head-->
<body data-spy="scroll" data-target="#navbar" data-offset="0">
    <header id="header" role="banner">
        <div class="container">
            <div id="navbar" class="navbar navbar-default">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="../index.php?hfgjiii4wg4fgww86g4gg41"></a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">

                        <li  class="active"><a href="#pricing"> 
                                &nbsp;&nbsp;Post</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header><!--/#header-->
    <br>        <br><br><br><br><br>
                      <script type="text/javascript" src="formoid_files/formoid1/jquery.min.js"></script>
                      <form enctype="multipart/form-data" class="formoid-solid-blue" style="background-color:#FFFFFF;font-size:14px;font-family:'Roboto',Arial,Helvetica,sans-serif;color:#34495E;max-width:940px;min-width:150px" method="post" action="post forward.php"><div class="title"><h2>Post Free Ad</h2></div>
                    <div class="element-radio"><label class="title">Type Of Ad<span class="required"></span></label><div class="column column2"><label><input type="radio" name="type" value="I Want To Sell" required="required"/><span>I Want To Sell</span></label></div><span class="clearfix"></span><div class="column column2"><label><input type="radio" name="type" value="I Want To Buy" required="required"/><span>I Want To Buy</span></label></div><span class="clearfix"></span>
                                                </div><br>
                    <div class="element-input" title="title"><label class="title"><span class="required">Title For Your Ad</span></label><div class="item-cont"><input class="medium" type="text" name="title" required="required" placeholder="Title For Your Ad"/><span class="icon-place"></span></div></div><br>
                    <div class="element-file"><label class="title"></label><div class="item-cont"><label class="medium" ><div class="button">Choose File</div><input type="file" class="file_input" name="ufile" accept="image/x-png, image/gif, image/jpeg" /><div class="file_text">No file selected</div><span class="icon-place"></span></label></div></div><br>
                    <div class="element-file"><label class="title"></label><div class="item-cont"><label class="medium" ><div class="button">Choose File</div><input type="file" class="file_input" name="ufile1" accept="image/x-png, image/gif, image/jpeg" /><div class="file_text">No file selected</div><span class="icon-place"></span></label></div></div><br>
                    <div class="element-file"><label class="title"></label><div class="item-cont"><label class="medium" ><div class="button">Choose File</div><input type="file" class="file_input" name="ufile2" accept="image/x-png, image/gif, image/jpeg" /><div class="file_text">No file selected</div><span class="icon-place"></span></label></div></div><br>
                    <div class="element-file"><label class="title"></label><div class="item-cont"><label class="medium" ><div class="button">Choose File</div><input type="file" class="file_input" name="ufile3" accept="image/x-png, image/gif, image/jpeg" /><div class="file_text">No file selected</div><span class="icon-place"></span></label></div></div><br>
                    <div class="element-file"><label class="title"></label><div class="item-cont"><label class="medium" ><div class="button">Choose File</div><input type="file" class="file_input" name="ufile4" accept="image/x-png, image/gif, image/jpeg" /><div class="file_text">No file selected</div><span class="icon-place"></span></label></div></div><br>
                    <div class="element-select"><label class="title"><span class="required">Select Your Mobile Brand</span></label><div class="item-cont"><div class="medium"><span><select name="mobilebrand" required="required">
                                        <option value="">..</option>
                                        <option value="ASUS">ASUS</option>
                                        <option value="Vertu">Vertu</option>
                                        <option value="Vodafone">Vodafone</option>
                                        <option value="LG">LG</option>
                                        <option value="O2">O2</option>
                                        <option value="HTC">HTC</option>
                                        <option value="Samsung">Samsung</option>
                                        <option value="Nokia">Nokia</option>
                                        <option value="FLY">FLY</option>
                                        <option value="Alcatel">Alcatel</option>
                                        <option value="Zen">Zen</option>
                                        <option value="Palm">Palm</option>
                                        <option value="Viva">Viva</option>
                                        <option value="Intex">Intex</option>
                                        <option value="Karbonn">Karbonn</option>
                                        <option value="Lava">Lava</option>
                                        <option value="Tata Indicom">Tata Indicom</option>
                                        <option value="Rocker">Rocker</option>
                                        <option value="Lemon">Lemon</option>
                                        <option value="Wynncom">Wynncom</option>
                                        <option value="Virgin Mobile">Virgin Mobile</option>
                                        <option value="G-Five">G-Five</option>
                                        <option value="Gee Pee">Gee Pee</option>
                                        <option value="INQ">INQ</option>
                                        <option value="Iball">Iball</option>
                                        <option value="AirFone">AirFone</option>
                                        <option value="Acer">Acer</option>
                                        <option value="Byond">Byond</option>
                                        <option value="Beetel">Beetel</option>
                                        <option value="Sagem">Sagem</option>
                                        <option value="Toshiba">Toshiba</option>
                                        <option value="BenQ">BenQ</option>
                                        <option value="Pantech">Pantech</option>
                                        <option value="Videocon">Videocon</option>
                                        <option value="Spice">Spice</option>
                                        <option value="ZTE">ZTE</option>
                                        <option value="BlackBerry">BlackBerry</option>
                                        <option value="Maxx">Maxx</option>
                                        <option value="Apple iPhone">Apple iPhone</option>
                                        <option value="Micromax">Micromax</option>
                                        <option value="Sony Ericsson">Sony Ericsson</option>
                                        <option value="HP">HP</option>
                                        <option value="Motorola">Motorola</option>
                                        <option value="Dell">Dell</option>
                                        <option value="I-Mate">I-Mate</option>
                                        <option value="Other">Other</option></select><i></i><span class="icon-place"></span></span></div></div></div><br>
                    <div class="element-input"><label class="title"><span class="required">*</span></label><div class="item-cont"><input class="medium" type="text" name="mobilemodel" required="required" placeholder="Select Your Model"/><span class="icon-place"></span></div></div>
                    <div class="element-radio"><label class="title">Condition<span class="required">*</span></label>        <div class="column column2"><label><input type="radio" name="mobilecond" value="New" required="required"/><span>New</span></label></div><span class="clearfix"></span>
                        <div class="column column2"><label><input type="radio" name="mobilecond" value="Used" required="required"/><span>Used</span></label></div><span class="clearfix"></span>
                    </div><br>
                    <div class="element-input"><label class="title"></label><div class="item-cont"><input class="small" type="text" name="price" placeholder="Price"/><span class="icon-place"></span></div></div><br>
                    <div class="element-input"><label class="title"></label><div class="item-cont"><input class="medium" type="text" name="location" placeholder="Your Location(enter Your Town or Village Name)"/><span class="icon-place"></span></div></div><br>
                    <div class="element-textarea"><label class="title"><span class="required"></span></label><div class="item-cont"><textarea class="small" name="description" cols="20" rows="5" required="required" placeholder="Description About Your Mobile"></textarea><span class="icon-place"></span></div></div><br>
                    <hr><center><h3>Seller Information</h3></center>
                    <div class="element-radio"><label class="title">You Are <span class="required"></span></label>      <div class="column column2"><label><input type="radio" name="youare" value="Dealer" required="required"/><span>Dealer</span></label></div><span class="clearfix"></span>
                        <div class="column column2"><label><input type="radio" name="youare" value="Individual" required="required"/><span>Individual</span></label></div><span class="clearfix"></span>
                    </div>
                    <div class="element-name"><label class="title"></label><span class="nameFirst"><input placeholder="Name" type="text" size="8" name="name" /><span class="icon-place"></span></span></div><br>
                    <div class="element-email"><label class="title"><span class="required">*</span></label><div class="item-cont"><input class="medium" type="email" name="email" value="" required="required" placeholder="Email"/><span class="icon-place"></span></div></div><br>
                    <div class="element-phone"><label class="title"></label><div class="item-cont"><input class="medium" type="tel" pattern="[+]?[\.\s\-\(\)\*\#0-9]{3,}" maxlength="24" name="phonenumber" placeholder="Phone" value=""/><span class="icon-place"></span></div></div><br>
                    <div class="submit"><input type="submit" value="Submit"/></div></form><script type="text/javascript" src="formoid_files/formoid1/formoid-solid-blue.js"></script>

</body>

当我点击子菜单时如何使用该表格在同一页面中打开此form.php

1 个答案:

答案 0 :(得分:0)

如果你所做的只是加载一个html表单,$('#targetElement').load('formPage.html')可能会在onclick中进行。