0

I have following code in HTML

<progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
<h3 id="status">Phase 1 of 3</h3>
<form id="multiphase" onsubmit="return false">
  <div id="phase1">
    First Name: <input id="firstname" name="firstname"><br>
    <span id="stay" name="stay">19</span>
    <button onclick="processPhase1()">Continue</button>
  </div>
  <div id="phase2">
    Gender: <select id="gender" name="gender">
      <option value=""></option>
      <option value="m">Male</option>
      <option value="f">Female</option>
    </select><br>
    <button onclick="processPhase2()">Continue</button>
  </div>
  <div id="phase3">
    Country: <select id="country" name="country">
      <option value="United States">United States</option>
      <option value="India">India</option>
      <option value="United Kingdom">United Kingdom</option>
    </select><br>
    <button onclick="processPhase3()">Continue</button>
  </div>
  <div id="show_all_data">
    First Name: <span id="display_fname"></span> <br>
    Last Name: <span id="display_stay"></span> <br>
    Gender: <span id="display_gender"></span> <br>
    Country: <span id="display_country"></span> <br>
    <button onclick="submitForm()">Submit Data</button>
  </div>
</form>

and javascript

var fname, stay, gender, country;
function _(x){
    return document.getElementById(x);
}
function processPhase1(){
    fname = _("firstname").value;
    stay = _("stay").innerHTML;
    if(fname.length > 2 ){
        _("phase1").style.display = "none";
        _("phase2").style.display = "block";
        _("progressBar").value = 33;
        _("status").innerHTML = "Phase 2 of 3";
    } else {
        alert("Please fill in the fields"); 
    }
}
function processPhase2(){
    gender = _("gender").value;
    if(gender.length > 0){
        _("phase2").style.display = "none";
        _("phase3").style.display = "block";
        _("progressBar").value = 66;
        _("status").innerHTML = "Phase 3 of 3";
    } else {
        alert("Please choose your gender"); 
    }
}
function processPhase3(){
    country = _("country").value;
    if(country.length > 0){
        _("phase3").style.display = "none";
        _("show_all_data").style.display = "block";
        _("display_fname").innerHTML = fname;
        _("display_stay").innerHTML = stay;
        _("display_gender").innerHTML = gender;
        _("display_country").innerHTML = country;
        _("progressBar").value = 100;
        _("status").innerHTML = "Data Overview";
    } else {
        alert("Please choose your country");    
    }
}
function submitForm(){
    _("multiphase").method = "post";
    _("multiphase").action = "my_parser.php";
    _("multiphase").submit();
}

and finally my_parser.PHP file

<?php
//if(isset($_POST['fname'])){
    echo $_POST['fname']."<br>";
    echo $_POST['stay']."<br>";
    echo $_POST['gender']."<br>";
    echo $_POST['country']."<br>";
    
    //}
?>

As you can see i've comment out" if(isset($_POST['fname']))".with this comment i receive error " Undefined index: fname in my_parser.php and also Undefined index: stay in my_parser.php.. But when i delete that comment i dont receiove any results,just while screen..

can anyone can explain me whats wrong am i doing wrong??

andrew niewiem
  • 15
  • 2
  • Those indexes are undefined because there are no form elements in the HTML with those `name` values, so there are no values in the `$_POST` array with those keys. – David Apr 05 '21 at 20:06
  • there is name tag in each element..could you point me to right direction?thank you – andrew niewiem Apr 05 '21 at 20:10
  • There is no element with `name="fname"` anywhere in the HTML shown. There is an element with `name="stay"`, but that element is a `` which is not a form value. Only form elements (inputs, selects, textareas, etc.) have values which are sent to the server. – David Apr 05 '21 at 20:13
  • I think that is the problem too,cos i receive values from (input,select),,but how can i receive value from span?? please help me.im new in php – andrew niewiem Apr 05 '21 at 20:16
  • 1
    You don’t receive a value from a span because a span has no value. Use an input. You can for example display data in a span but include that data in an input of type=“hidden” to post its value to the server. – David Apr 05 '21 at 20:20
  • Thank you so much for this help.i didn't know that you cant send SPAN to server,i was think its possible to send all type of elements..silly me,, – andrew niewiem Apr 05 '21 at 20:28

0 Answers0