index.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#msg").hide();
$("#btn").click(function(e){
var Data = $("#myform").serializeArray();
console.log(Data);
$.ajax(
{
url : "action.php",
type: "POST",
data : Data,
success:function(data, textStatus, jqXHR)
{
$('#msg').html(data);
}
});
$("#msg").slideDown("slow");
e.preventDefault();
});
});
</script>
<div id="msg"></div>
<form id="myform" type="post">
<fieldset>
<legend>Ajax Form </legend>
<p>We would love to hear from you. Please fill out this form</p>
<div class="elements">
<label for="name">Name :</label>
<input required="required" type="text" value="Sanjeev" name="fname" size="20" />
</div>
<div class="elements">
<label for="Age">Age :</label>
<input required="required" type="number" value="23" id="age" name="age" size="10" />
</div>
<div class="elements">
<label for="pro"> Profession :</label>
<select name="pro">
<option value="Student" selected="selected">Student</option>
<option value="Engineer" >Engineer</option>
</select>
</div>
<div class="elements">
<label for="Gender">Gender: </label>
<input type="radio" name="gender" value="Male" checked="checked" id="r1"> Male </input>
<input type="radio" name="gender" value="Female" id="r2"> Female </input>
</div>
<div class="elements">
<label for="hobby">Hobby :</label>
<input type="checkbox" name="hobby[]" value="Sports" id="ch1"> Sports </input>
<input type="checkbox" name="hobby[]" value="Coding" checked="checked" id="ch2"> Coding </input>
</div>
<div class="submit">
<input type="submit" id="btn" name="btn" class="btn" value="Submit" />
</div>
</fieldset>
</form>
action.php
<?php
if (!empty($_POST))
{
$name = $_POST['fname'];
echo "Welcome <b>". $name. "</b>";
$age = $_POST['age'];
echo "<br />Your age is: <b>". $age. "</b>";
$sex = $_POST['gender'];
echo "<br />Your gender is: <b>". $sex. "</b>";
$pro = $_POST['pro'];
echo "<br/> You are : <b>".$pro. "</b>";
if(isset($_POST['hobby'])){
echo "<br/> You Love: ";
foreach($_POST['hobby'] as $hobby){
echo "<b>".$hobby. " </b>";
}
}
}
?>
0 comments:
Post a Comment