script in externe file zetten

Status
Niet open voor verdere reacties.

fsasfsas

Gebruiker
Lid geworden
11 sep 2006
Berichten
429
Dag allemaal

zeer tegen mijn principes is ga ik nu vragen naar een stuk code.

Ik ben een website aan het maken en heb daartoe me in verschillende methoden verdiept en heb eindeloos tutorials gekeken om dingen te begrijpen. Ik heb nu het idee dat ik redelijk wat beheers, zij het op lekenniveau. ik ben geen webdeveloper. Nu loop ik tegen een probleem aan waar ik al dagen een oplossing voor probeer te zoeken.

ik wil graag op mijn site twee van die select-option boxen, waarbij de inhoud van de tweede afhangt van de keuze bij de eerste. beiden worden gevuld met opties uit de database waarbij de tweede vulling dus afhangt van de eerste keuze. Veel tutorials gaan over de keuze van bijvoorbeeld eerst land en daarna (uiteraard) afhankelijk van land een tweede keuze uit state. Dat idee.
De keuze-opties zullen uit de database komen dus kunnen niet "hard" in een javascript gezet worden. Die laatste optie heb ik werkend maar dat is dus niet wat het moet worden. Ik ben me aan het verdiepen in AJAX maar ik moet eerlijk zeggen dat ik het lastig vind, omdat ik het eigenlijk "alleen maar" op het niveau wil kennen dat ik het toe kan passen. Ik heb het slechts op 1 plek nodig en ik ben geen webdeveloper, dus het is niet iets waarvan ik denk het nog vele malen te moeten gebruiken.
Ik had, na veel tutorials en veel pogingen, uiteindelijk iets werkend maar helaas werkt dat niet samen met de CSP die ik ook op de site heb staan. En die wil ik er, in verband met de veiligheid, op laten staan.
Veel inleidende woorden voor de volgende twee vragen. De eerste vraag betreft een stuk code dat ik uit een tutorial heb:
PHP:
<html>

<head>
   <script>
      function ajax_post() { // Create our XMLHttpRequest object
         var hr = new XMLHttpRequest(); // Create some variables we need to send to our PHP file
         var url = "my_parse_file.php";
         var fn = document.getElementById("first_name").value;
         var ln = document.getElementById("last_name").value;
         var vars = "firstname=" + fn + "&lastname=" + ln;
         hr.open("POST", url, true); // Set content type header information for sending url encoded variables in the request
         hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Access the onreadystatechange event for the XMLHttpRequest object
         hr.onreadystatechange = function() {
            if (hr.readyState == 4 && hr.status == 200) {
               var return_data = hr.responseText;
               document.getElementById("status").innerHTML = return_data;
            }
         } // Send the data to PHP now... and wait for response to update the status div
         hr.send(vars); // Actually execute the request
         document.getElementById("status").innerHTML = "processing...";
      }
   </script>
</head>

<body>
   <h2>Ajax Post to PHP and Get Return Data</h2> 
   First Name: <input id="first_name" name="first_name" type="text"> 
   <br><br> 
   Last Name: <input id="last_name" name="last_name" type="text"> 
   <br><br> <input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();"> 
   <br><br>
   <div id="status"></div>
</body>

</html>

Dit stuk code gaat zeker niet door de CSP komen, door deze term:
HTML:
onclick="ajax_post();
en het script dat ook in het bestand staat. ik weet dat ik daar een externe file van kan maken maar juist bij deze code is me dat tot nu toe niet gelukt. Ik hoop dat het de "code-moeheid" is maar ik zie het echt niet meer. Kan iemand me hier bij helpen? En dan heel graag concreet. Wat moet ik in hemelsnaam wijzigen om dat script in een aparte js file te krijgen en dan zodanig dat het geaccepteerd wordt door CSP (die ik nogal streng heb staan)?

De tweede vraag is wat algemener. Is dit stuk code veelbelovend? Daar bedoel ik mee dat ik best energie wil wijden om dit aan te passen aan mijn uiteindelijke doel maar ik heb inmiddels drie versies aangepast om na een poos tot de ontdekking te komen dat het niet voldeed. Ik zie er tegenop om dat weer te doen om daarna tot de ontdekking te komen dat dit ook niet gaat werken. of heeft iemand een verwijzing naar de gouden tutorial waarin stap voor stap uitgelegd wordt hoe het moet (en dan dus op een "moderne" manier, want heel veel tutorials die er bestaan werken nog met de aanroep van javascript door de html heen.)
Ik weet dat dit niet doet wat ik uiteindelijk wil, maar ik kan geen enkel stuk code vinden als voorbeeld dat dat wel doet.

groetjes, Anjo
 
Voor wat mijn eerste vraag betreft: toch code-moeheid. Er even niet naar gekeken en vervolgens binnen drie minuten aan de praat. Dagen op zitten worstelen... :confused: Mijn tweede vraag blijft echter overeind. Is het een goed idee om deze code aan te passen voor mijn doel (twee select-inputs, waarbij de tweede dynamisch ingevuld wordt op basis van de eerste code) of weet iemand een goede tutorial op dit gebied (en dan eentje die niet met "oude" methodes werkt want dat slikt CSP niet)?

groetjes, Anjo
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan