how to have different forms using ajax

Question

I'm trying to make something like this: http://www.getsingular.com/contacto They have a column to change the form type, but I want to do it using AJAX, any help?

Thanks in advance

Answer 1

You don't need ajax to do it. I will direct you to the right path but I am not going to write the code for you.

Let's say that you have 4 forms:

1- Put every one of them in a DIV and give it a unique id.

2- hide all the DIVs except the one you want to display initially.

3- In every links href attribute place the id of each corresponding div.

4- Add a click event to each link. for example <a href="first-form" onclick="return myspecialfunction()">Contact us<a>

5- inside the function show the form and hide all the others. Also don't forget to return false to prevent the default behaviour of the link.

function myspecialfunction(){

    var _id = this.href;

    document.querySelector("#" + _id).style.display = "block";

    // hide all the other forms using .style.display = "none";



    return false;

}

Here is a full example of how to show display content by clicking a link: show and hide div when clicking on a link

If you want to submit a form using ajax then just cancel the form submit event by returning false. The grab the data from the fields and submit them using ajax:

Examples: http://hayageek.com/jquery-ajax-form-submit/

Submit form using AJAX and jQuery

Answer 2

Here's another option ... my reading of your requirement was slightly different from "thedethfox" ...

<form id="form" action="index.php" method="post">
        <h3>Contacto particulares</h3>
        <hr>
        <h4>Nombre</h4>
        <input type="text"/>
        <h4>Correo electronico</h4>
        <input type="text"/>
        <h4>Telephono</h4>
        <input type="text"/>
        <h4>Comentario</h4>
        <textarea></textarea>
    </form>

    <button id="addMystuff">Add Stuff</button>

    <div id="moreStuff" style="display:none;">
        <h4>My New Stuff</h4>
        <textarea></textarea>
    </div>

    <script>
        $(document).ready(function() {

            $('#addMystuff').click(function() {
                $('#form').append($('#moreStuff'));
                $('#moreStuff').css('display', 'block');
            });
        });

    </script>

Hope this helps somewhat ...