Variabel in php uit javascript
Hoe zet ik dit getal nu om in een variabel?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
function favsports() {
var mylist=document.getElementById("myList");
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].value;
}
</script>
<?php
echo '<form>';
echo '<select size="10" id="myList" onchange="favsports()">';
echo '<option value="1">Soccer</option>';
echo '<option value="2">Cricket</option>';
echo '<option value="3">Tennis</option>';
echo '</select>';
echo '<input type="text" size="20" id="favorite">';
echo '</form>';
?>
function favsports() {
var mylist=document.getElementById("myList");
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].value;
}
</script>
<?php
echo '<form>';
echo '<select size="10" id="myList" onchange="favsports()">';
echo '<option value="1">Soccer</option>';
echo '<option value="2">Cricket</option>';
echo '<option value="3">Tennis</option>';
echo '</select>';
echo '<input type="text" size="20" id="favorite">';
echo '</form>';
?>
Graag advies.
Edit:
Ik heb de code tussen code-tags geplaatst.
Zie ook de opmaakcodes in de Veelgestelde Vragen.
Zie ook de opmaakcodes in de Veelgestelde Vragen.
Gewijzigd op 05/03/2020 14:51:28 door - Ariën -
Als ik een goede tip mag geven, dan kan je die echo-put aan lijnen voorkomen door de HTML buiten PHP tags te laten.
Ik wil een makkelijker alternatief, dan de constructie in form met submit.
Een eenvoudig Javascriptje levert mij de waarde van mijn selectie.
Met die waarde wil ik verder.
Bijvoorbeeld de opties $waarde = "favorite" of $waarde = id werken niet.
Mijn vraag is of er een andere manier is om de variabel $waarde te 'vullen' met de waarde die ik zie in <input type="text" size="20" id="favorite">
Alvast mijn dank voor het antwoord.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form>
<select size="10" id="myList">';
<option value="1">Soccer</option>';
<option value="2">Cricket</option>';
<option value="3">Tennis</option>';
</select>
<input type="text" size="20" id="favorite">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(function() {
$('#myList').on('change', function() {
$.post('ajax_request.php', {myList : this.value})
.done(function(data) {
$('#favorite').val(data);
});
});
});
</script>
<select size="10" id="myList">';
<option value="1">Soccer</option>';
<option value="2">Cricket</option>';
<option value="3">Tennis</option>';
</select>
<input type="text" size="20" id="favorite">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(function() {
$('#myList').on('change', function() {
$.post('ajax_request.php', {myList : this.value})
.done(function(data) {
$('#favorite').val(data);
});
});
});
</script>
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
// ajax_request.php
if($_SERVER['REQUEST_METHOD'] == "POST") {
if(isset($_POST['myList'])) {
echo htmlspecialchars($_POST['myList']);
}
}
?>
// ajax_request.php
if($_SERVER['REQUEST_METHOD'] == "POST") {
if(isset($_POST['myList'])) {
echo htmlspecialchars($_POST['myList']);
}
}
?>
In het php deel zou dan de variabel $_POST['myList'] de waarde van de selectie (value) worden weergegeven.
Ik heb het zo overgenomen, maar deze variabel geeft geen waarde weer.
Heb ik hier iets overgeslagen of is het geheel niet compleet?
this.value wordt verstuurd naar ajax_request.php en weer teruggestuurd. De variabele this.value / $_POST['myList'] zit in data (of eigenlijk zit hier alle uitvoer in van ajax_request.php). Je kunt het ook zien door console.log te gebruiken icm developers toolbar (F12)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form>
<select size="10" id="myList">';
<option value="1">Soccer</option>';
<option value="2">Cricket</option>';
<option value="3">Tennis</option>';
</select>
<input type="text" size="20" id="favorite">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(function() {
$('#myList').on('change', function() {
$.post('ajax_request.php', {myList : this.value})
.done(function(data) {
$('#favorite').val(data);
console.log('Deze waarde heb je geselecteerd: ' + data);
});
});
});
</script>
<select size="10" id="myList">';
<option value="1">Soccer</option>';
<option value="2">Cricket</option>';
<option value="3">Tennis</option>';
</select>
<input type="text" size="20" id="favorite">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(function() {
$('#myList').on('change', function() {
$.post('ajax_request.php', {myList : this.value})
.done(function(data) {
$('#favorite').val(data);
console.log('Deze waarde heb je geselecteerd: ' + data);
});
});
});
</script>
Druk F12, kijk in het 'console' tabblad en selecteer een item.
Ik weet nog steeds niet wat je precies wil, maar in ajax_request.php zou je bijv de variabele kunnen opslaan, controleren, of wat dan ook.
<form method="POST" action="--WEBBOT-SELF--">
<p><select size="5" name="D1">
<option value="1">Soccer</option>
<option value="2">Cricket</option>
<option value="3">Tennis</option>
</select></p>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
Aanvankelijk probeerde ik het met een Javascriptje en kreeg met <input type="text" size="20" id="favorite"> wel de value te zien, maar wist niet hoe die value om moest zetten in een variabel voor het zoeken in de database.
Jouw opzet heb ik samen met het stukje php online gezet om uit te proberen en in het console lees ik "Failed to load resource.
Het tijdelijke adres is: http://www.jocotravel.nl/_sub/mee_bezig.php
Ik volg niet helemaal wat het nut is van JavaScript in dit verhaal.
Toevoeging op 05/03/2020 21:32:18:
Als ik hier op dit forum kijk naar de lijst van forum-berichten kan ik toch ook op een item klikken zonder zonder mijn keuze te hoeven bevestigen. Zoiets zoek ik.
Overigens bekruipt mijn gevoelens dat je Frontpage 2000 gebruikt? Want ik zie een hoop onlogische namen, zoals B1, B2, D1 en een oeroude --WEBBOT_SELF--. Als dit zo is dan kan ik je vertellen dat er inmiddels al een hoop betere programma's zijn dan FrontPage.
Gewijzigd op 05/03/2020 22:16:59 door - Ariën -
Waar het voor nodig is en of ik met een oeroude versie frontpage werk.
Het lijkt me dat mijn vraag duidelijk is.'
Ik wil de mogelijkheid om gebruiksvriendelijk informatie te kunnen weergeven vanuit een lijst van items
Een voorbeeldje:
links: rechts:
voetbal Voetbal is een sport die door
tennis twee elftallen en bal wordt gespeeld.
basketbal
je klikt op tennis en rechts volgt info over die sport.
etc. etc.
Als ik ergens anders moet zijn zeg me dan waar wel.
Ik begon hier omdat ik dacht dat mijn vraag kon oplossen met Javascript.
Als het anders kan, graag een suggestie.
Toevoeging op 05/03/2020 22:43:23:
En nou liever niet vragen of ik niet in vissen ben geïnteresseerd.
Over je probleem:
Ik neem aan dat je dus een multiple-selectbox hebt waar de sporten in staan, en dat je daarnaast de uitleg erover ziet, zodra je iets selecteert? Want dat doet je code uit de beginpost toch al?
PS: Toevallig heb ik vandaag een aquarium besteld ;-)
Gewijzigd op 05/03/2020 22:52:58 door - Ariën -
In ajax_request.php maak je een database connectie en haal je de informatie op.
Als je meer informatie wilt weergeven kan je dit ook in json teruggeven. json_encode($_POST['myList']) en in jquery gebruik je dan dataType json of parseJson. Je vind wel een hoop voorbeelden op 't web.
EDIT:
Over je voorbeeld. Je vergeet het belangrijkste, de ajax_request.php.
"ajax_request.php:1 Failed to load resource: the server responded with a status of 404 (Not Found)"
Toevoeging op 06/03/2020 11:49:15:
Voorbeeldje met wat meer data
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form>
<select size="10" id="myList">';
<option value="1">Soccer</option>';
<option value="2">Cricket</option>';
<option value="3">Tennis</option>';
</select>
<input type="text" size="20" id="favorite">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(function() {
$('#myList').on('change', function() {
$.post('ajax_request.php', {myList : this.value})
.done(function(data) {
var obj = JSON.parse(data);
$('#favorite').val(obj.info);
// Of als je meerdere data hebt kun je een loop gebruiken
// $.each(JSON.parse(data), function(i, item) {
// $('#favorite').val(item);
// });
});
});
});
</script>
<select size="10" id="myList">';
<option value="1">Soccer</option>';
<option value="2">Cricket</option>';
<option value="3">Tennis</option>';
</select>
<input type="text" size="20" id="favorite">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(function() {
$('#myList').on('change', function() {
$.post('ajax_request.php', {myList : this.value})
.done(function(data) {
var obj = JSON.parse(data);
$('#favorite').val(obj.info);
// Of als je meerdere data hebt kun je een loop gebruiken
// $.each(JSON.parse(data), function(i, item) {
// $('#favorite').val(item);
// });
});
});
});
</script>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
// ajax_request.php
if($_SERVER['REQUEST_METHOD'] == "POST") {
if(isset($_POST['myList']) && is_numeric($_POST['myList'])) {
// De volgende data kun je uit een database halen
// SELECT info WHERE id = $_POST['myList']
$array = array(
array('info'=>'Info over voetbal'),
array('info'=>'Info over cricket'),
array('info'=>'Info over tennis'),
);
if(isset($array[$_POST['myList']-1])) {
echo json_encode($array[$_POST['myList']-1]);
}
}
}
?>
// ajax_request.php
if($_SERVER['REQUEST_METHOD'] == "POST") {
if(isset($_POST['myList']) && is_numeric($_POST['myList'])) {
// De volgende data kun je uit een database halen
// SELECT info WHERE id = $_POST['myList']
$array = array(
array('info'=>'Info over voetbal'),
array('info'=>'Info over cricket'),
array('info'=>'Info over tennis'),
);
if(isset($array[$_POST['myList']-1])) {
echo json_encode($array[$_POST['myList']-1]);
}
}
}
?>
Ik weet niet hoe je kennis is, maar als je vragen erover hebt, stel ze gerust.
Gewijzigd op 06/03/2020 06:30:58 door Michael -
Ik snap het nog niet, maar het is leuk om verder te bestuderen.
Wat ik nu wil is de value uit select, in dit voorbeeldje 1, 2 en 3 bij resp. Soccer, Cricket en Tennis.
Deze waarde kan ik dan inderdaad gebruiken in 'SELECT info WHERE id = $_POST['myList']'.
Vordering: http://www.jocotravel.nl/_sub/mee_bezig.php
Dan kan je daaraan een query toevoegen aan het PHP-script, welke de keuze vermoedelijk in de database moet opslaan.
Let er wel op dat je deze $_POST-waarde met mysqli_real_escape_string(...) escaped.
Gewijzigd op 06/03/2020 13:10:51 door - Ariën -
Ik moet nog zien te achterhalen hoe ik de waarde van de value uit: <option value="1">Soccer</option>'; te voorschijn tover.
Het gaat vooruit.
Ook met je vissenkom? ;-)
In $_POST['myList'] zit de waarde die er gekozen is. Dus escape deze waarde met mysqli_real_escape_string en gebruik die in je INSERT-query.
het is natuurlijk mooi als je in het geval van een mislukte query dit teruggeeft:
Code (php)
1
array('error'=>'query_problem');
Dan kan je in je Javascript dit weer opvissen door de waarde van error te vergelijken met query_problem, en aan je gebruiker melden dat er 'een fout is bij het invoegen van de data'.
Gewijzigd op 06/03/2020 13:57:56 door - Ariën -
Chris Martinus op 05/03/2020 21:29:29:
Ik ben in voor iedere oplossing en niet gehecht aan Javascript. Waar ik vanaf wil is om ieder itemkeuze te bevestigen met Submit. Dat moet toch makkelijker kunnen?
Hm, maar waarom maak je dan een roundtrip naar je server via AJAX?
Hierover verwonder ik mij altijd - op dit forum wordt altijd zo snel een technische oplossingsrichting ingeslagen, en hiermee is een topicstarter dan mogelijk geholpen met zijn directe probleem, maar dit is lang niet altijd een optimale oplossing.
Ik bedoel, laten we het eens hebben over zoekmachines. Is het zaak dat deze pagina's ook geïndexeerd worden enzo? Bij mijn weten gaan zoekmachines geen formulieren submitten waarachter content zit verscholen.
Wat nu als je alle content gewoon in de pagina stopt, en deze verschuilt achter onzichtbare divjes. Vervolgens maak je hier tabjes van waar iemand op kan klikken waarmee de bijbehorende content getoond (en de rest van de content verborgen) wordt.
Hiermee sla je (ten minste) drie vliegen in één klap:
- het geeft invulling aan de wens van de topicstarter
- het scheelt de gebruiker een muisklik en voor hem/haar ziet het er gewoon uit alsof ie door de website navigeert
- geen negatieve penalty qua zoekmachineoptimalisatie
Een alternatief is dat je hier gewoon aparte pagina's van maakt die dynamisch worden opgebouwd. Het enige wat dan in wezen verschilt is de "content" van de knop waar je op klikt, de rest van de code voor pagina-opbouw wordt gewoon hergebruikt. En aan deze pagina's zou je ook aparte URLs, titels en metadata kunnen geven, die de zoekmachine nog een extra handje helpt en potentiële bezoekers in 1x bij de pagina brengen waar zij mogelijk naar op zoek waren.
Hierboven al twee (wat mij betreft betere) alternatieven, en dat nog zonder een letter concrete code getypt te hebben, maar simpelweg door wat alternatieven aanpakken te behandelen...