Ajax registration-script with php mysql and jquery
jqueryphp code / April 19, 2018
In our past instructional exercise, we have dealt with Ajax Login Script with PHP, MySQL and jQuery. In this instructional exercise we will deal with client enrollment shape with PHP, MySQL and jQuery with Demo. We have utilized Bootstrap to make enlistment frame and shape approval utilizing jQuery approval module. The enrollment shape acknowledges information from client and store into MySQL database without page invigorate.
You can see the live demo of this instructional exercise and furthermore download finish running demo content.
You can see the live demo of this instructional exercise and furthermore download finish running demo content.
- form_post.php
- index.php
- add_fields.js
- Steps 1: Create Form with Field Button
In index.php, we will Form HTML add field catch to include fields powerfully.
<form action=“post_form.php” method=“post”>
<div class=“field_wrapper”>
<div>
<input type=“text” name=“input_field[]” value=“”/>
<a href=“javascript:void(0);” class=“add_input_button” title=“Add field”><img src=“add-icon.png”/></a>
</div>
</div>
<input type=“submit” name=“save” value=“Submit”/>
</form>
<div class=“field_wrapper”>
<div>
<input type=“text” name=“input_field[]” value=“”/>
<a href=“javascript:void(0);” class=“add_input_button” title=“Add field”><img src=“add-icon.png”/></a>
</div>
</div>
<input type=“submit” name=“save” value=“Submit”/>
</form>
Steps 2: JavaScript to Form Input Fields Dynamically
In add_fields.js , we will deal with usefulness to include input fields powerfully catch click. Likewise handle usefulness to expel included information fields
$(document).ready(function(){
var max_fields = 10;
var add_input_button = $(‘.add_input_button’);
var field_wrapper = $(‘.field_wrapper’);
var new_field_html = ‘<div><input type=”text” name=”input_field[]” value=””/><a href=”javascript:void(0);” class=”remove_input_button” title=”Remove field”><img src=”remove-icon.png”/></a></div>’;
var input_count = 1;
// Add button dynamically
$(add_input_button).click(function(){
if(input_count < max_fields){
input_count++;
$(field_wrapper).append(new_field_html);
}
});
// Remove dynamically added button
$(field_wrapper).on(‘click’, ‘.remove_input_button’, function(e){
e.preventDefault();
$(this).parent(‘div’).remove();
input_count–;
});
});
var max_fields = 10;
var add_input_button = $(‘.add_input_button’);
var field_wrapper = $(‘.field_wrapper’);
var new_field_html = ‘<div><input type=”text” name=”input_field[]” value=””/><a href=”javascript:void(0);” class=”remove_input_button” title=”Remove field”><img src=”remove-icon.png”/></a></div>’;
var input_count = 1;
// Add button dynamically
$(add_input_button).click(function(){
if(input_count < max_fields){
input_count++;
$(field_wrapper).append(new_field_html);
}
});
// Remove dynamically added button
$(field_wrapper).on(‘click’, ‘.remove_input_button’, function(e){
e.preventDefault();
$(this).parent(‘div’).remove();
input_count–;
});
});
Steps3: Handle From Submit Value At Server End
Presently at long last in form_post.php, we will deal with frame submit input field esteem utilizing PHP. You can add usefulness to spare Form esteems to database
<?php
if(isset($_REQUEST[‘input_field’])){
print ‘<pre>’;
print_r($_REQUEST[‘input_field’]);
print ‘</pre>’;
}
if(isset($_REQUEST[‘input_field’])){
print ‘<pre>’;
print_r($_REQUEST[‘input_field’]);
print ‘</pre>’;
}
?>
You can see the live demo from the Demo interface and can download the content from the Download connect underneath.
Comments
No comments yet, take the initiative.
Leave a Reply