-1

I'm coding a signup website, the layout is finish with html and css but I don't know how to get the user name, email and password from the html code and combine them to create a JSON file to send to the server.

<form action="#">
  <div class="form-group">
    <label for="username">Username</label>
    <input class="form-control" type="text" name="username" id="username" placeholder="biker" required />
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input class="form-control" type="text" name="email" id="email" placeholder="biker@gmail.com" required />
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input class="form-control" type="password" name="password" id="password" placeholder="********" required />
  </div>
  <div class="form-group">
    <label for="passwordRepeat">Repeat Password</label>
    <input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
  </div>
  <div class="m-t-lg">
    <ul class="list-inline">
      <li>
        <input class="btn btn--form" type="submit" value="Register" id="registerbtn" />
      </li>
      <li>
        <a class="signup__link" href="#">I am already a member</a>
      </li>
    </ul>
  </div>
</form>

I heard using javascript and jquery can do this but I have not learned Javascript yet, so I do all the search but still no luck.

DN96
  • 61
  • 9
  • *"but I have not learned Javascript yet"* - Plenty of links to JavaScript tutorials available on the [StackOverflow JavaScript info page](https://stackoverflow.com/tags/javascript/info). Anyway, why do you want to send the data as JSON rather than doing a normal form submit? – nnnnnn Dec 05 '17 at 03:09
  • What server are you using? – Void Spirit Dec 05 '17 at 03:14

1 Answers1

1

Did you try googling your case? There are multiple similar treads on Stack Overflow too, e.g. https://stackoverflow.com/a/22195193/6108936

Long story short, if you add id to your form

<form action="#" id="myForm">

then you can simply serialize whole form. This requires includind jQuery though.

<script>
var formData = JSON.stringify($("#myForm").serializeArray());

$.ajax({
  type: "POST",
  url: "yourRoute",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});
</script>

Side note. As you have signup form there, I strongly suggest adding

<div style="position: absolute; left: -5000px;" aria-hidden="true">
  <input type="text" name="subject"  autofill="off" tabindex="-1" value="">
</div>

inside your form. Then, before validation (either before posting everything as JSON of already in backend) check if subject has content. If yes, congrats, you can avoid the spamming.

Why it works? Bots do not understand whenever the field is hidden and fills all the fields. Only exception when the spam is submitted by a real person, not a bot.

And, unless you have your project under firewall, trust me, you want to do this or any other bot prevention.

kravis
  • 380
  • 2
  • 15
  • If I want to get text from a specific html element (example username and password) can I write it like this: data : { username: $("#username").val(), password: $("password").val() } – DN96 Dec 05 '17 at 09:22
  • yes. it's simply that if you need all inputs, stringify is a shorter approach – kravis Dec 05 '17 at 09:30
  • Thanks for your reply. I did some searching on w3school but the syntax for jquery ajax is a bit different. It is much more simple. Some thing like this: $.post("demo_test_post.asp", { name: "Donald Duck", city: "Duckburg" }, function(data, status){ alert("Data: " + data + "\nStatus: " + status); }); – DN96 Dec 05 '17 at 15:21