I'm trying to make an application form that will not have to be completed all in one go. I managed to get it to look and act how I want but with what I'm trying now I have no luck. So, on my index page I will have a link with a specific name to that form.
**index.php**
if (form has been started)
{
<a href="form.php?go_to_step">Continue the test</a>
}
else
{
<a href="form.php">Start the test</a>
}
The app form looks like this
**form.php**
<script>my.js</script>
<div id="main">
<form>
<div id="step1">
<input type=sumbmit step 1>
</div>
<div id="step2">
<input type=sumbmit step 2>
</div>
<div id="step3">
<input type=sumbmit step 3>
</div>
.
.
.
<div id="step15">
<input type=sumbmit step 15>
</div>
</form>
</div>
My.js
step1.click.function
{
check if field are not empty
}
if (no error)
{
use other php file to insert into db
step1.slideup
step2.slidedown
}
step2.click.function
{
check if field are not empty
}
if (no error)
{
use other php file to insert into db
step2.slideup
step3.slidedown
}
.
.
.
On the main page with the form only one div is shown at one time, the rest are hidden. On clicking Next it slides up with the next div and the inputed values are entered into a database (no web page refreshing involved). What I need to do now is that if the form wasn't completed, to have a link on the index page to continue where it was left. I tried
form.php#div-id-name
but it still shows the first div
Update: If I remove the CSS style use to shape and hide divs on the page, using
form.php#div-id-name
will put the div with div-id-name on top of the page
Update with the js (the final js is alot bigger but is just copy paste for each step)
$(function(){
//original field values
var field_values = {
//id : value
'plaque' : 'plaque',
'fwd_exco' : 'fwd_exco',
'bk_exco' : 'bk_exco',
'p_serial' : 'p_serial',
'p12' : 'p12',
'n12' : 'n12',
'p5' : 'p5' ,
'pcap' : 'pcap',
'srev' : 'srev' ,
'sers' : 'sers' ,
'serc' : 'serc'
};
//inputfocus
$('input#plaque').inputfocus({ value: field_values[''] });
$('input#fwd_exco').inputfocus({ value: field_values[''] });
$('input#bk_exco').inputfocus({ value: field_values[''] });
$('input#p_serial').inputfocus({ value: field_values[''] });
$('input#p12').inputfocus({ value: field_values[''] });
$('input#n12').inputfocus({ value: field_values[''] });
$('input#p5').inputfocus({ value: field_values[''] });
$('input#pcap').inputfocus({ value: field_values[''] });
$('input#srev').inputfocus({ value: field_values[''] });
$('input#sers').inputfocus({ value: field_values[''] });
$('input#serc').inputfocus({ value: field_values[''] });
//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');
//step_5_1
$('form').submit(function(){ return false; });
$('#submit_5_1').click(function(){
//remove classes
$('#step_5_1 input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var fields = $('#step_5_1 input[type=text]');
var error = 0;
fields.each(function(){
var nospace = $(this).val();
var value = $.trim(nospace);
if( value.length<1 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
var v511 = $ ('#plaque').val();
var v512 = $ ('#fwd_exco').val();
var v513 = $ ('#bk_exco').val();
var v514 = $ ('#p_serial').val();
$.post ('sws_test_insert.php?a=p51', { v1:v511, v2:v512, v3:v513, v4:v514 });
//update progress bar
$('#progress_text').html('2.65% Complete');
$('#progress').css('width','9px');
//slide steps
$('#step_5_1').slideUp();
$('#step_5_2').slideDown();
} else return false;
});
//step_5_2
$('form').submit(function(){ return false; });
$('#submit_5_2').click(function(){
//remove classes
$('#step_5_2 input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var fields = $('#step_5_2 input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
var p12 = $ ('#p12').val();
var n12 = $ ('#n12').val();
var p5 = $ ('#p5').val();
$.post ('sws_test_insert.php?a=p52', { v11:p12, v21:n12, v31:p5 });
//update progress bar
$('#progress_text').html('5.30% Complete');
$('#progress').css('width','18px');
//slide steps
$('#step_5_2').slideUp();
$('#step_5_3').slideDown();
} else return false;
});
//step_5_3
$('form').submit(function(){ return false; });
$('#submit_5_3').click(function(){
//remove classes
$('#step_5_3 input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var fields = $('#step_5_3 input[type=text]');
var chkStatus1 = document.getElementById("pcap");
var chkStatus2 = document.getElementById("sers");
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')]) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
//fields.each(function(){
// if( chkStatus1.checked != true || chkStatus2.checked != true) {
// $(this).addClass('error');
// $(this).effect("shake", { times:3 }, 50);
// }
//});
if(!error) {
if( chkStatus1.checked != true || chkStatus2.checked != true) {
$('#step_5_3 input[type=checkbox]').each(function(){
$(this).removeClass('valid').addClass('error');
$(this).effect("shake", { times:3 }, 50);
});
return false;
} else {
var fields1 = new Array(
//id : value
$('#pcap').val('☑'),
$('#sers').val('☑')
);
//update progress bar
$('#progress_text').html('33% Complete');
$('#progress').css('width','27px');
//slide steps
$('#step_5_3').slideUp();
$('#step_5_4').slideDown();
}
} else return false;
//prepare the fourth step
var fields = new Array(
$('#plaque').val(),
$('#fwd_exco').val(),
$('#bk_exco').val(),
$('#p_serial').val(),
$('#p12').val(),
$('#n12').val(),
$('#p5').val(),
$('#pcap').val(),
$('#srev').val(),
$('#sers').val(),
$('#serc').val()
);
var tr = $('#step_5_4 tr');
tr.each(function(){
//alert( fields[$(this).index()] )
$(this).children('td:nth-child(2)').html(fields[$(this).index()]);
});
});
/*
$('#submit_5_4').click(function(){
//update progress bar
$('#progress_text').html('100% Complete');
$('#progress').css('width','339px');
//prepare the fourth step
var fields = new Array(
$('#plaque').val(),
$('#fwd_exco').val(),
$('#bk_exco').val(),
$('#p_serial').val(),
$('#p12').val(),
$('#n12').val(),
$('#p5').val(),
$('#pcap').val(),
$('#srev').val(),
$('#sers').val(),
$('#serc').val()
);
var tr = $('#step_5_4 tr');
tr.each(function(){
//alert( fields[$(this).index()] )
$(this).children('td:nth-child(2)').html(fields[$(this).index()]);
});
//slide steps
$('#step_5_3').slideUp();
$('#step_5_4').slideDown();
});
*/
$('#step_5_4').click(function(){
//send information to server
alert('Data sent');
});
});
I tried adding this in the js file
<?php
if(isset($_GET['st']))
{
$x =$_GET['st'];
for ($i=1; $i<=$x; $i++)
{
echo "$(\"#step_5_".$i."\").children().attr(\"disabled\",\"disabled\");";
}
}
?>
but when I go to link
form.php?st=Number
still the first div is shown
Use the $_GET['step'] to obtain the step. Then process this in jQuery load event
I like to do this to make sure there is a GET query:
if(isset($_GET['step'])) {
// allow to set the variable
}
JS:
<script>
$(function () {
var step = <?php echo $_GET['step']; ?>;
doSomething(step);
});
</script>
Combined:
<script>
$(function () {
var step = <?php
if (isset($_GET['step'])) {
echo $_GET['step'];
}
?>;
doSomething(step);
});
</script>
You'd have to read the hash-tag with JavaScript (no can do with PHP, sorry), then deactivate all divs other than the one with the right ID.
If you do want it from the PHP script you would have to save the information of the last step in a file or database after completing a step or use ?step=step8 instead - or ?step=8#step8
So I finaly managed to make my page to go to a specific div in my page. Because I'm hiding all, apart from the one div that I need, the usual link
url_link#div_id
doesn't work. What I did was this. In the main page I have this:
if(isset($_GET['step']))
{
$s = $_GET['step'];
echo "<input type=\"hidden\" name=\"step\" id=\"step\" value=\"".$s."\"/>";
}
else {$s = 0;}
and in the JS file this:
var field_values = {
//id : value
//other values
'step' : 'step'
}
if ($('#step').val() != 0) {
var j=$('#step').val();
for (var i=1, limit=j;i<j;i++){
$('#step_5_'+i).slideUp();
}
$('#step_5_'+j).slideDown();
}
and now when you have a link like this
url_link?step=number
it wil go to that specific div.