CODEWITHSUNDEEP
javascripthtmlcssformsobject
SKD
SKD

Reputation: 61

Collecting Form data from HTML and rendering using Javascript as card component from Bootstrap is used

I was trying to figure out how can i add or display form data from this index.html page and as of now i did collect the data in the backend, but finding ways on how to display the data in frontend as a card component which i used from bootstrap , appreciate your efforts if anyone could help me on this !

my index.html :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>  
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid ">
        <a class="navbar-brand " href="index.html">EBlogs</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </nav>
  </header>  
  <main>
    <div class="card" style="margin-left: 500px; margin-top: 100px; width: 40rem;">
        <img src="./images/mountains.jpg" class="card-img-top" alt="mountains">
        <div class="card-body">
          <h5 class="card-title">Mountains</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <button type="button" class="btn btn-primary" onclick="UpdateImage()">Update Blog</button>
          <button type="button" class="btn btn-danger" onclick="addImage()">Delete Blog</button>
        </div>
      </div>
      <form id="addBlog" method="POST">
        <div class="container contaier-lg">
        <div class="mb-3">
          <label for="Title" class="form-label">Title for a Blog :</label>
          <input type="text" class="form-control" id="title" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
          <label for="Content" class="form-label">Content :</label>
          <input type="text" class="form-control" id="content">
        </div>
        <div class="mb-3">
            <label for="User" class="form-label">Created By :</label>
            <input type="text" class="form-control" id="username">
          </div>
        <button type="button" class="btn btn-primary" onclick="addImage()">Add Blog</button>
      </form>
    </div>
  </main>
<script src="backend.js"></script>
</body>
</html>

my backend.js : (as of now ) :

var card = []
function addImage(){

var title = document.getElementById("title").value
var content = document.getElementById("content").value 
var user = document.getElementById("username").value 
card = {title,content,user}

function adder(card){
    for(let i=0;i<card.length;i++){
        card.push(card[i])
    }
    return card
}
console.log(adder(card))
}

i was try using append method with inner.HTML methods but not working out.. the view when i add the contents would be something like this : enter image description here

Upvotes: 0

Views: 1187

Answers (1)

Nikhil Parmar
Nikhil Parmar

Reputation: 772

var card = []
function addImage(){
var title = document.getElementById("title").value
var content = document.getElementById("content").value 
var user = document.getElementById("username").value 
card = {title,content,user}

var cardTemplate = '    <div class="card" style="margin-left: 500px; margin-top: 100px; width: 40rem;">                                            '+
    '    <img src="./images/mountains.jpg" class="card-img-top" alt="mountains">'+
    '    <div class="card-body">'+
    '      <h5 class="card-title">'+ title +'</h5>'+
    '      <p class="card-text">'+ content +'</p>'+
    '      <button type="button" class="btn btn-primary" onclick="UpdateImage()">Update Blog</button>'+
    '      <button type="button" class="btn btn-danger" onclick="addImage()">Delete Blog</button>'+
    '    </div>'+
    '  </div>'
    '</div>';

document.getElementById("addBlog").insertAdjacentHTML("beforebegin", cardTemplate);

function adder(card){
    for(let i=0;i<card.length;i++){
        card.push(card[i])
    }
    return card
}
console.log(adder(card))
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>  
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid ">
        <a class="navbar-brand " href="index.html">EBlogs</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </nav>
  </header>  
  <main>
    <div class="card" style="margin-left: 500px; margin-top: 100px; width: 40rem;">
        <img src="./images/mountains.jpg" class="card-img-top" alt="mountains">
        <div class="card-body">
          <h5 class="card-title">Mountains</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <button type="button" class="btn btn-primary" onclick="UpdateImage()">Update Blog</button>
          <button type="button" class="btn btn-danger" onclick="addImage()">Delete Blog</button>
        </div>
      </div>
      <form id="addBlog" method="POST">
        <div class="container contaier-lg">
        <div class="mb-3">
          <label for="Title" class="form-label">Title for a Blog :</label>
          <input type="text" class="form-control" id="title" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
          <label for="Content" class="form-label">Content :</label>
          <input type="text" class="form-control" id="content">
        </div>
        <div class="mb-3">
            <label for="User" class="form-label">Created By :</label>
            <input type="text" class="form-control" id="username">
          </div>
        <button type="button" class="btn btn-primary" onclick="addImage()">Add Blog</button>
      </form>
    </div>
  </main>
<script src="backend.js"></script>
</body>
</html>

Upvotes: 1

Related Questions