Reputation: 394

java script doesn't get the data from the form

I am new in javascript and css and I do not understand why my code doesn't work. from some reason my parameter doesn't get the data from the form.

I want to know why and how to change the javascript code to get the data.

php code:

<body>
    <div id="loader-wrapper">
        <div id="AssafMedia"></div>
        <div id="loader"></div>
    </div>

    <form class="register_a_user" action="index.html" method="post">

        <h1>הרשמה</h1>

        <fieldset>
            <legend class="table_row donot_break">
                <div class="table_cell donot_break">
                    <span class="number">1</span>
                </div>
                <div class="table_cell donot_break">
                    <span class="section_title ">השם שלך</span>
                    <span class="section_description">ככה נדע איך קוראים לך</span>
                </div>
            </legend>

            <div class="table_row">
                <div class="table_cell width50">
                    <label for="name">שם פרטי:</label>
                    <input type="text" id="first_name" name="first_name" placeholder="למשל: צביקה" />
                </div>

                <div class="table_cell margin-right bigger_slice">
                    <label for="name">שם משפחה:</label>
                    <input type="text" id="last_name" name="last_name" placeholder="למשל: בן-שלום" />
                </div>
            </div>

            <legend class="table_row donot_break">
                <div class="table_cell donot_break">
                    <span class="number">2</span>
                </div>
                <div class="table_cell donot_break">
                    <span class="section_title">פרטי יצירת קשר</span>
                    <span class="section_description">ככה נוכל להיות איתך בקשר</span>
                </div>
            </legend>

            <div class="table_row">
                <div class="table_cell width50">
                    <label for="phone">טלפון:</label>               
                    <input type="tel" id="phone" name="phone" placeholder="למשל: 0501234567">
                </div>

                <div class="table_cell margin-right bigger_slice">
                    <label for="phone">חזור על מספר הטלפון</label>
                    <input type="tel" id="phone2" name="phone2" placeholder="למשל: 0501234567">
                </div>
            </div>              

            <label for="mail">אימייל:</label>
            <input type="email" id="email" name="email" placeholder="למשל: [email protected]" />


            <legend class="table_row donot_break">
                <div class="table_cell donot_break">
                    <span class="number">3</span>
                </div>
                <div class="table_cell donot_break">
                    <span class="section_title">אתה או את?</span>                   
                </div>
            </legend>

        <!--    <label for="job">סגנון הריקוד הכי הכי בעולם</label>
            <select id="job" name="user_job">
            <optgroup label="סלסה">
                <option value="cuban">סלסה קובנית</option>
                <option value="la" selected>סלסה בסגנון LA</option>
                <option value="ny">סלסה בסגנון NY</option>
            </optgroup>     
            <optgroup label="סגנונות אחרים">
                <option value="bachata">באצטה</option>
                <option value="kizumba">קיזומבה</option>
                <option value="reggatton">רגאטון</option>
                <option value="all_times">כל הזמנים</option>
                <option value="lambada">זוק למבדה</option>
                <option value="lambada">מרנגה</option>
            </optgroup>     
            </select>                -->

            <div class="radio_section table_row donot_break">
                <label class="title">מין:</label>
                <label>
                    <input type="radio" id="gender_male" value="male" name="gender" />
                    <span class="lbl padding-8">זכר <i class="fa fa-male"></i></span>
                </label>
                <label>
                    <input type="radio" id="gender_female" value="female" name="gender" />
                    <span class="lbl padding-8">נקבה <i class="fa fa-female"></i></span>
                </label>                
            </div>
        </fieldset>

        <fieldset>
            <legend class="table_row donot_break">
                <div class="table_cell donot_break">
                    <span class="number">4</span>
                </div>
                <div class="table_cell donot_break">
                    <span class="section_title">יום ההולדת שלך</span>
                    <span class="section_description">כדיי שנוכל לפנק אותך</span>
                </div>
            </legend>   

            <label for="mail">יום ההולדת שלך:</label>
            <input type="date" id="birthday" name="birthday" placeholder="למשל: 31/07/1987" />
        </fieldset>

        <fieldset>

            <legend class="table_row donot_break">
                <div class="table_cell donot_break">
                    <span class="number">5</span>
                </div>
                <div class="table_cell donot_break">
                    <span class="section_title">תעודת הזהות שלך</span>
                    <span class="section_description">כדיי שנהיה בטוחים שאתה זה באמת אתה</span>
                </div>
            </legend>           

            <div class="table_row">
                <div class="table_cell width50">
                    <label for="id_card">תעודת זהות:</label>                
                    <input type="text" id="id_card" name="id_card">
                </div>

                <div class="table_cell margin-right bigger_slice">
                    <label for="id_card2">חזור על מספר תעודת הזות</label>
                    <input type="text" id="id_card2" name="id_card2">
                </div>
            </div>              

        </fieldset>

        <button type="submit">הרשם</button>
    </form>     

    <!--div class="input_group">
        <input type="text" id="first_name" name="first_name" placeholder="שם פרטי: " />
        <input type="text" id="last_name" name="last_name" placeholder="שם משפחה: " />
    </div>

    <div class="input_group">
        <input type="text" id="phone" name="phone" placeholder="טלפון: " />
        <input type="text" id="phone2" name="phone2" placeholder="חזור על הטלפון: " />
    </div>

    <div class="input_group">
        <input type="text" id="email" name="email" placeholder="אימייל" />
        <input type="date" id="birthday" name="birthday" placeholder="יום הולדת" />
    </div>      

    <div class="input_group">
        <input type="text" id="id_card" name="id_card" placeholder="תעודת זהות" />
        <input type="text" id="id_card2" name="id_card2" placeholder="חזור על התעודת זהות" />
    </div>

    <div class="input_group">

        <select id="gender" name="gender" placeholder="מין">
            <option selected disabled>מין</option>      
            <option value="1">זכר <i class="fa fa-male"></i></option>
            <option value="2">נקבה <i class="fa fa-female"></i></option>
        </select>

        <select type="text" id="dance_style" name="dance_style" placeholder="סגנון ריקוד מועדף">        
            <option selected disabled>סגנון ריקוד</option>
            <option value="1">קובני</option>
            <option value="2">אל איי</option>
            <option value="3">באצטה</option>
            <option value="4">קיזומבה</option>
            <option value="5">רגאטון</option>
            <option value="6">כל הזמנים</option>
        </select>
    </div>

    <button>הרשם</button-->

</form>

java script code:

    var getData = function(theFunction,parameters){

    $.tempData = {};

    var scriptUrl = ("getdata.php?data="+theFunction);

    var result = null;
    $.ajax({
        url: scriptUrl,
        type: 'POST',
        data: parameters,
        dataType: 'html',
        async: false,
        success: function(data) {
            result = data;
        } 
    });

    return result;
    }

    $(document).ready(function(){
    $("form.register_a_user").submit(function(e){


        $.parameters = {


            "first_name": $("#registration #name").val(),
            "last_name": $("#registration #last_name").val(),
            "id_card": $("#registration #id_card").val(),
            "id_card2": $("#registration #id_card2").val(),
            "phone": $("#registration #phone").val(),
            "phone2": $("#registration #phone2").val(),
            "email": $("#registration #email").val(),
            "gender": $("#registration #gender").val(),
            "dance_style": $("#registration #dance_style").val(),
            "birthday": $("#registration #birthday").val(),


        }
        var result = getData("insert_by_regestration",$.parameters);
        $.alert({
            title: false,
            confirmButton: 'סבבה',          
            content: result,
            confirm: function(){
                // alert('סתם לא באמת!');
            }
        });     
        // alert(result);
        return false;
    });
});

Upvotes: 1

Answers (3)

Vinod Patidar

Reputation: 685

Simply do the below stuff for submitting form using ajax and make correction in the below code according to your requirements.

Load Jquery file.

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

HTML code---

<form id="myform" class="register_a_user" action="index.html" method="post">
 ...
 ..
</form>

-- Js code

$(function() {
    //hang on event of form with id=myform
    $("#myform").submit(function(e) {

        //prevent Default functionality
        e.preventDefault();

        //get the action-url of the form
        var actionurl = e.currentTarget.action;

        //do your own request an handle the results
        $.ajax({
            url: actionurl,
            type: 'post',
            dataType: 'json',
            data: $("#myform").serialize(),
            success: function(data) {
                ... do something with the data...
            }
        });
    });
});

Upvotes: 0

Thanga

Reputation: 8161

Replace data:parameters with

data:$(".register_a_user").serialize()

That will solve the issue

Upvotes: 0

Suresh Ponnukalai

Reputation: 13998

You are using wrong selectors. Look at the following code.

 $("#registration #name").val()

There is no registration id and name id as well. It should be like below.

 $("#first_name").val()

Update your code with all these modification like below.

  $.parameters = {
        "first_name": $("#first_name").val(),
        "last_name": $("#last_name").val(),
        "id_card": $("#id_card").val(),
        "id_card2": $("#id_card2").val(),
        "phone": $("#phone").val(),
        "phone2": $("#phone2").val(),
        "email": $("#email").val(),
        "gender": $("#gender").val(),
        "dance_style": $("#dance_style").val(),
        "birthday": $("#birthday").val()
    }

Upvotes: 1

java script doesn&#39;t get the data from the form

Answers (3)

Related Questions

java script doesn't get the data from the form