在div JavaScript ajax中显示输入数据（无jquery）

Question

I am new to javascript and ajax,and i am working in jsfiddle: my aim is to display the username and email in a list when the form is submitted. currently when i submit the form i get this error: {"error":"key missing: title"}

I'm not sure what im doing wrong, Any form of assistance will be highly appreciated

Here is my code so far

 var Uname = document.getElementById("name"); var email = document.getElementById("email"); var error = document.getElementById("errors"); var emailReg = /^([\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,6})?$/; var btn = document.getElementById("btn"); var users = document.getElementById("users"); /*EMAIL VALIDATION*/ email.onkeyup =function validateEmail(){ if(!emailReg.test(email.value)){ error.innerHTML = "please enter a valid email address"; error.style.color = "red"; email.style.border = "3px solid red"; } else if(emailReg.test(email.value)){ error.innerHTML = "valid email!"; error.style.color = "green"; email.style.border = "3px solid green"; } }; /*EMAIL VALIDATION END*/ /* GET INPUT FIELD VALUES */ var username = Uname.value; var email2 = email.value; /* CALLBACK FUNCTION */ function callBack(){ var newLi = document.createElement("li"); var newContent = document.createTextNode("text"); newLi.appendChild(newContent); } addUser(username, email2, callBack); function addUser(username, email, callback) { var response, success = (!!Math.round(Math.random())); if(!success){ response = JSON.stringify({ success: success, error: "Oups, something went wrong!" }); } else { response = JSON.stringify({ success: success, user: { username: username, email: email } }); } $.ajax({ url: '/echo/json/', type: "post", data: { json: response }, success: callback }); } 

 <h2>Add a User:</h2> <form id="add-user" method="POST" > <input type="text" id="name" name="username" placeholder="name"/> <input type="email" id="email" name="email" placeholder="email"/> <button id="btn" onclick="return addUser()">add user</button> </form> <div id="errors"></div> <h2>Users:</h2> <ul id="users"></ul> 

:

Answer 1

That is possible, just make sure you don't wrap everything around a form. Cause when you click add user that will trigger a postback, or you can do this

Updated fiddle.

And BTW if you are using jquery you do not need to use document.getElementById you can just use $("#SOMEELEMENTID") ; and you don't need document.createElement just use $("#users").append()

And a side note you can use this to serialize a form into json.