转到php中的特定div id

Question

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('&#9745;'),
                    $('#sers').val('&#9745;')
            );

            //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

Answer 1

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>