I want to use value of a textarea element, but I am not able to get it
function postComment(element) {
const content = element.previousSibling.value;
console.log(content);
}
<form action="" class="comment-editor">
<div class="form-group">
<textarea class="form-control" name="" id="someid" rows="4"></textarea>
<button type="button" class="btn btn-primary my-2" onClick="postComment(this)">Comment</button>
</div>
</form>
It gives undefined as output
Can you try the below code
function postComment(element) {
const content = element.parentNode.firstElementChild.value
console.log(content);
return false;
}
<form action="" class="comment-editor">
<div class="form-group">
<textarea class="form-control" name="" id="someid" rows="4"></textarea>
<button type="button" class="btn btn-primary my-2" onClick="return postComment(this)">Comment</button>
</div>
</form>
function postComment(element) {
const content = element.previousElementSibling.value;
console.log(content);
}
<form action="" class="comment-editor">
<div class="form-group">
<textarea class="form-control" name="" id="someid" rows="4"></textarea>
<button type="button" class="btn btn-primary my-2" onClick="postComment(this)">Comment</button>
</div>
</form>
Your problem is that you use previousSibling when it should be previousElementSibling.
Since you already have an ID for the <input> field, i would have used the following instead:
function postComment() {
const content = document.getElementByID("someid").value;
console.log(content);
}
And no need for the parameter here:
onClick="postComment();"
You can fetch value by this modification in your code
const content = document.querySelector("#someid").value;
Related
first post here, i'm trying to write a code following a tutrial, its a to do list and i wrote a function that takes the content of a text type input and adds it to a list, im testing the code using an alert inside the function but it doenst work and no alerts are shown, here's the code. Thanks in advance
let elements = [];
function addElements(){
if (document.querySelector("#task").nodeValue.trim() != ""){
elements.push(document.querySelector("#task").nodeValue.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
<script src="../todo_list/apps.js"></script>
</body>
So your problem was you didn't call addElements() on your button.
and instead of using nodeValue just use value instead.
this is working code
let elements = [];
function addElements(){
console.log(document.querySelector("#task").value)
if (document.querySelector("#task").value.trim() != ""){
elements.push(document.querySelector("#task").value.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
</body>
First you need to stop the html form submit with
<form action="#" id="todoForm" onsubmit="return false;">
Then you need to bind click function to your button, so that when button clicked your addElements function will be triggered
<button class="addBtn" onclick="addElements()">
Finally you need to get the input value with
document.getElementById('task').value;
Complete Code Sample
let elements = [];
function addElements() {
var task = document.getElementById('task').value;
if (task.trim() != "") {
elements.push(task);
alert(elements)
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm" onsubmit="return false;">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
</form>
</div>
</body>
I got a problem I need to fill two fields in a form with diffrent values and I would like to do that with an button onClick function.
I genererat buttons and the output looks like this:
<button class="btn btn-primary" type="button" onclick="fillsquare(test, 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare(test2, 3)">1</button>
Now I want to fill my form with the values
the first value I want to be placed in the first field id="areaname_fill" and the secound value should fill the field id="squarename_fill".
Just to clarify, If I click on the first button
id="areaname_fill" should set the value to "Test" AND
id="squarename_fill" should set the value to 1.
<div class="form-group">
<label>fyll i område</label>
<input type="text" name="areaname_fill" id="areaname_fill" class="form-control" value="" />
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input type="text" name="squarename_fill" id="squarename_fill" class="form-control" value="" />
</div>
I came up with this JS but I can't get it to work, any ides?
function fillsquare(area,square)
{
var area = area;
var square = square;
document.getElementById(areaname_fill).value = area;
document.getElementById(squarename_fill).value = square;
}
You can achieve it in this way
document.getElementById("areaname_fill").value=area;
document.getElementById("squarename_fill").value=square;
And here
<button class="btn btn-primary" type="button" onclick="fillsquare('test', 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare('test2', 3)">1</button>
function fillsquare(area,square)
{
document.getElementById("areaname_fill").value = area;
document.getElementById("squarename_fill").value = square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>fyll i område</label>
<input type="text" name="areaname_fill" id="areaname_fill" class="form-control" value="">
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input type="text" name="squarename_fill" id="squarename_fill" class="form-control" value="">
</div>
<button class="btn btn-primary" type="button" onclick="fillsquare('test', 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare('test2', 3)">1</button>
It's generally recommended that you avoid using inline javascript like onClick="foo"
If possible, you should change your markup to to include the values in the button markup and then add a click event listener to extract and the data and use it in the form. Here's an example of that.
const buttons = document.querySelectorAll("button");
const areaField = document.getElementById("areaname_fill");
const squareField = document.getElementById("squarename_fill");
buttons.forEach(button => {
button.addEventListener("click", () => {
areaField.value = button.dataset.area;
squareField.value = button.dataset.square;
});
});
<div class="form-group">
<label>fyll i område</label>
<input
type="text"
name="areaname_fill"
id="areaname_fill"
class="form-control"
value=""
>
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input
type="text"
name="squarename_fill"
id="squarename_fill"
class="form-control"
value=""
>
</div>
<button class="btn btn-primary" type="button" data-area="test" data-square="1">
First button
</button>
<button class="btn btn-primary" type="button" data-area="test2" data-square="3">
Second button
</button>
Try the below code. The quotes are missing in onclick and in the document.getElementById as the test and test2 are string, and the document.getElementById expects a string argument (the element id).
function fillsquare(area, square) {
var area = area;
var square = square;
document.getElementById("areaname_fill").value = area;
document.getElementById("squarename_fill").value = square;
}
<body>
<button
class="btn btn-primary"
type="button"
onclick="fillsquare('test', 1)"
>
1
</button>
<button
class="btn btn-primary"
type="button"
onclick="fillsquare('test2', 3)"
>
1
</button>
<div class="form-group">
<label>fyll i område</label>
<input
type="text"
name="areaname_fill"
id="areaname_fill"
class="form-control"
value=""
/>
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input
type="text"
name="squarename_fill"
id="squarename_fill"
class="form-control"
value=""
/>
</div>
document.getElementById("areaname_fill").value=area;
document.getElementById("squarename_fill").value=square;
You should Add double quotes to fix it.
I am trying to create a form such that the user can enter HTML code in the textarea which can be rendered when the Preview button is clicked and submitted to the database when the Submit button is clicked. But the data is being submitted when the preview button is clicked.
HTML Code:
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button class="btn" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
The preview button is a submit button!
If you want it to be Just For JavaScript, add type="button".
You need to specify the button's type type="button". If you do not specify the type attribute of a button, it will default to submit, as such it is submitting your form.
MDN docs on button
In your preview button add a type="button" if you don't added by default the form will treat it as a submit button..
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button type="button" class="btn" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
There is something you're missing, you haven't included your type which should be type="button", i.e
<button class="btn" type="button" onclick="parse()">Preview</button>.
You will need to include it between the preview button tag.
Which should make you new code look like the one below.
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button class="btn" type="button" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
This should help you.
Change Button type in your code like:
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button type="button" class="btn" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
<script>
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
</script>
how can i take the parameter(number) on a bootstrap input element when i click on the button??
<form>
<div class="form-group">
<div class ="col-md-6 input-group">
<span class="input-group-addon">Larghezza</span>
<div id="myNumber"> <input type="number" class="form-control" id="focusedInput" placeholder="Inserisci qui..." > </div>
</div>
</div>
</form>
<button type="button" onclick="myFunction()" class="btn btn-default">Calcola</button>
my js code... Then i use the number for some math operation
function myFunction() {
var x = document.getElementById("myNumber").value;
You are reading value property of div element while it is a property of the input.
Use id of input and it will work.
function myFunction() {
var x = document.getElementById("focusedInput").value;
console.log(x);
}
<form>
<div class="form-group">
<div class ="col-md-6 input-group">
<span class="input-group-addon">Larghezza</span>
<div id="myNumber">
<input type="number" class="form-control" id="focusedInput" placeholder="Inserisci qui..." >
</div>
</div>
</div>
</form>
<button type="button" onclick="myFunction()" class="btn btn-default">Calcola</button>
var x = document.getElementById("focusedInput").value;
You need to reference the input element, not its container.
I have 4 forms in my html, and required that form's id which submitted. But every time constantly first form's id comes in output.
My HTML is:
<form name="form" id="filterHeadByFamNum" class="form-horizontal" role="form">
<div class="form-group">
<label>Family Number</label> <input type="text" name="familyNumber" placeholder="Family Number" class="form-control">
</div>
<button type="button" class="btn btn-primary" onclick="filterByFamNum();return false;">Submit</button>
</form>
<form name="form" id="filterHeadByMemName" class="form-horizontal" role="form">
<div class="form-group">
<label>Head Name</label> <input type="text" name="head" placeholder="Head Name" class="form-control">
</div>
<button type="button" class="btn btn-primary" id="head" onclick="filterByMemName();return false;">Submit</button>
</form>
<form name="form" id="filterMemberByPhone" class="form-horizontal" role="form">
<div class="form-group">
<label>Phone Number</label> <input type="text" name="phone" placeholder="Phone Number" class="form-control">
</div>
<button type="button" class="btn btn-primary" onclick="filterByPhone();return false;">Submit</button>
</form>
<form name="form" id="filterMemberByCNIC" class="form-horizontal" role="form">
<div class="form-group">
<label>CNIC</label> <input type="text" name="cnic" placeholder="CNIC" class="form-control">
</div>
<button type="button" class="btn btn-primary" onclick="filterByCNIC();return false;">Submit</button>
</form>
and my js is
function filterByFamNum(){
var name = $(this.form).attr('id');
console.log(name);
}
function filterByMemName(){
var name = $(this.form).attr('id');
console.log(name);
}
function filterByPhone(){
var name = $(this.form).attr('id');
console.log(name);
}
function filterByCNIC(){
var name = $(this.form).attr('id');
console.log(name);
}
Ouptut of every form submit is constantly filterHeadByFamNum
Rather than adding event listeners to the buttons, just listen for the submit event on the form:
$('form').on('submit', function () {
var id = this.id;
console.log(id);
});
..or without jQuery:
Array.prototype.forEach.call(document.querySelectorAll('form'), function (el) {
el.addEventListener('submit', function () {
var id = el.id;
console.log(id);
});
});
I would use #JoshCrozier's solution for this problem but just for the sake of completion and/or if you're adamant about using your solution instead. Here it is:
jsbin DEMO -> http://jsbin.com/yiteludomu/2
Add this as a parameter in each of your javascript functions to send the button you're clicking.
<button type="button" class="btn btn-primary" onclick="filterByFamNum(this);return false;">Submit</button>
here is how you handle button click .. observe btn which is the clicked button.
function filterByFamNum(btn){
var name = $(btn).parent('form').attr('id');
alert(name);
}
var submittedForms = [];
$('form').on('submit', function () {
submittedForms.push(this.id);
});
submittedForms array will hold the ids of all the submitted form.