In my web application, I have a form that provides me to create new blog. The code is:
<form method="post" action="#" id="createBlog">
<div class="form-group">
<label for="BlogName">Blog Name</label>
<input type="text" class="form-control" placeholder="Blog Name" name="blogName">
</div>
<div class="form-group">
<label for="Content">Content</label>
<textarea type="text" class="form-control" placeholder="content" name="content"></textarea>
</div>
<div class="form-group">
<label for="Image">Upload Image</label>
<input type="file" class="form-control" name="myImage">
</div>
<button type="button" name="Add more image" class="btn btn-default" onclick="addMoreFile()">+ Add More Image</button>
<br>
<br>
<button type="submit" name="send" class="btn btn-default" value="Send">Send</button>
</form>
For this form, my plan is that when I press the "+ Add More Image" button, to create additional file upload area, which is:
<div class="form-group">
<label for="Image">Upload Image</label>
<input type="file" class="form-control" name="myImage">
</div>
To do this, I used Javascript and applied two approaches. When I used my first approach which is my prefer due to it is more easy to implement, nothing happened. For my second approach, it works.
First Approach:
function addMoreFile(){
var createForm = document.getElementById("createBlog");
var uploadFile = createForm.getElementsByTagName("div")[2];
var firstButton = createForm.getElementsByTagName("button")[0];
createForm.insertBefore(uploadFile,createForm.getElementsByTagName("button")[0]);
}
Second Approach:
function addMoreFile(){
var divNode = document.createElement("div");
divNode.setAttribute("class","form-group");
var labelNode = document.createElement("label");
labelNode.setAttribute("for","Image");
labelNode.innerHTML = "Upload Image";
var myInput = document.createElement("input");
myInput.setAttribute("type","file");
myInput.setAttribute("class","form-control");
myInput.setAttribute("name","myImage");
divNode.appendChild(labelNode);
divNode.appendChild(myInput);
createForm.insertBefore(divNode,createForm.getElementsByTagName("button")[0]);
}
What is the difference between two approaches/codes, and why it is not work when I apply the first approach?
Related
how can i change the avatar image of my page when i fill the form? i'm still new with js so i don't know a lot of stuff, i'm studying it
<div class="profile__avatar-overlay">
<img class="profile__avatar" src="my-img" alt="Аvatar">
<button type="submit" class="profile__edit-button"></button>
</div>
<form class="form" id="form-avatar">
<button type="button" class="popup__close"></button>
<p class="form__text">Edit Profile</p>
<label class="form__field">
<input type="url" placeholder="New image url" id='url-avatar' class="form__input" value="" required>
<span id="url-avatar-error" class="form__input-error"></span>
</label>
<button type="submit" class="form__submit">Save</button>
</form>
I was trying this function but nothing happen in the page. I tried
function changeAvatar() {
const inputAvatarValue = formAvatarInput.value;
profileAvatar.src = inputAvatarValue;
return changeAvatar;
};
formUpdateAvatar.addEventListener('submit', changeAvatar);
enter code hereI have an issue with my html. I am trying to save an input to my localstorage. For some reason, whenever I inspect my website I don't see the word I typed in my field. In other words it is not loading the input to my localstorage.
I am new to html and javascript and I am hoping you guys can help me out. I'm providing a picture to demostrate what I am trying to approach.
function getInput(){
var nameInput = document.getElementById('inputName').value;
localStorage.setItem('text', dataInput);
var dateInput = document.getElementById( 'inputDate').value;
localStorage.setItem('text1', dateInput);
}
<form class="form-horizontal">
<fieldset>
<legend>Endorse me</legend>
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Date</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputDate" placeholder="Date">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button onCLick="getInput()" type="submit" class="btn btn-primary" >Submit</button>
</div>
</div>
</fieldset>
</form>
Have HTML (part):
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
</form>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</div>
I need to add class "modal-error" for div.modal-write-us if submitted form have empty field/fields.
JS:
var modalWriteUs = document.querySelector('.modal-write-us');
var form = modalWriteUs.querySelector('form');
var userName = modalWriteUs.querySelector('[name=user-name]');
var eMail = modalWriteUs.querySelector('[name=e-mail]');
var textArea = modalWriteUs.querySelector('[name=text]');
form.addEventListener('submit', function(event) {
if (!userName.value || !eMail.value || !textArea.value) {
event.preventDefault();
modalWriteUs.classList.add('modal-error');
}
});
But class is not added. Where is my mistake?
First of all, you need to place your submit button into the form.
Then, change submit button to input:
<input class="btn btn-red" type="submit">Submit</input>
Now you need to make some fixes in your JS.Use double quotes in atttribute selectors:
querySelector('[name="user-name"]')
Attribute required doesn't allow to submit empty form, so your submit callback never runs.If you remove required attribute your code will work.
If you put <button class="btn btn-red" type="submit">Submit</button> inside the <form> it should work.
See working Plunker.
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</form>
</div>
EDIT: More explanation here:
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
I am not able to enter the data to the previous page using ng-model. I moved to the next page after filling some data in textbox, after come to same page I want my data to be entered same as I entered previously, I write the code but its not working please tell me what I am doing wrong and thanks in advance
js code:
$scope.notesPage = function() {
$rootScope.data = {
Name: $scope.prospectName,
};
$location.path('/prospectNotes');
};
$scope.addProspect = function() {
$rootScope.data.ProspectNotes = $scope.notes;
$scope.ProspectNotes = "";
};
function fillFormData() {
$scope.prospectName = $rootScope.data.Name;
}
$scope.addProspectForm = function() {
$location.path('/create');
fillFormData();
}
first html page
<div class="container" id="form-container">
<div class="form-group">
<label for="prospectName"> Prospect Name:
<img src="images/required.gif" alt="Required" class="required-star">
</label>
<input type="text" id="prospectName" name="prospectName" ng-model="prospectName" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="notesPage()" style="margin-left:10px;"> Next </button>
</div>
</div>
second html page
<div class="container" id="form-container">
<div class="form-group">
<label for="notes"> Notes for Prospect {{data.Name}}</label>
<textarea rows="20" id="notes" name="notes" ng-model="notes" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="button" id="cancel-button" value="Back" class="col-sm-2 btn btn-primary" ng-click="addProspectForm()">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="addProspect()" style="margin-left:10px;"> Add </button>
</div>
</div>
Use a factory to store your data and then retrieve the same.
check this one:
Can I keep the model value when click browser back button with angularjs?
I'm trying to code this form in sharing.html so that when one is done putting in information and want to add more contacts, they can click on "add another contact" but when I tried to write out the code, the dreamweaver I was using said that there's a error in Javascript. I don't know how I can fix this error: (the script is almost at the bottom)
<div class="recordsbox">
<h1>Sharing Center</h1>
<p>Please enter the contact information that you want to share.</p>
<div id="shareform">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
<div class="addcontact">
<input type="button" value="Add another contact?" onClick="addForm('shareform');">
</div>
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>
<div class="nextbutton">
Next
</div>
</div>
I based this code on that tutorial: http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/.
Also you can check out full code at http://hamzakhan.name/dev/eric/options_innerpage/sharing.html
For a quicker look, here is the script in question:
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>
Here is the new code:
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'"><form id="share" method="POST"><div class="notifyfield2"><div class="sharefield"><label>Who is this person?</label><input type="text"></div></div><div class="notifyfield"><label>Email Address:</label><input type="email" ></div><div class="notifyfield"><label>Phone Number:</label><input type="tel" ></div></form><hr class="greenline"></div>';
document.getElementById(divName).appendChild(newform);
shareform++;
}
You need to delete all invisible characters. You can't "newline" string.