• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Inhalt als json per button kick senden

E

eugibob

New member
Hallo alle zusammen,

ich bin noch nicht so lang mit JS vertraut und versuche mich da jetzt etwas zurecht zu finden.

Ich will ein Nutzer signup erstellen.

Code: 
<div id="popup-box-signup" class="popup-position">
                  <div id="popup-wrapper">
                    <div id="popup-container">
                      <div class="user_register">
                        <form>
                          <label>Full Name</label> <input type="text"><br>
                          <label>Email Address</label> <input type="email"><br>
                          <label>Password</label> <input type="password"><br>

                          <div class="checkbox">
                            <input id="send_updates" type="checkbox"> <label for=
                            "send_updates">Send me occasional email updates</label>
                          </div>

                          <div class="action_btns">
                            <div class="one_half">
                              <a class="btn back_btn" href="#" onclick="toggle_visibility('popup-box-signup');">Back</a>
                            </div>

                            <div class="one_half last">
                              <a class="btn btn_red" href="#">Register</a>
                            </div>
                          </div>


wenn man hier dann zB einen Nutzer eingibt und senden drückt sollte es als post an localhost:3000/user geschickt werden. Aber dann im json format

{ "Name" : "eingegebener Nutzername" }

vielleicht kann mir ja wer helfen :)
 
Du kannst durch alle Elemente eines <form>s durchiterieren und die ganzen Werte in ein JS-Objekt reinschreiben, welches du dann per JSON.stringify() in einen String umwandelst. Diesen kannst du dann mit AJAX an den Server schicken... aber ich verstehe auch nicht ganz, warum du es unbedingt kompliziert machen willst, wenn es viel einfacher mit Browserbordmitteln geht.

PS: du musst aber auf jeden Fall deinen <input>s Namen geben.

Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body>
<form>
	<label>Name <input name="name"></label>
	<label>Email <input name="email"></label>
	<label><input type="checkbox" name="check"> check</label>
	<button id="getJSON" type="button">get JSON</button>
</form>
<script type="text/javascript">
document.getElementById("getJSON").onclick = function(){
	var obj = {};
	Array.prototype.forEach.call(this.form.elements, function(el){
		if (el.name){
			if (el.type === "checkbox"){
				obj[el.name] = el.checked;
			}
			else if (el.type === "radio" && el.checked){
				obj[el.name] = el.value;
			}
			else {
				obj[el.name] = el.value;
			}
		}
	});
	alert(JSON.stringify(obj, null, "\t"));
}
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben