HTML Input to external JSON file

Question

I have a basic input form consisting of name, age, email, password. I'm trying to pass that from the HTML to Javascript, which then converts it into a JSON string in an external JSON file that I can then pull from later. I can't seem to get it to post the input data to my json file. My JSON file is named 'formdata', and it is in the same directory as my html/javascript, as well as my jquery. Do you see what could be causing it?

    <main>
    <form id="myform" type="post">
        <fieldset>
            <legend>Sign Up</legend>
            <p>Please sign up for our website here!</p>
            <div class="elements">
                <label for="name">Name :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Please enter your name here" name="name" size="25" />
            </div>
            <div class="elements">
                <label for="username">Username :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Please enter your email here" name="email" size="25" />
            </div>
            <div class="elements">
                <label for="email">Email :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Please enter your email here" name="email" size="25" />
            </div>
            <div class="elements">
                <label for="password">Password :</label>
                <input required="required" type="password" value="" name="password" size="32" minlength="6" maxlength="32" />
            </div>
            <div class="elements">
                <label for="age">Age :</label>
                <input required="required" type="number" value="" id="age" name="age" size="3" />
            </div>
            <div class="elements">
                <label for="gender">Gender :</label>
                <input type="radio" name="gender" value="Male" checked="checked" id="r1"> Male
                <input type="radio" name="gender" value="Female" id="r2"> Female
            </div>
            <div class="submit">
                <input type="submit" id="submit" name="submit" class="btn" value="Send" />
            </div>
        </fieldset>
    </form>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btn").click(function(e) {
                var jsonData = {};

                var formData = JSON.stringify($("#formdata").serializeArray());

                $.each(formData, function() {
                    if (jsonData[this.name]) {
                        if (!jsonData[this.name].push) {
                            jsonData[this.name] = [jsonData[this.name]];
                        }
                        jsonData[this.name].push(this.value || '');
                    } else {
                        jsonData[this.name] = this.value || '';
                    }

                });
                console.log(jsonData);
                $.ajax({
                    url: "action.php",
                    type: "POST",
                    data: formData,
                    success: function(){},
                    dataType: "json",
                    contentType : "application/json",
                });
                e.preventDefault();
            });
        });

    </script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    </main>

Answer 1

This won't fully solve your problem, but I see several issues with the code you posted.

1. you need to change the value of the id attribute on your submit button from submit, to btn, so that this line will work $("#btn").click(function(e) { ie. <input type="submit" id="btn"

2. change var formData = JSON.stringify($("#formdata").serializeArray()); to var formData = JSON.stringify($("#myForm").serializeArray()); since the id of your form is in fact "myForm"

3. you have two inputs with name="email", I suspect the first one is actually intended to be name="username"

Also, you mention wanting to save these results to a JSON file. Your javascript AJAX request is submitting to "action.php" so I assume you have a php script that's handling the result and writing to the JSON file. This part is a bit vague, so just clarifying from what I see.

And lastly, from a security standpoint, I have a lot of concerns in the fact this form asks for a password and you're mentioning storing it in a JSON file on the server. You shouldn't do that with passwords, ever. They aren't mean to be ever stored in plain text and should be treated with great responsibility.

Hope this helps!