JQuery Submit form
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)
1
2
3
4
5
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>
<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)
1
2
3
4
5
6
7
8
9
10
11
12
13
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>
$(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
- 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?
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.
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.
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.
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...
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)
1
2
3
4
5
6
7
8
9
10
11
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;
});
});
// 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
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.
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
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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();
}
});
});
});
// 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)
1
2
3
4
5
6
7
8
9
10
11
12
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>
<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>