JQuery Submit form

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Danny von Gaal

Danny von Gaal

05/07/2016 11:39:16
Quote Anchor link
Ik wil een formulier submitten met Jquery maar wat moet ik dan in het actionveld van het formulier plaatsen?
Zoals ik het nu heb werkt het niet. Mijn Jquery wordt niet geactiveerd. Ik heb dan ook wel geen submit button. Maakt dat uit?

Formulier:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<form name="form-edit-cp" id="form-edit-cp" action="#">
<input name="form-edit-cp-input" id="form-edit-cp-input" type="text" size="14" maxlength="15" value="<?php echo $row["cp"];?>">
<input name="form-edit-cp-hidden-id" id="form-edit-cp-hidden-id" type="hidden" value="<?php echo $row["id"];?>">
<input name="form-edit-cp-hidden-url" type="hidden" value="<?php echo $_SESSION['huidige-pagina']; ?>">
</form>


Jquery:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
$(document).ready(function(){
    //     Wijzig Challenge Phrase
    $( "#form-edit-cp" ).submit(function( event ) {
        e.preventDefault();
        var ChangedCP = $('#form-edit-cp-input').val();
        var IDofChangedCP = $('#form-edit-cp-hidden-id').val();
        $.post("scripts/wijzigacties.php", {cpinput: ChangedCP, cpid: IDofChangedCP}, function(data) {
            alert( "Data Loaded: " + data );
        });
    });
});
</script>
Gewijzigd op 05/07/2016 11:39:39 door Danny von Gaal
 
PHP hulp

PHP hulp

29/03/2024 03:19:18
 
- Ariën  -
Beheerder

- Ariën -

05/07/2016 11:43:51
Quote Anchor link
Ja, want hoe weet je code nu wanneer hij de submit-actie uit moet voeren?
 
Danny von Gaal

Danny von Gaal

05/07/2016 11:50:21
Quote Anchor link
- Ariën - op 05/07/2016 11:43:51:
Ja, want hoe weet je code nu wanneer hij de submit-actie uit moet voeren?


Nou wanneer je op enter klikt dan wordt een formulier toch ook gesubmit?
 
- Ariën  -
Beheerder

- Ariën -

05/07/2016 11:55:54
Quote Anchor link
Opsich wel ja. Maar heb je al gedebugged met console.log()'jes in je submit-functie of deze al wordt aangeroepen? Voor hetzelfde geld loopt hij vast op je AJAX. Dus... debuggen!
 
Ben van Velzen

Ben van Velzen

05/07/2016 11:58:41
Quote Anchor link
>> Nou wanneer je op enter klikt dan wordt een formulier toch ook gesubmit?
Niet als je geen submit button hebt. Je kunt dit uiteraard wel met javascript regelen via de submit() functie van het form. Je action is alleen relevant als fallback, dus wanneer javascript niet beschikbaar is.
 
Danny von Gaal

Danny von Gaal

05/07/2016 14:19:29
Quote Anchor link
Sorry, mijn code werkt wel.
Ik heb alleen "e.preventDefault();" weg moeten halen want mijn submit event moet wel worden behandeld zoals het is. Ik had mijn ajax post gekopieerd van uit een eerder script met een anchor en had dit per ongeluk mee gekopieerd.

Maar ik krijg wel degelijk het antwoord dat ik wil hebben.
 
Thomas van den Heuvel

Thomas van den Heuvel

05/07/2016 15:38:59
Quote Anchor link
Danny von Gaal op 05/07/2016 14:19:29:
Sorry, mijn code werkt wel.
Ik heb alleen "e.preventDefault();" weg moeten halen want mijn submit event moet wel worden behandeld zoals het is. Ik had mijn ajax post gekopieerd van uit een eerder script met een anchor en had dit per ongeluk mee gekopieerd.

Maar ik krijg wel degelijk het antwoord dat ik wil hebben.

Uhm. Weet je zeker dat je je preventdefault weg wilt halen? Zorgt dit er dan niet voor dat je pagina herladen wordt? Staat er een "#" achter je webadres na submitten? Dat lijkt mij namelijk niet de bedoeling van een AJAX post...
 
Danny von Gaal

Danny von Gaal

05/07/2016 15:57:59
Quote Anchor link
Thomas van den Heuvel op 05/07/2016 15:38:59:
Uhm. Weet je zeker dat je je preventdefault weg wilt halen? Zorgt dit er dan niet voor dat je pagina herladen wordt? Staat er een "#" achter je webadres na submitten? Dat lijkt mij namelijk niet de bedoeling van een AJAX post...


Ja, dat is waar.
Het formulier wordt nu ook wel behandeld buiten JQuery om en de pagina ververst inderdaad. Maar JQuery werkt nu wel.

Misschien toch een submit button plaatsen?

Toevoeging op 05/07/2016 16:04:30:

Update
Ik heb de e.preventDefault toch weggelaten en achter mijn post een return false; geplaatst. Hierdoor wordt de post wel behandeld maar gebeurd er verder niets meer met het formulier.

Ik weet niet of het goed is? Maar het lijkt wel te werken.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    //     Wijzig Challenge Phrase
    $( "#form-edit-cp" ).submit(function( event ) {
        var ChangedCP = $('#form-edit-cp-input').val();
        var IDofChangedCP = $('#form-edit-cp-hidden-id').val();
        $.post("scripts/wijzigacties.php", {cpinput: ChangedCP, cpid: IDofChangedCP}, function(data) {
            alert( "Data Loaded: " + data );
        });
        return false;
    });
});
Gewijzigd op 05/07/2016 16:04:57 door Danny von Gaal
 
Thomas van den Heuvel

Thomas van den Heuvel

05/07/2016 16:17:01
Quote Anchor link
Maar als je toch submit, waarom gebruik je dan niet een gewone formulier POST? :/. Die lap javascript die hetzelfde gedrag simuleert heeft dan toch geen enkele toegevoegde waarde?

Indien je niet weg wilt navigeren van de huidige pagina lijkt mij een AJAX post gerechtvaardigd. In welk geval het mij nog steeds nodig (noodzakelijk) lijkt het default gedrag van het submitten van een formulier af te vangen.

Kies een van de twee :p.
 
Danny von Gaal

Danny von Gaal

05/07/2016 16:29:30
Quote Anchor link
Nou mijn applicatie werkt allemaal goed en aardig met php. Maar ik wil het wat verfijnen met Jquery alleen ik heb er nog niet heel veel kaas van gegeten.

Ik heb een Jquery popup waar data in staat en als je op een knop klikt dan veranderd een waarde in een input veld. Alleen nu wil ik dat wanneer je een andere waarde invult en op enter drukt dat het input veld weer veranderd in de nieuw aangepaste waarde.
En daarvoor heb ik een ajax post nodig helaas.

Maar die Ajax post gaat wel alleen op dit moment wordt en het formulier gesubmit door html en Jquery is er mee bezig en dat krijg ik niet goed.
Gewijzigd op 05/07/2016 16:29:58 door Danny von Gaal
 
Thomas van den Heuvel

Thomas van den Heuvel

05/07/2016 16:40:57
Quote Anchor link
Dus je zit in een formulier om data te wijzigen, alleen kun je een enkel element in deze data direct aanpassen (en wegschrijven naar de database) via een AJAX call? Of hoe moet ik dit zien?
 
Danny von Gaal

Danny von Gaal

05/07/2016 16:53:33
Quote Anchor link
Nee, het is een popup met database gegevens.
Bijv:

Naam: {naam uit database} {icon}
Type: {type uit database} {icon}
Content: {content uit database} {icon}
Opmerking: {opmerking uit database} {icon}

Met achter elke waarde uit de database een icoon. Wanneer je op het icoon klikt dan veranderd de betreffende gegeven uit de database in een input veld. Elke waarde krijgt dan een eigen formulier met een input veld. Als je daar dan iets in aanpast en op enter drukt dan moet de nieuwe waarde te zien zijn.


Ik heb het ondertussen al voor elkaar alleen veranderd het input veld nog niet terug in de nieuwe waarde. Maar daar kijk ik morgen verder naar. De waarde zelf wordt wel al aangepast in de database.

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
$(document).ready(function(){
    //     Wijzig Challenge Phrase
    $( "#form-edit-cp" ).submit(function(e) {
        e.preventDefault();
        var ChangedCP = $('#form-edit-cp-input').val();
        var IDofChangedCP = $('#form-edit-cp-hidden-id').val();
        $.ajax({
            type: "POST",
            url: "scripts/wijzigacties.php",
            data: {cpinput: ChangedCP, cpid: IDofChangedCP},
            success: function(data){
                $("#changecp").hide();
            }
        });
    });
});


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<tr>
                <td class="titel">Challenge Phrase:</td>
                <td class="waarde" id="mocp"><?php if (empty($row["cp"])) { echo "Niet ingevuld"; } else { echo $row["cp"]; } ?> <a href="#"><i class="fa fa-paperclip" aria-hidden="true"></i></a>
                <a href="#" id="editcp"><img src="images/jquery/icons_los/edit.png" class="imgeditcp"/></a></td>
                <td class="waarde" id="changecp">
                    <form name="form-edit-cp" id="form-edit-cp">
                        <input name="form-edit-cp-input" id="form-edit-cp-input" type="text" size="14" maxlength="15" value="<?php echo $row["cp"];?>">
                        <input name="form-edit-cp-hidden-id" id="form-edit-cp-hidden-id" type="hidden" value="<?php echo $row["id"];?>">
                        <input name="form-edit-cp-hidden-url" type="hidden" value="<?php echo $_SESSION['huidige-pagina']; ?>">
                    </form>
                </td>
            </tr>
 



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.