Javascript_formSubmit

Question

My task is to create classic form-i did it, added bootstrap basic validation, styling and everything needed. But i have a problem when the submizion is valid and succesful, i need to replace the form with the block of text like “your submition was successful” (not using alert) with JS, or bootstrap if it is possible...php is not required, databases neither...

Can someone please help me? I would really appreciate it.

I added the form-it is not exactly the same as i have on PC but you can help me to add jQuery code...
https://code.sololearn.com/W1WVpo9KD527/?ref=app

Answer 1

Ya....what you can do is put the form within div and change the innerHTML of that div
In this way the success message will only replace the form

<div id="form-container>
<form>
.
.
.
.
</form>
</div>

document.getElementById("form-container").innerHTML="success!!";

And it just like whatever you can do with jQuery can be done using JavaScript also. Because jQuery is written in JavaScript.
The only reason why programmers use jQuery because of it's clean style and less number of code.
So if you are familiar with JavaScript then working with jQuery won't be tough

Answer 2

You can make another version of section that displays form (that is a div which displays only a paragraph with message) and make it hidden by default.
If form is submitted successfully, hide form and show this message div instead.

It's very easy with jquery.

Answer 3

Sure, I'll come back to you.

Answer 4

Please post your form validation code.....that will help is to clear your doubt properly

Answer 5

Guess you just need to add onsubmit attribute in your form opening tag and few lines of javascript code.

<!-- find below a little modification of your HTML code -->
<form class="form-horizontal" onsubmit="myFunc()">
.
.
.
.
</form>

//find below js code
function myFunc()
{
var ele = document.getElementsByTagName("body")[0];
ele.innerHTML="Your submition was successful";
ele.style.textAlign="center";
ele.style.fontSize="x-large";
ele.style.color="blue";
}

Answer 6

Thank you very much Rishi Anand 😊

Answer 7

Rishi Anand i added the code. dρlυѕρlυѕ thanks, i would be grateful if you could help me to write jQuery code when you ll have some time. I cant yet work with jquery-just started learning...

Answer 8

Rishi Anand thanks :) . But i think that this code will “delete” all the content on the webpage. consider I want to preserve everything there(like gallery, textblocks, tables) except the form. And the “success” message after submitting the form would replace just the form (as a block of text or whatever) like dρlυѕρlυѕ said-to hide it... Maybe jquery would be great for this, but im still not very familiar with it... :(