remember selection of drop down menu using ajax with php

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • rigaconnect
    New Member
    • Dec 2012
    • 6
    #1

    remember selection of drop down menu using ajax with php

    I have drop down menu.
    If visitor selects certain option from drop down menu I need to show certain content (without page reload; so I need to use Ajax).

    At the same time I need save selection of drop down menu after visitor click on Submit button and page reloads.

    Below is code.
    The first menu remembers selection but does not display content (Ajax does not work).

    The second menu only Ajax works, but does not remember selection.

    And the third menu remember selection, but something wrong with Ajax.

    Could someone advice what to change to get Ajax work and remember selection after page reload?

    file.php
    Code:
    <head>

<script type="text/javascript">
function showData1(str)
{
if (str=="")
  {
  document.getElementById("showData1").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("showData1").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","__gethint.php?q1="+str,true);
xmlhttp.send();
}
</script>


<script type="text/javascript">
function showData2(str)
{
if (str=="")
  {
  document.getElementById("showData2").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("showData2").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","__gethint.php?q2="+str,true);
xmlhttp.send();
}
</script>


<script type="text/javascript">
function showData3(str)
{
if (str=="")
  {
  document.getElementById("showData3").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("showData3").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","__gethint.php?q3="+str,true);
xmlhttp.send();
}
</script>


</head>

<a name="calculate"></a>

<form method="post" enctype="multipart/form-data" action="<?php echo filter_var($_SERVER['PHP_SELF'], FILTER_SANITIZE_STRING); ?>#calculate" name="quote">



<div id="calculator-left">Salary book
<?php $options = array( 1=>'is submitted', 'is not submitted' ); $showData1 = $_REQUEST['showData1']; ?>
<select name="showData1" onChange="showData1(this.value) style="margin-bottom:3px; width:100px">
<?php foreach ( $options as $i=>$opt ) : ?>
<option value="<?php echo $i?>" <?php echo $i == $showData1 ? 'selected' : ''?>><?php echo $opt ?></option>     <?php endforeach; ?> </select>
</div>

<div id="showData1">Use the select box to change page content</div>



<div class="clear">&nbsp;</div> 


<div id="calculator-left">

<select onChange="showData2(this.value)">
<option value="">Select page Content:</option>
<option value="1">Page Content 1</option>
<option value="2">Page Content 2</option>
<option value="3">Page Content 3</option>
<option value="4">Page Content 4</option>
</select>

</div>

<div id="showData2">Use the select box to change page content</div>


<div class="clear">&nbsp;</div> 

<div id="calculator-left">

<select name="town" onChange="showData3(this.value)">

<?php
$towns = array('ipswich','bury');
foreach($towns as $town){
$selected = (isset($_POST['town'])&&$_POST['town']==$town)? '
selected="selected"':'';
print("<option value=\"$town\"$selected>$town</option>");
}
?>

</select>

</div>

<div id="showData3">Use the select box to change page content</div>


<div class="clear">&nbsp;</div> 




<input type = "submit" value = "Calculate"></input>




</form>


</body>
</html>
    file
    __gethint.php

    Code:
    <?php

$q1=$_GET["q1"];

if ($q1==1) {echo "Page Content 1q1 would be shown";}
if ($q1==2) {echo "Page Content 2q1 would be shown";}
if ($q1==3) {echo "Page Content 3q1 would be shown";}
if ($q1==4) {echo "Page Content 4q1 would be shown";}



$q=$_GET["q2"];

if ($q2==1) {echo "Page Content 1q2 would be shown";}
if ($q2==2) {echo "Page Content 2q2 would be shown";}
if ($q2==3) {echo "Page Content 3q2 would be shown";}
if ($q2==4) {echo "Page Content 4q2 would be shown";}


$q=$_GET["q3"];

if ($q3==1) {echo "Page Content 1q3 would be shown";}
if ($q3==2) {echo "Page Content 2q3 would be shown";}
if ($q3==3) {echo "Page Content 3q3 would be shown";}
if ($q3==4) {echo "Page Content 4q3 would be shown";}



?>
    Tags: None
    • Rabbit
      Recognized Expert MVP
      • Jan 2007
      • 12517
      #2
      You have two options.

      1) Save the value in a cookie.
      2) Save the value in a database on your server.

        Comment

        • rigaconnect
          New Member
          • Dec 2012
          • 6
          #3
          Now the aim is that after page reload <div id="showData2" > remembers chosen value (text). At the moment it displays default value...

          file.php
          Code:
          <head>
<script type="text/javascript">
function showData2(str)
{
if (str=="")
  {
  document.getElementById("showData2").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("showData2").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","__gethint.php?q2="+str,true);
xmlhttp.send();
}
</script>

<script type="text/javascript">

	var saveString = "";

	function getCookie(isName){

		var cookieStr = document.cookie;
		var startSlice = cookieStr.indexOf(isName+"=");
		if (startSlice == -1){return false}
		var endSlice = cookieStr.indexOf(";",startSlice+1)
		if (endSlice == -1){endSlice = cookieStr.length}
		var isData = cookieStr.substring(startSlice,endSlice)
		var isValue = isData.substring(isData.indexOf("=")+1,isData.length);
		return isValue;
	}

	function saveForm(){

		var saveString = "";
		var nText = document.getElementsByTagName('input');
		for (i=0; i<nText.length-1; i++ )
			{saveString += nText[i].value+":"}
		var isIdx = document.forms[0]['report'].selectedIndex;
		saveString = saveString+isIdx;
		document.cookie = "formData="+saveString+"";
	}

	function restoreValues(){

		var nValues = getCookie('formData');
		var n = 0;
		if (nValues)
			{
			 //alert(nValues)
			 var isIndex = nValues.substring(nValues.length-1,nValues.length);
			 document.forms[0]['report'].selectedIndex = isIndex;
			 var nForm = document.forms[0];
			 nValues = nValues.substring(0,nValues.length-1);
			 var isText = nValues.split(":");
			 	for (i=0; i<nForm.length; i++)
					{
					 if (nForm[i].type == "text")
						{nForm[i].value = isText[n++]}
					}
			}
		}

		onload=restoreValues;
		onbeforeunload=saveForm;

</script>
 
</head>
 
<body>
 
<a name="calculate"></a>
 
<form method="post" enctype="multipart/form-data" action="<?php echo filter_var($_SERVER['PHP_SELF'], FILTER_SANITIZE_STRING); ?>#calculate" name="quote">

<div id="calculator-left">
<select name="report" onChange="showData2(this.value);">
<option value="">Select page Content:</option>
<option value="1">Page Content 1</option>
<option value="2">Page Content 2</option>
<option value="3">Page Content 3</option>
<option value="4">Page Content 4</option>
</select>     
</div>
 
<div id="showData2">Use the select box to change page content</div>
 
<div class="clear">&nbsp;</div> 
 
<input type = "submit" value = "Calculate"></input>
 
</form>
 
</body>
</html>
          file __gethint.php
          Code:
          <?php
 
 
 
 
$q=$_GET["q2"];
 
if ($q2==1) {echo "Page Content 1q2 would be shown";}
if ($q2==2) {echo "Page Content 2q2 would be shown";}
if ($q2==3) {echo "Page Content 3q2 would be shown";}
if ($q2==4) {echo "Page Content 4q2 would be shown";}
 
 
 
?>

            Comment

            • Rabbit
              Recognized Expert MVP
              • Jan 2007
              • 12517
              #4
              Is there a question in there somewhere? Or are you posting the code that worked for you?

                Comment

                • rigaconnect
                  New Member
                  • Dec 2012
                  • 6
                  #5
                  Question is
                  How to get the aim is that after page reload <div id="showData2" > remembers chosen value (text)? At the moment it displays default value...

                    Comment

                    • Rabbit
                      Recognized Expert MVP
                      • Jan 2007
                      • 12517
                      #6
                      I see code in there to get, save, and restore cookies. What's not working? Are there errors? What are the errors?

                        Comment

                        • rigaconnect
                          New Member
                          • Dec 2012
                          • 6
                          #7
                          By default (when open page) I get displayed this
                          <div id="showData2"> Use the select box to change page content</div>

                          If from drop down menu I choose for example <option value="1">Page Content 1</option>, I get displayed this
                          if ($q2==1) {echo "Page Content 1q2 would be shown";}

                          So far everything is ok.

                          But if I press button Submit, page reloads. And after page reload again I get displayed
                          <div id="showData2"> Use the select box to change page content</div>

                          But I need to retain content before page reload (Page Content 1q2 would be shown). How to get it...? Need to change something, but I have almost no knowledges in javascript....
                          Last edited by acoder; Dec 31 '12, 12:41 AM. Reason: Some inline code tags

                            Comment

                            • Rabbit
                              Recognized Expert MVP
                              • Jan 2007
                              • 12517
                              #8
                              If you have no knowledge in javascript, you'll probably want to learn it before taking on a job of this size.

                                Comment

                                Previous template Next
                                Working...