Preview part of form in div with AJAX and jQuery before publish WordPress
- SOLVED
Hi!
I'm having a form on the front end that let's logged in users publish posts to a section of my site.
I have a form that look something like this:
<form>
<div id="preview1"></div>
<div id="part1">
<input text>Text field</input>
<input files>File upload</input>
<input textarea>Text</input>
<input button save>
</div>
<div id="preview2"></div>
<div id="part2">
<input text>Text field</input>
<input files>File upload</input>
<input text>Text</input>
<input button save>
</div>
<div id="preview3></div>
<div id="part3">
<input text>Text field</input>
<input files>File upload</input>
<input text>Text</input>
<input button save>
</div>
<input submit>
</form>
What I need to do:
When page loads, <strong>only display part1 div</strong>, and hide the preview divs as well as part2 and part3 div:s.
When clicking the save button on part1 i want to use Ajax or jQuery to preview the form input of part1 in preview1, and at the same time show part2, while hiding part1.
The preview should show how the part of the form will look once published. The first textfield is a title, then comes the image, and then a textarea with some description text. This has to be styled the way it will look on the site. Important that the image can be previewed full size.
In preview1 div should be an edit link, and if I click this, it hides the preview1 and shows the part1 div again. If user makes changes and clicks save again, the preview1 shows again with the changes, and part1 div is once again hidden.
When the user clicks submit at the bottom of the form, it takes all the form data and publish it as a custom post type.
The publish function works as it should, but I need to get the preview, save and edit part to work.
Right now I have all the parts of the form in my template, but I have also experimented with some kind of clone function in jQuery, since the form parts all are the same. I haven't got it to work though.
Thanks for helping me out. I'm willing to pay 100$ to the one helping me solve this problem. I need full information on how to properly add the ajax calls, actions and everything else that's needed to make this work.
Thanks!
Answers (3)
Hariprasad Vijayan answers:
Hi there,
I would suggest you to use three form instead of one. Else, set a identifier on each part and change the value on button click. I can help you if you need.
Let me know.
Thanks,
Hariprasad
Hariprasad Vijayan comments:
Oh. I think am wrong, you just need to save details to database on form submit right?
Jens Filipsson comments:
Exactly! The save buttons are for previewing how every part of the form will look once it's published
Hariprasad Vijayan comments:
Here is a working demo. [[LINK href="http://pastebin.com/Bfg2KaKn"]]http://pastebin.com/Bfg2KaKn[[/LINK]]
Hariprasad Vijayan comments:
Hi Jens,
Is it working for you?
Thanks.
Arnav Joy answers:
Hello Jens ,
Can you show me your site and the page where this form is present ?
Jens Filipsson comments:
It's developed locally at the moment unfortunately.
