Variabel in php uit javascript

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Chris Martinus

chris Martinus

05/03/2020 14:18:49
Quote Anchor link
Met behulp van een Javascript zie ik de waarde van een selectie.

Hoe zet ik dit getal nu om in een variabel?


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>';

?>


Graag advies.

Edit:
Ik heb de code tussen code-tags geplaatst.
Zie ook de opmaakcodes in de Veelgestelde Vragen.
Gewijzigd op 05/03/2020 14:51:28 door - Ariën -
 
PHP hulp

PHP hulp

27/05/2020 03:53:44
 
- Ariën -
Beheerder

- Ariën -

05/03/2020 14:55:01
Quote Anchor link
Allereerst moet je weten dat PHP serverside wordt uitgevoerd, en dat Javascript door de browser van de bezoeker wordt uitgevoerd. PHP heeft geen enkel weet van wat er in een Javascript uitkomst zit. Maar wat wil je nu precies bereiken?

Als ik een goede tip mag geven, dan kan je die echo-put aan lijnen voorkomen door de HTML buiten PHP tags te laten.
 
Michael -

Michael -

05/03/2020 15:57:24
Quote Anchor link
Afhankelijk van wat je wil zou je de variabelen moeten versturen voordat je er in PHP iets mee kan. Dit kan met bijv GET, POST of AJAX.
 
Chris Martinus

chris Martinus

05/03/2020 16:21:03
Quote Anchor link
Heel vriendelijk en snel, maar het is geen antwoord op mijn vraag.

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.
 
Michael -

Michael -

05/03/2020 16:21:56
Quote Anchor link
Voorbeeldje hoe je t via PHP kan doen
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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']);
    }
}

?>
 
Chris Martinus

chris Martinus

05/03/2020 16:54:23
Quote Anchor link
Heel interessant. Ik heb geen enkele ervaring met Ajax.
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?
 
- Ariën -
Beheerder

- Ariën -

05/03/2020 17:09:04
Quote Anchor link
Heb je al in de network-tab van je browser gekeken of je die data daar binnenkrijgt?
 
Michael -

Michael -

05/03/2020 17:53:06
Quote Anchor link
Het geheel zou moeten werken. Als je een selectie doet wordt deze in het invoerveld weergegeven.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>

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.
 
Chris Martinus

chris Martinus

05/03/2020 21:20:13
Quote Anchor link
Het is niet zo heel bijzonder wat ik wil. Links op het scherm een lijst met items (een selectie vanuit een database) en rechts info uit dezelfde database met de ID als value in de afzonderlijke onderdelen van select. Dit opzetje is alleen maar op te proberen of dit idee werkt. Met de HTML opzet lukt dit wel, maar moet ik elke keuze afzonderlijk bevestigen.

<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
 
Thomas van den Heuvel

Thomas van den Heuvel

05/03/2020 21:21:18
Quote Anchor link
De vraag is, waarom heb je dit in JavaScript nodig? Is dit voor initialisatie van een keuze ofzo?

Ik volg niet helemaal wat het nut is van JavaScript in dit verhaal.
 
Chris Martinus

chris Martinus

05/03/2020 21:29:29
Quote Anchor link
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?

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.
 
- Ariën -
Beheerder

- Ariën -

05/03/2020 22:15:54
Quote Anchor link
Bedoel je de forumkeuze bij de 'New topic'-actie? Want daar wordt geen Javascript gebruikt. Je kiest een forum, en vult de rest in, en er wordt gewoon ge-POST naar het newtopic-script.

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 -
 
Chris Martinus

chris Martinus

05/03/2020 22:41:59
Quote Anchor link
Merkwaardig toch altijd, dat in forums altijd wordt ingegaan op bijzaken.
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.
 
- Ariën -
Beheerder

- Ariën -

05/03/2020 22:51:01
Quote Anchor link
Zie het niet aanvallend, maar meer als een 'heads-up'. Want er komt geen mooie website code meer uit, omdat zo goed als alle sites uit CSS bestaan waar Frontpage bijna niks mee doet. De wereld van webdesign blijft dus niet stilstaan, en het is zonde dat je daar nog een hoop tijd in oude structuren van designs zou investeren. Voor een kleinigheidje kan het nog, maar ik zou het zelf niet meer aanraden.

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 -
 
Michael -

Michael -

06/03/2020 06:28:03
Quote Anchor link
@Chris, dan kan prima met het voorbeeld dat ik je eerder gaf.
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)
PHP script in nieuw venster Selecteer het PHP script
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
<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>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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]);
        }
    }
}

?>

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 -
 
Chris Martinus

chris Martinus

06/03/2020 12:48:16
Quote Anchor link
Ja Michael, dit gaat de goede kant uit.

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
 
- Ariën -
Beheerder

- Ariën -

06/03/2020 13:09:24
Quote Anchor link
Je hebt nu al een AJAX-request die de juiste waardes uit de database haalt.
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 -
 
Chris Martinus

chris Martinus

06/03/2020 13:46:20
Quote Anchor link
Ja, dat laatste realiseer ik me.
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? ;-)
 
- Ariën -
Beheerder

- Ariën -

06/03/2020 13:52:48
Quote Anchor link
Nee, beschadigd aangekomen, dat wordt een replace actie door de leverancier, want ik ga niet 22,5 kg naar het postkantoor sjouwen :-/

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)
PHP script in nieuw venster Selecteer het PHP script
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 -
 
Thomas van den Heuvel

Thomas van den Heuvel

06/03/2020 21:35:34
Quote Anchor link
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...
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.