Currently, Internet Explorer does not support
CSS:
Copy codeThe Code is as follows: <style>
Body {
Margin: 0;
Padding: 0;
}
Div {
Margin: 0;
Padding: 0;
}
. Container {
Margin-left: 10%;
Margin-right: 10%;
}
Ul li {
List-style: none;
}
Ul {
Padding: 0;
Margin: 0;
}
P. em {
Color: red;
Border: 1px solid red;
Padding: 0 10px;
Margin: 0;
}
P. small {line-height: 90%}
P {line-height: 110%}
# Left {
Float: left;
Width: 300px;
Padding: 0;
Margin: 0 10px 0 0;
Border-right: 1px solid # AECEEB;
}
# Right {
Margin-left: 300px;
}
Span. clear {
Clear: both;
}
H2 {
Border-bottom: 1px solid # AECEEB;
}
</Style>
JS:Copy codeThe Code is as follows: function form (){
$ ('# Myform'). submit (function (){
// Get text value
Var TV = $ ("# mytxt"). val (),
Tf = $ (this). find (": input [type = 'text']"). val (),
Tn = $ (this). find (": input [name = 'txtname']"). val ();
$ ("# Result1"). text (TV );
/* $ ("# Result1"). append ("You can get the value of text use these methods below: <br/>"
+ "<B>" + TV + "</B>" + "<br/>"
+ "<P class = 'em '>" +' $ ("# mytxt"). val () '+ "<br/>"
+ '$ (This). find (": input [type = \ 'text \']"). val () '+ "<br/>"
+ '$ (This). find (": input [name = \ 'txtname \']"). val () '+ "<br/>"
+ "</P> ");
*/
// $ ("# Result1"). delay (30000). fadeOut ();
// TV. attr (value, ''); clean value
// Get textarea value
Var av = $ ("# myarea"). val ();
$ ("# Result2"). text (av );
/* $ ("# Result2"). append ("You can get the value of textarea use these methods below: <br/>"
+ "<B>" + av + "</B>" + "<br/>"
+ '<P class = \ 'em \'> $ ("# myarea"). val ()'
+ "</P> ");
*/
// $ ("# Result2"). delay (30000). fadeOut ();
Var str = "";
/* $ ("Select"). change (function (){
$ ("Select option: selected"). each (function (){
Str + = $ (this). val ();
});
$ ("# Result3"). text (str );
})
. Trigger ('change ');
*/
// $ ("Select [name = 'garden '] option: selected") if we have multiple select
$ ("Select [id = 'mysel '] option: selected"). each (function (){
Str = $ (this). val ();
});
$ ("# Result3"). text (str );
Var str2 = "";
$ ("Select [id = 'selecel'] option: selected"). each (function (){
Str2 + = $ (this). val () + "";
});
$ ("# Result4"). text (str2 );
Var str3 = [];
$ ("Input [name = 'checkme']: checked"). each (function (){
Str3.push ($ (this). val ());
});
Var oa = "";
$. Each (str3, function (key, val ){
Oa + = key + ":" + val;
});
$ ("# Result5"). text (oa );
Var ck = $ ("input [type = 'Radio ']: checked"). val ();
$ ("# Result6" 2.16.html (ck + "is checked! ");
Return false;
});
}
Form ();
HTML:Copy codeThe Code is as follows: <Head>
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.js"> </script>
</Head>
<Body>
<Div class = "container">
<H2> Get All Form Elments Value <Div id = "left">
<Form id = "myform">
<Ul>
<Li>
<P class = "small"> Text </p>
<Input type = "text" name = "txtname" id = "mytxt" value = ""/>
</Li>
<Li>
<P class = "small"> TextArea </p>
<Textarea name = "myarea" id = "myarea" value = ""> </textarea>
</Li>
<Li>
<P class = "small"> Single Select </p>
<Select id = "mysel">
<Option name = "apple"> Apple </option>
<Option name = "blue"> Blue </option>
<Option name = "mary"> Mary </option>
<Option name = "asia"> Asia </option>
</Select>
</Li>
<Li>
<P class = "small"> Multiple Select </p>
<Select name = "garden" multiple = "multiple" id = "multisel">
<Option> Flowers </option>
<Option selected = "selected"> Shrubs </option>
<Option> Trees </option>
<Option selected = "selected"> Bushes </option>
<Option> Grass </option>
<Option> Dirt </option>
</Select>
</Li>
<Li>
<P class = "small"> Check Box </p>
Apple <input type = "checkbox" value = "apple" name = "checkme"/>
Banana <input type = "checkbox" value = "banana" name = "checkme"/>
Pear <input type = "checkbox" value = "pear" name = "checkme"/>
Cherry <input type = "checkbox" value = "cherry" name = "checkme"/>
Strawberry <input type = "checkbox" value = "strawberry" name = "checkme"/>
</Li>
<Li>
<P class = "small"> Radio </p>
<Div>
<Input type = "radio" name = "fruit" value = "orange" id = "orange">
<Label for = "orange"> orange </label>
</Div>
<Div>
<Input type = "radio" name = "fruit" value = "apple" id = "apple">
<Label for = "apple"> apple </label>
</Div>
<Div>
<Input type = "radio" name = "fruit" value = "banana" id = "banana">
<Label for = "banana"> banana </label>
</Div>
</Li>
<Li> </li>
<Li> <button> submit </button> </li>
</Ul>
</Form>
</Div>
<Span class = "clear"> </span>
<Div id = "right">
<Div id = "result1"> </div>
<Div id = "result2"> </div>
<Div id = "result3"> </div>
<Div id = "result4"> </div>
<Div id = "result5"> </div>
<Div id = "result6"> </div>
<Div id = "result7"> </div>
</Div>
</Div>
</Body>
</Html>