search form works only once - javascript

I have a page that displays list of boxes, when i search once it gives me the result perfectly, when i search again, nothing is shown at all
SEARCH BOX:
<form class="search-form">
<input type="text" id="searchfield" class="input-medium search-query" placeholder="Search">
<button type="submit" class="btn">Search</button>
</form>
HTML:
<div class="col-md-4 col-sm-6">
<div class="mybox">
<div data-title="Titleshoudbehere" class="myitem">
<a target="_blank">
<div class="mytitle">
<p>Title is here</p>
</div>
<div class="footer">
<p>#hashtag </p>
</div>
</a>
</div>
</div>
</div>
JS:
$('.search-form').on('submit', function() {
return false;
});
$('.search-form .btn').on('click', function(e) {
var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
$('div.mybox .mytitle').each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(query) === -1)
$this.closest('div.col-md-4.col-sm-6').fadeOut();
else $this.closest('div.col-md-4.col-sm-6').fadeIn();
});
});


I've just copy-pasted your code into a snippet and it seems to work fine.
Try typing "Title" and then typing "Foo", and then "Title" again for instance:
$('.search-form').on('submit', function() {
return false;
});
$('.search-form .btn').on('click', function(e) {
var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
$('div.mybox .mytitle').each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(query) === -1)
$this.closest('div.mybox').fadeOut();
else $this.closest('div.mybox').fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="search-form">
<input type="text" id="searchfield" class="input-medium search-query" placeholder="Search">
<button type="submit" class="btn">Search</button>
</form>
<div class="col-md-4 col-sm-6">
<div class="mybox">
<div data-title="Titleshoudbehere" class="myitem">
<a target="_blank">
<div class="mytitle">
<p>Title is here</p>
</div>
<div class="footer">
<p>#hashtag </p>
</div>
</a>
</div>
</div>
</div>

Related

how can ı access all inputs in form

I found this code in https://codepen.io/pkbhuiyan/pen/VaVNQd . I passed "id" to form tag and I am trying to access all inputs in form tag but it does not work.
jQuery:
$(document).ready(function () {
jQuery(function ($) {
var $inputs = $( "#contact_form :input" ).prop("disabled", true);;
$("#edit_btn").click(function () {
$("#submit_btn").show(0);
$("#edit_btn").hide(0);
$inputs.prop("disabled", false);
});
$("#submit_btn").click(function () {
$inputs.prop("disabled", true);
$("#submit_btn").hide(0);
$("#edit_btn").show(0);
});
});
});
HTML:
<div id="kursiyerprofili">
<form action="/" method="post">
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="contact_form col-sm-10 col-md-10">
<form name="contact_form" id="contact_form" class="contact_form" method="post">
<div class="row">
<div class="col-sm-5 col-md-5">
<label>İSİM</label>
<input name="name" id="student-name" class="form-control" type="text" value="" />
</div>
<div class="col-sm-5 col-md-5">
<label>SOYİSİM</label>
<input name="surname" id="student-surname" class="form-control" type="text" value="" />
</div>
<div class=" pull-right profile-edit-button ">
<a id="edit_btn" class="btn btn-warning" name="submit">Profili Düzenle</a>
<a id="submit_btn" class="btn btn-warning" name="submit">Değişiklikleri Kaydet</a>
<!--<span id="notice" class="alert alert-warning alert-dismissable hidden" style="margin-left:20px;"></span>-->
</div>
</div>
</form>
</div> <!--contact-form-->
</div> <!--row-->
</div> <!--container-fluid-->
</div> <!--main-->
</form>
</div>

If my form is like below:
<form id="myForm" action="/action_page.php"></form>
I can access all elements like bwlow:
document.getElementById("myForm").elements

The jQuery way:
$("form").each(function(){
$(this).find(':input')
});

How to sum the values from dynamically created input fields

I have created Dynamic Add / Remove fields. Everything is working perfectly. I want sum of values from Amount field to be displayed on real time basis using JavaScript. I have tried but am unable to do. I am not much familiar with JavaScript.
Following is code:
var i = 0;
jQuery(document).ready(function($) {
//fadeout selected item and remove
$(document).on('click', '#remove-allocation-fields', function(event) {
event.preventDefault();
$(this).parent().fadeOut(300, function() {
$(this).parent().empty();
return false;
});
});
var rows = '<div class="all-allocation-fields"><div class="row"><div class="col-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]"></div></div><div class="col-5"><div class="form-group"><input type="text" class="form-control code" id="code" name="allocate_amount[]"></div></div><div class="col-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields">Remove</button></div></div></div>';
//add input
$('#add-allocation-fields').click(function() {
$(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
i++;
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-header text-center">
<b>Allocation of Funds</b>
</div>
<div class="card-body">
<div class="row">
<div class="col-5"><label><b>Allocation Items</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-5"><label><b>Amount</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-2"></div>
</div>
<div class="row">
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control" name="allocate_items[]">
</div>
</div>
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control code" id="code" name="allocate_amount[]">
</div>
</div>
<div class="col-2">
<button type="button" class="btn btn-success" id="add-allocation-fields">Add</button>
</div>
</div>
<div id="fund-allocation-fields">
</div>
<small class="form-text text-muted"><i>Total amount must be equal to the goal amount.</i></small>
<div id="sum"></div>
</div>
</div>

You can use add keyup event listener and calculate sum as:
function calculateSum() { //Add a calculateSum function
var sum = 0;
$("input[name='allocate_amount[]']").each(function() {
sum += +this.value || 0;
});
$("#sum").text(sum);
}
//fadeout selected item and remove
$(document).on('click', '#remove-allocation-fields', function(event) {
event.preventDefault();
$(this).parent().fadeOut(300, function() {
$(this).parent().empty();
calculateSum(); //Call calculateSum to update the sum valaue
return false;
});
});
$("body").on("keyup", "input[name='allocate_amount[]']", calculateSum); //update when keyup
Demo:
var i = 0;
jQuery(document).ready(function($) {
function calculateSum() {
var sum = 0;
$("input[name='allocate_amount[]']").each(function() {
sum += +this.value || 0;
});
$("#sum").text(sum);
}
//fadeout selected item and remove
$(document).on('click', '#remove-allocation-fields', function(event) {
event.preventDefault();
$(this).parent().fadeOut(300, function() {
$(this).parent().empty();
calculateSum();
return false;
});
});
var rows = '<div class="all-allocation-fields"><div class="row"><div class="col-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]"></div></div><div class="col-5"><div class="form-group"><input type="text" class="form-control code" id="code" name="allocate_amount[]"></div></div><div class="col-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields">Remove</button></div></div></div>';
//add input
$('#add-allocation-fields').click(function() {
$(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
i++;
return false;
});
$("body").on("keyup", "input[name='allocate_amount[]']", calculateSum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-header text-center">
<b>Allocation of Funds</b>
</div>
<div class="card-body">
<div class="row">
<div class="col-5"><label><b>Allocation Items</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-5"><label><b>Amount</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-2"></div>
</div>
<div class="row">
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control" name="allocate_items[]">
</div>
</div>
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control code" id="code" name="allocate_amount[]">
</div>
</div>
<div class="col-2">
<button type="button" class="btn btn-success" id="add-allocation-fields">Add</button>
</div>
</div>
<div id="fund-allocation-fields">
</div>
<small class="form-text text-muted"><i>Total amount must be equal to the goal amount.</i></small>
<div id="sum"></div>
</div>
</div>

I think you can do it with this code:
function calcAmount(){
var amount = 0;
$('input[name="allocate_amount[]"]').each(function(){
amount = amount + $(this).val();
});
return amount;
}
jQuery(document).ready(function($) {
$("input[name="allocate_amount[]]").blur(function(){
$("#sum").html(calcAmount());
});
});

Okay, I try to update your code: and it works fine:
main changes:
- assign ids to input fields
- make changes in function
have a look to jsfiddle
https://jsfiddle.net/dupinderdhiman/ygvphmxq/31/
Main changes:
var sum = eval($('#value1').val()) + eval($('#value2').val());
$('#sum').text(sum);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div class="card">
<div class="card-header text-center">
<b>Allocation of Funds</b>
</div>
<div class="card-body">
<div class="row">
<div class="col-5"><label><b>Allocation Items</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-5"><label><b>Amount</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-2"></div>
</div>
<div class="row">
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control" id='value1' name="allocate_items[]">
</div>
</div>
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control code" id='value2' name="allocate_amount[]">
</div>
</div>
<div class="col-2">
<button type="button" class="btn btn-success" id="add-allocation-fields">Add</button>
</div>
</div>
<div id="fund-allocation-fields">
</div>
<small class="form-text text-muted"><i>Total amount must be equal to the goal amount. <span id="sum"></span></i></small>
</div>
</div>
<script type="text/javascript">
var i = 0;
jQuery(document).ready(function($) {
//fadeout selected item and remove
$(document).on('click', '#remove-allocation-fields', function(event) {
event.preventDefault();
$(this).parent().fadeOut(300, function() {
$(this).parent().empty();
return false;
});
});
var rows = '<div class="all-allocation-fields"><div class="row"><div class="col-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]"></div></div><div class="col-5"><div class="form-group"><input type="text" class="form-control code" id="code" name="allocate_amount[]"></div></div><div class="col-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields">Remove</button></div></div></div>';
//add input
$('#add-allocation-fields').click(function() {
debugger;
$(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
i++;
var sum = eval($('#value1').val()) + eval($('#value2').val());
$('#sum').text(sum);
return false;
});
});
</script>
</body>
</html>

Saving dynamically added li and ul element to database using an array

I'm trying to build a User interface of an application where user could add ul and li element when clicking on add question, I successfully managed to develop the front end part here's a preview:
but the problem is when saving this to the database which is so overwhelming I'm stuck at this, is there any way to save the data to an array so I can display them with php, any idea is welcomed.
here's the jquery code:
wrapper.on("click", "button", function(e){
e.preventDefault();
var parent = $(this).parent().parent().parent().parent().parent().parent();
var parentID = $(this).attr('element-id');
var elementID = 1000000000000000000*Math.random();
parentIDs.push(elementID);
if($(this).attr('class') == "add_field_button btn btn-success"){
if(parent.find('ul').length){
parent.find('ul').first().append(`
<li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li>`);
}else{
$(this).closest('li').append(`
<ul><li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li></ul>`);
}
}else if($(this).attr('class') == "delete_field_button btn btn-error"){
parent.remove();
}
Thanks is advance.

Well...
If the whole user-interative-area, I'd call a playground, can be put inside a container:
<div id='playground'>
.. all the ul's and li's..
</div>
And if you've got a form or something else:
<form action='/' id='form-playground' method='post'>
<textarea id='playground-container' name='playground' class='hidden'>
</textarea>
<input type='submit' value='Save My Playground'>
</form>
Then on submit you can copy the contents of the the playground to a hidden textarea:
$(document).ready(function () {
$('#form-playground').on('submit', function () {
$('#playground-container').html($('#playground').html());
return true;
});
});
Or perhaps an AJAX post:
$.post( PostUrl, { playground: $('#playground').html() } );

Preview for incrementing fields

I am trying to create a form which contains a question field and an answer field.
The question field remains constant and on button click the answer field gets incremented to the max count set to it.
When a user enters data into these fields simultaneously I want to show them the preview of the text they entered.
I am able to do it for a single field but the answer field is an incrementing field and I am unable to figure out how to show a preview for the incremented fields.
HTML:
<fieldset id="5" style="padding-top:30px;">
<div>
<b>Question</b>
<input type="text" name="word" class="word2"
placeholder="Question" style="margin-left:32px;
width:150px;"/>
</div>
</fieldset>
<fieldset id="6">
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<div class="controls">
<form role="form" autocomplete="off">
<b>Choice(s)</b><br /><br />
<div class="entry input-group col-xs-3">
<input class="word" name="fields[]" type="text" placeholder="Choice" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<br>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset id="2">
<div style="padding: 20px;">
<b><span class="word2_preview"></span></b>
</div>
</fieldset>
<fieldset id="3">
<div style="padding:20px;">
<b><span class="word_preview"></span></b>
</div>
</fieldset>
JavaScript:
$(function () {
$(document).on('click', '.btn-add', function (e) {
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function (e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</ script >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script> <
script type = "text/javascript" >
$(function () {
$(".word").keyup(function () {
var word = $(this).val();
$(".word_preview").html(word);
return false;
});
});
</script>

Change keyup event as bellow
$(".word").bind('keyup',function () {
addText();
return false;
});
Add addText function as bellow
function addText(){
var text = "";
$('input.word').each(function(i, obj){
text+=obj.value + "<br>";
console.log(text);
});
$(".word_preview").html(text);
}
Also add the bellow block in to .btn-add setion
$(".word").unbind('keyup').bind('keyup',function () {
addText();
return false;
});
That's all

Use jQuery `text()` method
$(function () {
$(document).on('click', '.btn-add', function (e) {
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
})
.on('click', '.btn-remove', function (e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
$(function () {
$(document).on("keyup",".word",function () {
var word = $(this).val();
var parent_index = $(this).parent(".entry").index();
var id = "#word_prev_" + parent_index;
var elem = document.getElementById(id);
//if element was created just show the word preview
if(elem){
console.log("exists");
$(elem).text(word);
}
//if not create it and show the preview
else
{
console. log("creating");
$("#word_preview_wrapper > div").append("<b><span id=" + id +">" + word + "</span></b><br/>");
}
//return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<fieldset id="5" style="padding-top:30px;">
<div>
<b>Question</b>
<input type="text" name="word" class="word2"
placeholder="Question" style="margin-left:32px;
width:150px;"/>
</div>
</fieldset>
<fieldset id="6">
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<div class="controls">
<form role="form" autocomplete="off">
<b>Choice(s)</b><br /><br />
<div class="entry input-group col-xs-3">
<input class="word" name="fields[]" type="text" placeholder="Choice" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<br>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset id="word_preview_wrapper">
<div style="padding:20px;">
</div>
</fieldset>
Like this I guess

Need run some jquery code between each step in a form wizard (see update 3)

I am adding to my spring project a form wizard based on bootstrap, where the view is this:
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Instalação da aplicação</title>
</head>
<body>
<div id="pad-wrapper">
<div class="row">
<div class="col-md-12 col-xs-12">
<div id="fuelux-wizard" class="wizard row">
<ul class="wizard-steps">
<li data-target="#step1" class="active">
<span class="step">1</span>
<span class="title">Banco de dados</span>
</li>
<li data-target="#step2">
<span class="step">2</span>
<span class="title">Dados do administrador</span>
</li>
<li data-target="#step3">
<span class="step">3</span>
<span class="title">Conclusão</span>
</li>
</ul>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
<div class="row form-wrapper">
<div class="col-md-8">
<form method="post" action="">
<div class="field-box">
<label>Máquina (IP):</label>
<input class="form-control" type="text" />
</div>
<div class="field-box">
<label>Usuário:</label>
<input class="form-control" type="text" />
</div>
<div class="field-box">
<label>Senha:</label>
<input class="form-control" type="text" />
</div>
</form>
</div>
</div>
</div>
<div class="step-pane" id="step2">
<div class="row form-wrapper">
<div class="col-md-8">
<form>
<div class="field-box">
<label>Usuário:</label>
<input class="form-control" type="text" />
</div>
<div class="field-box">
<label>Digite uma senha:</label>
<input class="form-control" type="password" />
</div>
<div class="field-box">
<label>Repita a senha:</label>
<input class="form-control" type="password" />
</div>
<div class="field-box">
<label>E-mail:</label>
<input class="form-control" type="text" />
</div>
</form>
</div>
</div>
</div>
<div class="step-pane" id="step3">
<div class="row form-wrapper">
<div class="col-md-8">
O sistema foi configurado com sucesso! Agora você pode efetuar seu login e começar a usa-lo.
</div>
</div>
</div>
</div>
<div class="wizard-actions">
<button type="button" disabled class="btn-glow primary btn-prev">
<i class="icon-chevron-left"></i> Prõximo
</button>
<button type="button" class="btn-glow primary btn-next" data-last="Finish">
Seguinte <i class="icon-chevron-right"></i>
</button>
<button type="button" class="btn-glow success btn-finish">
Faça login no sistema!
</button>
</div>
</div>
</div>
</div>
</body>
</html>
I want that after each step, run one jquery function which will perform soe update in the server (first step should create a database, second step should create a user), but I have no idea how to do this. Anyone can point me a direction accomplish the result I expected?
UPDATE
Ok, then I made some changes in the html code, and include some jquery code, which I guess I think should do the job, but isn't working. Anyone can see what I am doing wrong?
<body>
<!-- main container -->
<div class="content">
<div id="pad-wrapper">
<div class="row">
<div class="col-md-12 col-xs-12">
<div id="fuelux-wizard" class="wizard row">
<ul class="wizard-steps">
<li data-target="#step1" class="active">
<span class="step">1</span>
<span class="title">Banco de dados</span>
</li>
<li data-target="#step2">
<span class="step">2</span>
<span class="title">Dados do administrador</span>
</li>
<li data-target="#step3">
<span class="step">3</span>
<span class="title">Conclusão</span>
</li>
</ul>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
<div class="row form-wrapper">
<div class="col-md-8">
<form name="target" method="post" action="<c:out value="${pageContext.request.contextPath}/instala/createdb"/>">
<div class="field-box">
<label>Máquina (IP):</label>
<input class="form-control" type="text" name="maquina" />
</div>
<div class="field-box">
<label>Usuário:</label>
<input class="form-control" type="text" name="usuario_db" />
</div>
<div class="field-box">
<label>Senha:</label>
<input class="form-control" type="text" name="senha_db" />
</div>
</form>
</div>
</div>
</div>
<div class="step-pane" id="step2">
<div class="row form-wrapper">
<div class="col-md-8">
<form name="target" method="post" action="<c:out value="${pageContext.request.contextPath}/instala/createuser"/>">
<div class="field-box">
<label>Usuário:</label>
<input class="form-control" type="text" name="usuario" />
</div>
<div class="field-box">
<label>Digite uma senha:</label>
<input class="form-control" type="password" name="senha1" />
</div>
<div class="field-box">
<label>Repita a senha:</label>
<input class="form-control" type="password" name="senha2" />
</div>
<div class="field-box">
<label>E-mail:</label>
<input class="form-control" type="text" name="email" />
</div>
</form>
</div>
</div>
</div>
<div class="step-pane" id="step3">
<div class="row form-wrapper payment-info">
<div class="col-md-8">
O sistema foi configurado com sucesso! Agora você pode efetuar seu login e começar a usa-lo.
</div>
</div>
</div>
</div>
<div class="wizard-actions">
<button type="button" disabled class="btn-glow primary btn-prev">
<i class="icon-chevron-left"></i> Anterior
</button>
<button type="submit" class="btn-glow primary btn-next" data-last="Finish">
Prõximo <i class="icon-chevron-right"></i>
</button>
<button type="button" onclick="<c:out value="${pageContext.request.contextPath}/acesso/login"/>" class="btn-glow success btn-finish">
Faça login no sistema!
</button>
</div>
<div class="alert alert-danger" id="result">
<i class="icon-remove-sign"></i>
</div>
</div>
</div>
</div>
</div>
<!-- end main container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<c:out value="${pageContext.request.contextPath}/jquery/js/jquery-2.1.0.min.js"/>"></script>
<script src="<c:out value="${pageContext.request.contextPath}/jquery/js/jquery-ui-1.10.4.custom.min.js"/>"></script>
<script src="<c:out value="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"/>"></script>
<script src="<c:out value="${pageContext.request.contextPath}/extras/js/jquery-ui-timepicker-addon.js"/>"></script>
<script src="<c:out value="${pageContext.request.contextPath}/extras/js/jquery-ui-sliderAccess.js"/>"></script>
<script src="<c:out value="${pageContext.request.contextPath}/extras/js/fuelux.wizard.js"/>"></script>
<script type="text/javascript">
$(function () {
$( "#result" ).hide();
var $wizard = $('#fuelux-wizard'),
$btnPrev = $('.wizard-actions .btn-prev'),
$btnNext = $('.wizard-actions .btn-next'),
$btnFinish = $(".wizard-actions .btn-finish");
$wizard.wizard().on('finished', function(e) {
// wizard complete code
}).on("changed", function(e) {
var step = $wizard.wizard("selectedItem");
// reset states
$btnNext.removeAttr("disabled");
$btnPrev.removeAttr("disabled");
$btnNext.show();
$btnFinish.hide();
if (step.step === 1) {
$btnPrev.attr("disabled", "disabled");
//
} else if(step.step === 2) {
//
} else if (step.step === 3) {
$btnNext.hide();
$btnFinish.show();
};
});
$btnPrev.on('click', function() {
$wizard.wizard('previous');
});
$btnNext.on('click', function() {
$wizard.wizard('next');
});
$( "#target" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, $(this).serialize() );
// Put the results in a div
posting.done(function( data ) {
if(data == "not") {
$( "#result" ).show();
$( "#result" ).empty().append( "Erro ao executar os procedimentos dessa etapa" ).fadeOut();
}
$("#target").each (function(){
this.reset();
});
});
});
});
</script>
</body>
UPDATE 2
My current jquery code is this:
$(function () {
$( "#result" ).hide();
var $wizard = $('#fuelux-wizard'),
$btnPrev = $('.wizard-actions .btn-prev'),
$btnNext = $('.wizard-actions .btn-next'),
$btnFinish = $(".wizard-actions .btn-finish");
$wizard.wizard().on("finished", function(e) {
alert("finished");
var fnprocessform = function (targetform) {
if (targetform.attr('id') === 'target') {
alert('validating form 1');
var maquina = $("input[maquina]").val();
var usuario = $("input[usuario_db]").val();
var senha = $("input[senha_db]").val();
var request = $.ajax({
url: "<c:out value="${pageContext.request.contextPath}/instala/createdb"/>",
type: "POST",
data: { maquina : maquina, usuario_db: usuario, senha_db: senha }
});
return request;
}
if (targetform.attr('id') === 'target2') {
alert('validating form 2');
var usuario = $("input[usuario]").val();
var senha = $("input[senha1]").val();
var pnome = $("input[primeiroNome]").val();
var unome = $("input[ultimoNome]").val();
var request = $.ajax({
url: "<c:out value="${pageContext.request.contextPath}/instala/createuser"/>",
type: "POST",
data: { usuario : usuario, senha1: senha, primeiroNome: pnome, ultimoNome: unome }
});
return request;
};
};
if(fnprocessform == "yes") {
alert('form validated');
var nextstep = $('.wizard-steps').find('.active').next();
nextstep.find('a').tab('show');
}
}).on("changed", function(e) {
alert("changed");
var step = $wizard.wizard("selectedItem");
$btnNext.removeAttr("disabled");
$btnPrev.removeAttr("disabled");
$btnNext.show();
$btnFinish.hide();
if (step.step === 1) {
$btnPrev.attr("disabled", "disabled");
} else if (step.step === 3) {
$btnNext.hide();
$btnFinish.show();
};
});
$btnPrev.on('click', function() {
$wizard.wizard('previous');
});
$btnNext.on('click', function() {
$wizard.wizard('next');
});
});
My problem now is that, otherwise from event "clicked", the event "finished" is never triggered when I access the page (it supposed to be triggered when I click in the button "next").
Anyone can tell me what's wrong with my current approach?
UPDATE 3
Ok, after a contact with the creator of bootstrap theme I using, I learn the event "finished" is only triggered in the end of the wizard. What I want is run some jquery code after first step (to create an database in server) and after second step (to create an user in the database). After the third step, I just go to login page.
My current HTML code is this:
<!-- main container -->
<div class="content">
<div id="pad-wrapper">
<div class="row">
<div class="col-md-12 col-xs-12">
<div id="fuelux-wizard" class="wizard row">
<ul class="wizard-steps">
<li data-target="#step1" class="active">
<span class="step">1</span>
<span class="title">Banco de dados</span>
</li>
<li data-target="#step2">
<span class="step">2</span>
<span class="title">Dados do administrador</span>
</li>
<li data-target="#step3">
<span class="step">3</span>
<span class="title">Conclusão</span>
</li>
</ul>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
<div class="row form-wrapper">
<div class="col-md-8">
<form id="target">
<div class="field-box">
<label>Máquina (IP):</label>
<input class="form-control" type="text" name="maquina" />
</div>
<div class="field-box">
<label>Usuário:</label>
<input class="form-control" type="text" name="usuario_db" />
</div>
<div class="field-box">
<label>Senha:</label>
<input class="form-control" type="text" name="senha_db" />
</div>
</form>
</div>
</div>
</div>
<div class="step-pane" id="step2">
<div class="row form-wrapper">
<div class="col-md-8">
<form id="target2">
<div class="field-box">
<label>Usuário:</label>
<input class="form-control" type="text" name="usuario" />
</div>
<div class="field-box">
<label>Digite uma senha:</label>
<input class="form-control" type="password" name="senha1" />
</div>
<div class="field-box">
<label>Repita a senha:</label>
<input class="form-control" type="password" name="senha2" />
</div>
<div class="field-box">
<label>Primeiro nome:</label>
<input class="form-control" type="text" name="primeiroNome" />
</div>
<div class="field-box">
<label>Ultimo nome:</label>
<input class="form-control" type="text" name="ultimoNome" />
</div>
</form>
</div>
</div>
</div>
<div class="step-pane" id="step3">
<div class="row form-wrapper payment-info">
<div class="col-md-8">
O sistema foi configurado com sucesso! Agora você pode efetuar seu login e começar a usa-lo.
</div>
</div>
</div>
</div>
<div class="wizard-actions">
<button type="button" disabled class="btn-glow primary btn-prev">
<i class="icon-chevron-left"></i> Anterior
</button>
<button type="button" class="btn-glow primary btn-next" data-last="Finish">
Prõximo <i class="icon-chevron-right"></i>
</button>
<button type="button" class="btn-glow success btn-finish">
Faça login no sistema!
</button>
</div>
<div class="alert alert-danger" id="result">
<i class="icon-remove-sign"></i>
</div>
</div>
</div>
</div>
</div>
<!-- end main container -->
My current jquery code is this:
$(function () {
$( "#result" ).hide();
var $wizard = $('#fuelux-wizard'),
$btnPrev = $('.wizard-actions .btn-prev'),
$btnNext = $('.wizard-actions .btn-next'),
$btnFinish = $(".wizard-actions .btn-finish");
$wizard.wizard().on("finished", function(e) {
//
}).on("changed", function(e) {
var step = $wizard.wizard("selectedItem");
$btnNext.removeAttr("disabled");
$btnPrev.removeAttr("disabled");
$btnNext.show();
$btnFinish.hide();
if (step.step === 1) {
$btnPrev.attr("disabled", "disabled");
} else if (step.step === 3) {
$btnNext.hide();
$btnFinish.show();
};
});
$btnPrev.on('click', function() {
$wizard.wizard('previous');
});
$btnNext.on('click', function() {
$wizard.wizard('next');
});
});
My idea is add a new block
.on("--event--", function(e) {
but I don't know which event is triggered between each step (if any). Anyone have sugestions?

Since you're using Bootstrap, just take advantage of the standard tab behavior to make your wizard. Update your html like this:
<div id="pad-wrapper">
<div class="row">
<div class="col-md-12 col-xs-12">
<div id="fuelux-wizard" class="wizard row">
<ul class="nav nav-pills wizard-steps">
<li class="active">
<a href="#step1" data-toggle="tab" >
<span class="step">1</span>
<span class="title">Banco de dados</span>
</a>
</li>
<li>
<a href="#step2" data-toggle="tab" >
<span class="step">2</span>
<span class="title">Dados do administrador</span>
</a>
</li>
<li>
<a href="#step3" data-toggle="tab">
<span class="step">3</span>
<span class="title">Conclusão</span>
</a>
</li>
</ul>
</div>
<div class="step-content tab-content">
<div class="step-pane tab-pane active" id="step1">
<div class="row form-wrapper">
<div class="col-md-8">
<form id="target" method="post" action="">
<div class="field-box">
<label>Máquina (IP):</label>
<input class="form-control" type="text" name="maquina" />
</div>
<div class="field-box">
<label>Usuário:</label>
<input class="form-control" type="text" name="usuario_db" />
</div>
<div class="field-box">
<label>Senha:</label>
<input class="form-control" type="text" name="senha_db" />
</div>
</form>
</div>
</div>
</div>
<div class="step-pane tab-pane" id="step2">
<div class="row form-wrapper">
<div class="col-md-8">
<form id="target2" method="post" action="">
<div class="field-box">
<label>Usuário:</label>
<input class="form-control" type="text" name="usuario" />
</div>
<div class="field-box">
<label>Digite uma senha:</label>
<input class="form-control" type="password" name="senha1" />
</div>
<div class="field-box">
<label>Repita a senha:</label>
<input class="form-control" type="password" name="senha2" />
</div>
<div class="field-box">
<label>E-mail:</label>
<input class="form-control" type="text" name="email" />
</div>
</form>
</div>
</div>
</div>
<div class="step-pane tab-pane" id="step3">
<div class="row form-wrapper payment-info">
<div class="col-md-8">
O sistema foi configurado com sucesso! Agora você pode efetuar seu login e começar a usa-lo.
</div>
</div>
</div>
</div>
<div class="wizard-actions">
<button type="button" disabled class="btn-glow primary btn-prev">
<i class="icon-chevron-left"></i> Anterior
</button>
<button class="btn-glow primary btn-next" data-last="Finish">
Prõximo <i class="icon-chevron-right"></i>
</button>
<button type="button" onclick="" class="btn-glow success btn-finish">
Faça login no sistema!
</button>
</div>
<div class="alert alert-danger" id="result">
<i class="icon-remove-sign"></i>
</div>
</div>
</div>
</div>
Now add some javascript to handle the navigation:
$( document ).ready(function() {
var fnprocessform = function (targetform) {
if (targetform.attr('id') === 'target') {
//do your validation before you move to the next so you can show errors if needed
alert('validating form 1');
//if the form is validated move to the next step
var nextstep = $('.wizard-steps').find('.active').next();
nextstep.find('a').tab('show');
//then submit the form via ajax
//to make sure that the behavior you expect happens
//when you process the form, you probably want to send back an id of the newly created record
//so that if someone clicks back and then next again you don't create two records
//instead you read the id and update the record
}
if (targetform.attr('id') === 'target2') {
//same comments as above
alert('validating form 2');
var nextstep = $('.wizard-steps').find('.active').next();
nextstep.find('a').tab('show');
}
}
$('.wizard-actions .btn-next').on('click', function() {
var formtosubmit = $('.tab-pane.active').find('form');
fnprocessform(formtosubmit);
});
$('.wizard-actions .btn-prev').on('click', function() {
var prevstep = $('.wizard-steps').find('.active').prev();
prevstep.find('a').tab('show');
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if ($('.wizard-steps').find('.active').is(':first-child')) {
$('.wizard-actions .btn-prev').prop('disabled', true);
} else {
$('.wizard-actions .btn-prev').prop('disabled', false);
}
if ($('.wizard-steps').find('.active').is(':last-child')) {
$('.wizard-actions .btn-next').prop('disabled', true);
} else {
$('.wizard-actions .btn-next').prop('disabled', false);
}
})
});
To finish this up, you'll need to add some nice styling, write a click event handler for the nav-pills to prevent them from causing the tabs to show and you need to handle all of your validation and form processing, but this should really get you going. You can make it even cooler by adding a progress bar using the built in progress bars in Bootstrap.

Ok, then I finally solved this question after more tryouts. That's the final code:
$(function () {
$( "#result" ).hide();
var $wizard = $('#fuelux-wizard'),
$btnPrev = $('.wizard-actions .btn-prev'),
$btnNext = $('.wizard-actions .btn-next'),
$btnFinish = $(".wizard-actions .btn-finish");
$wizard.wizard().on("finished", function(e) {
//
}).on("changed", function(e) {
var step = $wizard.wizard("selectedItem");
$btnNext.removeAttr("disabled");
$btnPrev.removeAttr("disabled");
$btnNext.show();
$btnFinish.hide();
if (step.step === 1) {
$btnPrev.attr("disabled", "disabled");
} else if (step.step === 3) {
$btnNext.hide();
$btnFinish.show();
};
});
$btnPrev.on('click', function() {
$wizard.wizard('previous');
});
$btnNext.on('click', function() {
var step = $wizard.wizard("selectedItem");
if(step.step === 1) {
var maquina = $("input[name=maquina]").val();
var usuario = $("input[name=usuario_db]").val();
var senha = $("input[name=senha_db]").val();
$.ajax({
url: "<c:out value="${pageContext.request.contextPath}/instala/createdb"/>",
type: "POST",
data: { maquina : maquina, usuario_db: usuario, senha_db: senha }
}).done(function(data){
if(data === "yes")
$wizard.wizard('next');
});
}
else {
var usuario = $("input[name=usuario]").val();
var senha = $("input[name=senha1]").val();
var pnome = $("input[name=primeiroNome]").val();
var unome = $("input[name=ultimoNome]").val();
$.ajax({
url: "<c:out value="${pageContext.request.contextPath}/instala/createuser"/>",
type: "POST",
data: { usuario : usuario, senha1: senha, primeiroNome: pnome, ultimoNome: unome }
}).done(function(data) {
if(data === "yes")
$wizard.wizard('next');
});
}
});
$btnFinish.on("click", function() {
location.href="<c:out value="${pageContext.request.contextPath}/acesso/login"/>";
});
});

Categories

Resources