javascript How to add constructor object with user input
Question
I'm looking for help troubleshooting this code. My assignment is to make a blog which I can make multiple new articles on. I am using an event listener, linked to the submit button. But when I run the code with text inserted in the textboxes nothing happens. I am given no console errors, so I don't know what is going wrong. Please ask for more information if needed, as I might've missed something crucial.
The problem seems to be, that I can't seem to make another constructor object inside my function. What is going wrong here.. Am I missing something?
Thanks in advance.
//Post object model function Post(title, image, text) { this.title = title; this.date = new Date(); this.image = image; this.text = text; } //Blog object model function Blog() { this.post = []; this.addPost = function(post) { this.post.push(post); } } //new Post object var post1 = new Post('1', 'hej.jpg', 'hej hej hej'); //new Blog object var blog = new Blog; //adds the post to the empty array blog.addPost(post1); //function to add Blog posts to HTML content function addToHTML() { for(var i = 0; i < blog.post.length; i++) { var article = document.querySelector('#blog_posts'); var title = document.createElement('h1'); var date = document.createElement('p'); var image = document.createElement('img'); var text = document.createElement('p'); var blog_title = blog.post[i].title; var blog_date = blog.post[i].date; var blog_image = blog.post[i].image; var blog_text = blog.post[i].text; title.textContent=blog_title; date.textContent=blog_date; image.setAttribute('src', blog_image); text.textContent=blog_text; article.appendChild(title); article.appendChild(date); article.appendChild(image); article.appendChild(text); } } //Submit button var submit = document.getElementById('submit'); //Event listener submit.addEventListener('click', function getTarget() { var jsTitleInput = document.getElementById('title_input').value; var jsImageInput = document.getElementById('image_input').value; var jsTextInput = document.getElementById('text1_input').value; var newPostf = new Post(jsTitleInput, jsImageInput, jsTextInput); blog.addPost(newPostf); })
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CodeCamp blog</title> <link href="css.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="container"> <h1 id="maintitle">Foodparadise</h1> <nav id="menu"> <ul> <li class="menu_left"><a href="">Home</a></li> <li class="menu_left"><a href="">About</a></li> <li class="menu_right"><input type="text" name="search" placeholder="Search.."></li> <li class="menu_right"><a href="" id="new_post" class="btn">New post</a> </ul> </nav> <article id="blog_posts"></article> <article id="archive"></article> <div id='newPost'> <form action='html.html' method='post'> <p>Title:</p> <input type='text' name='title' id='title_input'> <p>Image Name: </p> <input type='text' name='image name' id='image_input'> <p>Text:</p> <input type='text' name='text' id='text1_input'> <br/> <input type='submit' name='submit' value='Submit' id='submit'> </form> </div> </div> <script src="js.js"></script> </body> </html>
2 answers
solution1
0 2016-10-15 16:31:50
I just run your code in my system to understand you need. I noticed few thing. As per code you are trying to form submit which will be POST active and will redirect to file namely html.html . But html.html is not provided by you. First thing if your submitting form then on button click you will redirect to the action URL . As per your code I just altered few things into your code, I just changed action URL and now you can see if you write anything in textbox then it will show you on below of submit button.
To run this code just save this file into .php extension. At the end of HTML snippet php code is written you just put php code into same file. Like make file name demo.php and put both HTML and PHP into same file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CodeCamp blog</title>
<link href="css.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<h1 id="maintitle">Foodparadise</h1>
<nav id="menu">
<ul>
<li class="menu_left"><a href="">Home</a></li>
<li class="menu_left"><a href="">About</a></li>
<li class="menu_right"><input type="text" name="search" placeholder="Search.."></li>
<li class="menu_right"><a href="" id="new_post" class="btn">New post</a>
</ul>
</nav>
<article id="blog_posts"></article>
<article id="archive"></article>
<div id='newPost'>
<form action='' method='post'>
<p>Title:</p>
<input type='text' name='title' id='title_input'>
<p>Image Name: </p>
<input type='text' name='image_name' id='image_input'>
<p>Text:</p>
<input type='text' name='text' id='text1_input'>
<br/>
<input type='submit' name='submit' value='Submit' id='submit'>
</form>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
<?php
if(isset($_POST['submit'])){ //check if form was submitted
$title = $_POST['title']; //get input text
$image_name = $_POST['image_name']; //get input text
$text = $_POST['text']; //get input text
$message = "Your title is: ".$title.'<br>'.'and image name is: '.$image_name."<br>".'and text is: '.$text;
echo $message;
} ?>
solution2
0 ACCPTED 2016-10-15 17:58:15
Couple things:
IF your intention is to stay on the same page, you have to remove the method and action from the form.
<form action='' method='post'>
becomes
<form>
And then call e.preventDefault() inside of the submit event handler
submit.addEventListener('click', function getTarget(e) {
e.preventDefault()
You did not call the addToHTML function anywhere
submit.addEventListener('click', function getTarget(e) {
e.preventDefault()
var jsTitleInput = document.getElementById('title_input').value;
var jsImageInput = document.getElementById('image_input').value;
var jsTextInput = document.getElementById('text1_input').value;
var newPostf = new Post(jsTitleInput, jsImageInput, jsTextInput);
blog.addPost(newPostf);
addToHTML();
});
Final result:
//Post object model function Post(title, image, text) { this.title = title; this.date = new Date(); this.image = image; this.text = text; } //Blog object model function Blog() { this.post = []; this.addPost = function(post) { this.post.push(post); } } //new Post object var post1 = new Post('1', 'hej.jpg', 'hej hej hej'); //new Blog object var blog = new Blog(); //adds the post to the empty array blog.addPost(post1); //function to add Blog posts to HTML content function addToHTML() { for(var i = 0; i < blog.post.length; i++) { var article = document.querySelector('#blog_posts'); var title = document.createElement('h1'); var date = document.createElement('p'); var image = document.createElement('img'); var text = document.createElement('p'); var blog_title = blog.post[i].title; var blog_date = blog.post[i].date; var blog_image = blog.post[i].image; var blog_text = blog.post[i].text; title.textContent=blog_title; date.textContent=blog_date; image.setAttribute('src', blog_image); text.textContent=blog_text; article.appendChild(title); article.appendChild(date); article.appendChild(image); article.appendChild(text); } } //Submit button var submit = document.getElementById('submit'); //Event listener submit.addEventListener('click', function getTarget(e) { e.preventDefault() var jsTitleInput = document.getElementById('title_input').value; var jsImageInput = document.getElementById('image_input').value; var jsTextInput = document.getElementById('text1_input').value; var newPostf = new Post(jsTitleInput, jsImageInput, jsTextInput); blog.addPost(newPostf); addToHTML(); });
<div id="container"> <h1 id="maintitle">Foodparadise</h1> <nav id="menu"> <ul> <li class="menu_left"><a href="">Home</a></li> <li class="menu_left"><a href="">About</a></li> <li class="menu_right"><input type="text" name="search" placeholder="Search.."></li> <li class="menu_right"><a href="" id="new_post" class="btn">New post</a> </ul> </nav> <article id="blog_posts"></article> <article id="archive"></article> <div id='newPost'> <form> <p>Title:</p> <input type='text' name='title' id='title_input'> <p>Image Name: </p> <input type='text' name='image name' id='image_input'> <p>Text:</p> <input type='text' name='text' id='text1_input'> <br/> <input type='submit' name='submit' value='Submit' id='submit'> </form> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.