CODEWITHSUNDEEP
javascriptphphtmlajax
mctjl_1997
mctjl_1997

Reputation: 163

Bring over php variable through ajax into html tag

So i'd like to auto check the boxes based on the data from my database, whenever i click a table row. I'm currently using an AJAX script for this table row click, however, i can't figure out how to bring over the php variable value onto my main file's php variable and replace the value, from my other php file where i'm performing the AJAX php codes.

this is my main file's check box.

<input type="checkbox" name="skincareinuse[]" value="Lotion" <?php if(in_array("Lotion",$skincareinuse)) { ?> checked="checked" <?php } ?>/>Lotion<br>

this is my other php file where my AJAX script is drawing values from. I've done an explode and stored them in a php variable.

$skincareinuse=explode(",",$row['skincarecurrentlyinuse']);

The problem is that in the php file where my AJAX script is drawing values from, the variable $skincareinuse could not be updated into $skincareinuse on my main php file. Let's say even if i am able to use JSON to bring the value over, how do i go about storing it since JSON is being encoded into javascript? Sorry if I didn't explain it right, please help!

@Iceman, is it possible to run .ajax function in an ajax script?

function showconsultationdata(str) { //face e.g and checkboxes for that date selected.
var xmlhttp;
if (str == "") {
    document.getElementById("txtHint2").innerHTML = "";
    return;
} else { 
    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("txtHint2").innerHTML = xmlhttp.responseText;                                       
          var a = JSON.parse($(xmlhttp.responseText).filter('#arrayoutput').html()); 
          $("textarea#skinconditionremarks").val(a.skinconditionremarks);
          $("textarea#skincareremarks").val(a.skincareremarks);

        $.ajax({
           url: "BAConsultRecordsAJAX.php"
         })
         .done(function(data) {
           console.log(data);
           selectTestAnswer(data.key + "[]", data.value)
         })
         .fail(function() {
           alert("error");
         })

        }
    }
    xmlhttp.open("GET","BAConsultRecordsAJAX.php?q="+str,true);
    xmlhttp.send();
}
}

Upvotes: 1

Views: 307

Answers (1)

Iceman
Iceman

Reputation: 6145

EXAMPLE:

$('#mybutton').click(function() {
  $.ajax({
      //sample json, replace with your data
      url: "http://echo.jsontest.com/key/skincareinuse/value/Lotion"
    })
    //if data retrieval was successfull
    .done(function(data) {
      console.log(data);
      //got data as json from server. NOw lets update the page(DOM).
      selectTestAnswer(data.key + "[]", data.value)
    })
    //if data retrieval was a failure
    .fail(function() {
      alert("error");
    })
});
//a simple function that if called with say with skincareinuse[] and Lotion marks the corresponding checkbox.
var selectTestAnswer = function(chkbox, value) {
  $("[name='" + chkbox + "']").each(function() {
    if ($(this).val() == value)
      $(this).attr('checked', true);
    else
    if ($(this).attr('checked') == true)
      $(this).attr('checked', false);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <input id="myinput" type="checkbox" name="skincareinuse[]" value="Lotion" />Lotion
  <br>
  <input id="myinput" type="checkbox" name="skincareinuse[]" value="Talcum" />Talcum
  <br>
  <script>
  </script>
  <br>
  <br>
  <button id="mybutton">RUN AJAX</button>
  <br>
  <br>this ajax calls this url : "http://echo.jsontest.com/key/skincareinuse/value/Lotion" returns this sample json:
  <pre>
  {
    "value": "Lotion",
    "key": "skincareinuse"
  }
  
  
  
  
  
  </pre>
</body>

</html>

I have demo-ed an example where the ajax reads the data from the server (here a test url) then update (ie. check the boxes) correspondingly.

This an example on how to do updation from AJAX. I suggest you read on how AJAX works.

Upvotes: 1

Related Questions