Page refresh and submit button
lifa5
Posted messages
50
Status
Member
-
lifa5 Posted messages 50 Status Member -
lifa5 Posted messages 50 Status Member -
```html
<input type="submit" id="sub" value="Rechercher" style="float:right;" onclick="affiche(); return false;" />
```
```html
<form id="formedit" method="post" class="aff" name="form2" action="modifier" style="display:none;">
<fieldset align="center">
<legend id="mod">Modification d'un utlisateur</legend>
<input type="hidden" name="id" value="${user.id}" />
<label id="pre">Prenom:</label>
<input type="text" name="prenom" value="${user.prenom}" />
<label id="pre">Nom: </label> <input type="text" name="nom" value="${user.nom}" />
<label id="pre">Email: </label> <input type="text" name="email" value="${user.email}" />
<label id="pre">Telephone: </label> <input type="text" name="tel" value="${user.tel}" />
<label id="pre">Password: </label> <input type="password" name="pwd" value="${user.password}" />
${sms} <input type="submit" value="Modifier" style="float:right;" /> </fieldset> </form> ``` ```javascript function affiche() { document.getElementById('formedit').style.display='block'; return false; } ```
<label id="pre">Nom: </label> <input type="text" name="nom" value="${user.nom}" />
<label id="pre">Email: </label> <input type="text" name="email" value="${user.email}" />
<label id="pre">Telephone: </label> <input type="text" name="tel" value="${user.tel}" />
<label id="pre">Password: </label> <input type="password" name="pwd" value="${user.password}" />
${sms} <input type="submit" value="Modifier" style="float:right;" /> </fieldset> </form> ``` ```javascript function affiche() { document.getElementById('formedit').style.display='block'; return false; } ```
9 answers
-
Hello,
Look ate.preventDefault()
For example:$("form").submit(function (e) { e.preventDefault(); // this will prevent from submitting the form. //the rest of your code when "submitting" your form // (you can even skip the onclick on your button... });
--
Best regards,
Jordane -
It still doesn't work, or maybe I don't understand because I'm a beginner with jQuery or Ajax. What I want is simply to display the form without reloading the page.
--
lifa8 -
I want to display this form after clicking the submit button. My code is as follows:
submit button: <input type="submit" id="sub" value="Search" style="float:right;" onclick="show();"/>
Function show():function show(){ document.getElementById('formedit').style.display='block'; return false; }
And here is the form I want to display:<form id="formedit" method="post" class="aff" name="form2" action="modify" style="display:none;"> <fieldset align="center"> <legend id="mod">Modification of a user</legend> <input type="hidden" name="id" value="${user.id}"/> <label id="pre">First Name:</label> <input type="text" name="first_name" value="${user.first_name}"/></br></br> <label id="pre">Last Name: </label> <input type="text" name="last_name" value="${user.last_name}"/></br></br> <label id="pre">Email: </label> <input type="text" name="email" value="${user.email}"/></br></br> <label id="pre">Phone: </label> <input type="text" name="phone" value="${user.phone}"/></br></br> <label id="pre">Password: </label> <input type="password" name="pwd" value="${user.password}"/></br> <font color="black">${sms}</font> <input type="submit" value="Modify" style="float:right;"/> </fieldset> </form>
And each time I click, the form shows and disappears.EDIT: Added code tags (syntax highlighting).
Explanations available here: HERE
Please keep this in mind in your future messages.
lifa8-
1 - Please make sure to use syntax highlighting (code tags) when you post code on the forum.
Explanations available here:
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
.
2 - .... but where is the code I gave you??
3 - ... otherwise.. even simpler ....
Instead of using a SUBMIT type input.. you put a BUTTON<input type="button" id="sub" value="Search" style="float:right;" onclick="affiche();"/>
-
-
If I put a button type input, my data will not be displayed. I need to search in my database using my ID and output the fields entered in the database.
--
lifa8-
I need to search in my database
... and for that .... as it was told to you before you asked your question:
because I was told I need to use jquery or ajax
you need to use AJAX!
That's the only way you'll be able to display data from your database without reloading the page...
Because if you insist on wanting to do this with a SUBMIT ... your page will systematically reload!
There are many examples (and tutorials) on the internet ..... have you at least looked at them?
What have you tried?
Here is a recent example:
https://forums.commentcamarche.net/forum/affich-32889154-lien-pour-supprimer-une-ligne-dans-un-table-avec-php-ajax-jquery#21
-
-
ok I see and I had tried this:
$(document).read(function(){
$(".aff").on('onclick',function(){
var url =
$(this).prop('submit');
$("#formedit").load(url);
event.onclick();
});
});
--
lifa8-
Are you kidding me???
Where is the syntax highlighting??? !!!!!!
Last reminder:
**** Attention ****
Please make sure to use syntax highlighting (code tags) when posting code on the forum.
Explanations are available here:
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
.
Also.... the LOAD loads the content of a page..... this is not AJAX!
Just look at the example I gave you!
-
-
-
I looked but it doesn't inspire me much about my problem.
--
lifa8-
```html You create a PHP file (which will be called by your AJAX JavaScript script) that will return the data to be filled in your form
for example :<?php // page user.ajx.php $result = array(); $result['id'] = 1; $result['nom'] = "nomDeFamille"; $result['prenom'] = "toto"; //sending the result as JSON echo json_encode($result);
Your AJAX script (which you can put in your affiche function)
like this :function affiche(){ //requires the use of the JQUERY library $.ajax({ type: 'POST', dataType : "json", url: "user.ajx.php", data: {}, success: function(reponse){ console.log(reponse); //for testing purposes //filling the form with the data // retrieved from ajax $("#id").val(reponse.id); $("#nom").val(reponse.nom); $("#prenom").val(reponse.prenom); //displaying the form $('#formedit').css('display','block'); }, error: function(xhr, status, error) { //in case of an ajax error console.log ("error !"); var err = status + " : " +xhr.responseText; alert(err.Message); } }); }
Of course.. you would have taken care to import the JQUERY library into your page
which you can download here :
http://code.jquery.com/jquery-1.11.3.min.js
(just do SAVE AS in your browser and put it in a file at the root of your site named : jquery.js
Then include it in your page by doing :<script src="jquery.js"></script>
``` -
-
-
It's a JSP file and I'll check if it might work. Once again, thank you for answering my questions.
--
lifa8 -
It still didn't work, I tried with this code and it prevents my server from starting
--
lifa8
