0

In my js file, I have a function that displays the users data on the screen, but for some reason, that is what prevents the data being saved to the database. I want to have both, so without the js file, it saves it to the database.

Edit: What I am basically trying to do is upload the clients entered content on screen permanently so other clients will be able to see it all while saving it to the database. But my issue is that my js script is preventing the clients content from being saved to the database. I am new to angular, but I would very much appreciate it if someone can provide an example using $http.post, if that would help what I am asking for.

Edit: I kind of found my problem, but I have not solved it fully. The ng-click from the button element was preventing the clients data from being saved to the db, but now the button after submission is enabled, resulting in submitting many forms. How can I approach this? I am fairly new to this site, so does this change my question?

HTML

<form action="/blog" method="POST">
    <div id="textarea-format-structure">
        <textarea name="dummyInfo" id="blogVal" ng-model="textAreaValue" 
         ng-change="textChange()" ng-focus="btnChange = true" />
    </div> 
  <button ng-disabled="btnChange" ng-click="btnChange = true"  class="btnpost">Post</button>
</form> 
<div id="my-posts-blog"></div>

JS

 function postVal() {
     var blogVal = document.getElementById("blogVal");
     var appendVal = document.getElementById("my-posts-blog");
     var create_div = document.createElement("div");

     create_div.textContent = blogVal.value;
     create_div.classList.add("post");
     appendVal.prepend(create_div);

     blogVal.value = "";
  }
      document.getElementById("blogVal").focus();
      var postIt = document.querySelector(".btnpost");
         postIt.addEventListener("click", postVal, false);

NODE.JS 

router.post("/blog", (req, res) => { 
       mongo.connect(url, { useNewUrlParser: true }, (err, client) => { 
        var db = client.db("test");
        db.collection("collect").insertOne({ myBlog: req.body.dummyInfo});
   });
 });
Josh Lee
  • 149,877
  • 34
  • 253
  • 263
Unbreachable
  • 544
  • 6
  • 16
  • add angularJS tag to the question as well. – B45i Jun 26 '19 at 05:13
  • It sounds like what you want to do is submit your form data to the server so it can be saved without causing the page to reload. Is this correct? If so, then the tool you need to use is "Ajax", which is short for "asynchronous JavaScript". You can find examples of Ajax form submits all over the place, such as [here](https://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax/16324058). – B. Fleming Jun 26 '19 at 05:29
  • Sergio you cannot just edit to "question solved". You must not deface your question which now belongs to StackOverflow site according to creative commons license. Josh edited back into shape. I've locked it temporarily. Please, if you must edit, do it carefully. – Jean-François Fabre Jun 27 '19 at 19:33

1 Answers1

0

If you are using angularjs then why don't you use $http.post ?

  • So on ng-click you can make a function call, in that function set whatever variables you want to set, get ready with the data to pass and make a call in backend using $http.post with parameters. It will not refresh you screen.
Saima Haji
  • 152
  • 5