Completare Input text cu JS in functie de Select cu date din MySQL

[tycyssg]

Intai Salutari , La multi Ani ! Si un an nou fericit la toata lumea !

Am si eu o problema, si nu prea stiu sa ii dau de cap !

Am un select din DB ce creeaza un form de select in functie de campurile ID si mai jos alte 3 input text ce urmeaza a fi completate.De fapt acest form este destinat update-ului acelor informatii si mi-ar fi mai usor acele campuri vor avea "value" informatiile care deja sunt in db pentru campul respectiv.

Cum as putea face asta , intai Imi trebuie un script Js pentru formul de select.

Cod: Selectaţi tot

$sql = "SELECT * FROM welcome";
$rows = $conn->sqlExec($sql);
$nr_row = $conn->num_rows;

$pag .='
    <span class="styleform"><h4>Edit About Section !</h4></span>
    <br />
 <script type="text/javascript" src="checkjs/welcome.js"></script>
  <form method="post" action="aboutsend.php" onsubmit="return checkForm(this)";>
  <table  border="0" cellspacing="0" cellpadding="1" style="border:1px solid #888888; padding:1px;">
   <tr><td><span class="styleform">Select Paragraph:</span></td><td>
   <select name="paragraphs">
   <option>Select Paragraph</option>
   ';
    foreach($rows as $row) {
  $first = $row['sttitle'];
  $secont = $row['sectitle'];
  $contents = $row['content'];    
  $pag .='<option value="'.$row['id'].'" >Paragraph '.$row['id'].'</option>'; // Aici se creeaza selectul 
}
$pag .=' 
  </select>
  </td></tr>
  <tr><td><span class="styleform">Principal Title About Us :</span></td><td><input type="text" name="sttitle" id="sttitle" size="50" value="'.$first.'" ></td></tr>
  <tr><td><span class="styleform">Secont Title About Us :</span></td><td><input type="text" name="sectitle" id="sectitle" size="50" ></td></tr>
  <tr><td><span class="styleform">Content About Us :</span></td>
  <td><textarea name="content" id="content" rows="7" cols="52"></textarea></td></tr>
  <tr><td><span class="styleform">Edit About Us:</span></td><td><input type="submit" name="updwelcome" value="Edit Info"></td></tr>
  </table>
    </form>

Si in functie de select , valoarea lor sa fie afisata.
Multumesc mult !

Salut
Pentru ce vrei trebuie sa stii bine sa lucrezi cu Ajax, javascript si date in format json.
Ideea e asa:
1. La <select> se aplica o functie Ajax care preia valoarea selectata si o trimite la un fisier php.
2. Scriptul php din acel fisier preia valoarea, face cu ea select in mysql si returneaza valorile pentru acele campuri text intr-un array convertit in format json.
3. Functia Ajax primeste acel json, preia datele si adauga pe fiecare in campul text corespunzator.

Array-ul cu datele din mysql pt. json returnat din php ar trebui sa fie cam asa:

Cod: Selectaţi tot

$jsn = array(
  'sttitle'=> $row['sttitle'],
  'sectitle'=> $row['sectitle'],
  'content'=> $row['content']
);
echo json_encode($jsn);

Iar <select>-ul cu acele campuri text si codul javascript ar fi asa:

Cod: Selectaţi tot

<select id="paragraphs" name="paragraphs">
 <option>Select Paragraph</option>
</select>
<input type="text" name="sttitle" id="sttitle" size="50" />
<input type="text" name="sectitle" id="sectitle" size="50" />
<textarea name="content" id="content" rows="7" cols="52"></textarea>


<script>
// sends data to a php file, via POST, and displays the received answer
function ajaxrequest(sel) {
  var cerere_http = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");		// XMLHttpRequest object

  // create pairs index=value with data that must be sent to php
  var  datas = 'id='+ sel.value;

  cerere_http.open("POST", 'file.php', true);			// Creaza cererea

  // send datas to php via POST
  cerere_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  cerere_http.send(datas);

  // if response is received completly 
  cerere_http.onreadystatechange = function() {
    if (cerere_http.readyState == 4) {
      var jsn = JSON.parse(cerere_http.responseText);  // convert the received json into an object for javascript

      // add data in text fields
      document.getElementById('sttitle').value = jsn['sttitle'];
      document.getElementById('sectitle').value = jsn['sectitle'];
      document.getElementById('content').value = jsn['content'];
    }
  }
}

// register change event to #paragraphs to call ajaxrequest()
document.getElementById('paragraphs').addEventListener('change', function() { ajaxrequest(this)});
</script>

Daca nu te descurci sa implementezi codurile de aici, studiaza cursurile Ajax si JavaScript de pe site.