What should i do if i need to replace the "test test" message with custom one using JavaScript?
<div class="outputmsg_container" style="" id="output_messages"><
button class="btn btn-icon close icon-cross" onclick="GlideUI.get().clearOutputMessages(this); return false;">
<span class="sr-only">Close Messages"</span>
</button>
<div class="outputmsg_div">
<div class="outputmsg outputmsg_error notification notification-error"><img class="outputmsg_image" src="images/outputmsg_error_24.gifx" alt="">
<span class="outputmsg_text">test test</span>
</div>
</div>
</div>
Use innerHTML to change the HTML inside an element.
<label for="newhtml">HTML (or text) to be inserted inside div:</label>
<br/>
<input type="text" id="newhtml"/>
<br/>
<input type="button" id="change" value="Insert" onClick="change()"/>
<br/>
<span id="container"></span>
<script>
function change(){
document.getElementById("container").innerHTML = document.getElementById("newhtml").value;
}
</script>
Here is an example to do this with jquery.
$('.outputmsg_text').html("YOUR CUSTOM TEXT")
Here's an example JSFiddle (REQUIRE JQUERY)
<button id="change">Change Text</button>
<div id="div">
Some text
</div>
<script>
$("#change").click(function(){
var name = prompt("What text shoud it be?");
if(name){
$("#div").html(name);
}
});
</script>
Related
I got a form where I want to dynamically add input fields, if the users clicks on a "add more" button. At the moment it works to create the buttons on click, but the buttons do no get created at the position where I want them to be. Here is my HTML Code Snippet:
window.addEventListener("load", function() {
var addMoreButtons = document.querySelectorAll("#add-more1, #add-more2");
addMoreButtons.forEach(function(button) {
button.addEventListener("click", function() {
console.log(button);
// Create a div
var div = document.createElement("div");
// Create a text input
var text = document.createElement("input");
text.setAttribute("type", "text");
text.setAttribute("name", "More");
text.setAttribute("placeholder", "Weitere hinzufügen");
// add the file and text to the div
div.appendChild(text);
//Append the div to the container div
document.querySelector(".buttonTest").appendChild(div);
});
});
});
<div class="user-details">
<div class="input-box">
<span class="details">Stärken</span>
<input type="text" placeholder="Stärken, z.B. 'Kommunikativ'" id="strenghts">
<div class="buttonTest">
<button type="button" class="add-more" id="add-more1">+ Weitere
hinzufügen</button>
</div>
</div>
<div class="input-box">
<span class="details">Technische Fähigkeiten</span>
<input type="text" placeholder="Technische Fähigkeiten, z.B. 'JavaScript'" id="tech">
<div class="buttonTest">
<button type="button" class="add-more" id="add-more2">+ Weitere hinzufügen</button>
</div>
</div>
</div>
Now every time when the first (#add-more1) or second (#add-more2) button is clicked, the input field gets created below the first button. But I want the input fields to appear where the button was clicked. For example:
If the first button is clicked I want the input field to be created below the first button. And if the second button is clicked I want the input field to be created below the second button and not below the first button.
Thanks for your help! :)
You need to use parentElement
https://www.w3schools.com/jsref/prop_node_parentelement.asp
Example:
window.addEventListener("load", function() {
var addMoreButtons = document.querySelectorAll("#add-more1, #add-more2");
addMoreButtons.forEach(function(button){
button.addEventListener("click", function() {
console.log(button);
// Create a div
var div = document.createElement("div");
// Create a text input
var text = document.createElement("input");
text.setAttribute("type", "text");
text.setAttribute("name", "More");
text.setAttribute("placeholder", "Weitere hinzufügen");
// add the file and text to the div
div.appendChild(text);
//Append the div to the container div
button.parentElement.appendChild(div);
});
});
});
<div class="user-details">
<div class="input-box">
<span class="details">Stärken</span>
<input type="text" placeholder="Stärken, z.B. 'Kommunikativ'" id="strenghts">
<div class="buttonTest">
<button type="button" class="add-more" id="add-more1">+ Weitere
hinzufügen</button>
</div>
</div>
<div class="input-box">
<span class="details">Technische Fähigkeiten</span>
<input type="text" placeholder="Technische Fähigkeiten, z.B. 'JavaScript'" id="tech">
<div class="buttonTest">
<button type="button" class="add-more" id="add-more2">+ Weitere hinzufügen</button>
</div>
</div>
</div>
I have simplified your code somewhat, using event delegation and [element].insertAdjacentHTML to add a text input element. For the new text input element, a copy of the old one is used. Using insertAdjacentHTML gives you control over the placement of the new element (here: after the div containing the clicked button, cf afterend).
document.addEventListener(`click`, handle);
function handle(evt) {
const bttn = evt.target.closest(`.buttonTest`);
if (bttn) {
const inputElemCopy = bttn.closest(`.input-box`)
.querySelector(`input`).cloneNode(true);
inputElemCopy.name = `${inputElemCopy.id}_more`;
inputElemCopy.removeAttribute(`id`);
bttn.insertAdjacentHTML(
`afterend`,
`<div>${inputElemCopy.outerHTML}</div>`);
}
}
<div class="user-details">
<div class="input-box">
<span class="details">Stärken</span>
<input type="text" placeholder="Stärken, z.B. 'Kommunikativ'"
id="strenghts">
<div class="buttonTest">
<button type="button" class="add-more" id="add-more1">+ Weitere
hinzufügen</button>
</div>
</div>
<div class="input-box">
<span class="details">Technische Fähigkeiten</span>
<input type="text" placeholder="Technische Fähigkeiten, z.B. 'JavaScript'"
id="tech">
<div class="buttonTest">
<button type="button" class="add-more" id="add-more2">+ Weitere
hinzufügen</button>
</div>
</div>
</div>
I can see the scanned value (id="code") on p element. How can I fill the textbox with this value?
Actually when I press the Scan Barcode button, camera is open and scan an EAN13 barcode, and the value is shown in P element (590123... is the barcode). Can be seen below. But I want to see this value in textbox.
function barcode() {
var resultElement = document.getElementById("code");
// setupLiveReader(resultElement)
}
<p id="code">code is appearing here</p>
<input class="form-control" type="text" id="code">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
You can't have two elements with the same id. To get the content of the p tag just call innerHTML on it. After that set the value of your input with the new id.
<p id="code">code is appear here</p>
<input class="form-control" type="text" id="codeInput">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
<script>
function barcode() {
var resultElement = document.getElementById("code").innerHTML;
//setupLiveReader(resultElement)
document.getElementById("codeInput").value = resultElement;
}
</script>
Change the id so that you only have one id="code", then update the script so resultElement has the id of the <input...
<p id="code">code is appear here</p>
<input class="form-control" type="text" id="code-input">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
<script>
function barcode() {
const resultElement = document.getElementById("code-input");
setupLiveReader(resultElement);
}
</script>
function getValue() {
var resultInputValue = document.getElementById("inputValue").value;
document.getElementById("valueShow").innerHTML = resultInputValue;
}
<p id="valueShow">input value is appear here</p>
<input type="text" id="inputValue">
<button onclick="getValue()" type="submit">Get Value</button>
I am trying to create a search using ajax and mysql and placing the returned data into a div. I am following a tutorial on youtube and so far so good, however I am trying to pass in dummy data into the div but it isn't appearing.
This here is my jquery
$('#submit').on('click', function() {
var search = $('#search').val();
if ($.trim(search) != '') { //if search is not equal to nothing - using trim allows users to type in blank space and it won't return anything
$.post('searching.php', {search: search}, function(data) {
$('#search').text(data);
});
}
});
This is my html
<div class="container">
<div class="card card-container">
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" method="POST">
<input type="text" name="search" id="search" class="form-control" placeholder="Search">
</form><!-- /form -->
<button class="btn btn-lg btn-primary btn-block btn-signin" value= "search" type="required" id="submit" name="submit">Search</button>
</div><!-- /card-container -->
<div class="row">
<div class="col-md-4">
<div id="search"></div>
<div class="caption">
<p></p>
</div>
</div>
When the user clicks search the content from the searching.php file should appear in the div. Currently in the searching.php file it just has echo"content";. It should have "content" in the div but it isn't appearing in the web browser and there are no errors. Within the network in inspect element the name is searching.php and the status is ok. Not sure where I am going wrong, any help would be grateful.
You have multiple id="search" elements in your HTML. So this isn't going to know which one you mean:
$('#search')
It's probably trying to set the "text" of the <input>, which doesn't have a "text" (it has a "value"). Correct the HTML. Either change the <input> or the <div> to have a unique id. (And, of course, update your jQuery selectors as well as anything else targeting these elements.)
don't use same id (search) for both input and div
change the id in html
<div class="container">
<div class="card card-container">
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" method="POST">
<input type="text" name="search" id="search" class="form-control" placeholder="Search">
</form>
<button class="btn btn-lg btn-primary btn-block btn-signin" value= "search" type="required" id="submit" name="submit">Search</button>
</div><!-- /card-container -->
<div class="row">
<div class="col-md-4">
<div id="searchText"></div>
<div class="caption">
<p></p>
</div>
</div>
and javascript
$('#submit').on('click', function() {
var search = $('#search').val();
if ($.trim(search) != '') { //if search is not equal to nothing - using trim allows users to type in blank space and it won't return anything
$.post('searching.php', {search: search}, function(data) {
$('#searchText').text(data);
});
}
});
.text not work with input
use val() instead of text() for input
$('#search').val(data);
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test1">This is a paragraph.</p>
<button id="btn1">Set Text</button>
<p id="test2">This is another paragraph.</p>
<button id="btn2">Set HTML</button>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn3">Set Value</button>
How to clear textarea field onclick? the problem is I am using AJAX. it won't reload the page. can anyone help me to solve this problem.
<div class="write_comment" style="">
<textarea type="text" id="form_task_comment" name="form_task_comment" value="" placeholder="Write your comment here..."></textarea>
<div class="buttons" style="float:right">
<button id="btn_comment_submit" class="btn btn-default btn hoverable btn-sm btn_comment_submit" style="margin:0rem;" type="submit">Add Comment</button>
</div>
</div>
Try this. Click on button to clear Textarea
$('.clearText').click(function(){
$("#form_task_comment").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clearText">Click Here To Clear Textarea</button>
<br>
<textarea id="form_task_comment">This is textarea</textarea>
In case you do not want to use jQuery. And the other posts above do not mention how to reset your textarea ON send. When you bind onclick, it would clear the text BEFORE sending. Therefore you need to use form onsubmit
var textArea = document.getElementById("form_task_comment")
var form = document.getElementById("form-name")
form.addEventListener("submit", function(event) {
textArea.value = "";
event.preventDefault();
}, false)
<div class="write_comment" style="">
<form id="form-name" >
<textarea type="text" id="form_task_comment" name="form_task_comment" value="" placeholder="Write your comment here..."></textarea>
<div class="buttons" style="float:right">
<button id="btn_comment_submit" class="btn btn-default btn hoverable btn-sm btn_comment_submit" style="margin:0rem;" type="submit">Add Comment</button>
</div>
</form>
</div>
Simply just replace textarea.value with nothing when button is clicked??
html code:
<input type="button" value="Clear Text" onclick="eraseText();"></input>
Javascript:
function eraseText()
{
document.getElementById("form_task_comment").value = "";
}
You can simply clear the value of text area using .val() like this
$("#form_task_comment").val('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="form_task_comment">This is textarea</textarea>
Add this line of code wherever you want to clear the text area
I'm looking for some code that will allow me to click a button (Button with value "Next") which will then replace some of the code I have on my page with new code. This is my current code, I need to replace everything after the score counter. Apologies for the sloppy code, I'm pretty new to this.
<body>
<p>Score: <span id="counter">0</span></p><br/>
<p>1) What colour is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">Almond White</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">Raspberry Diva</button><br>
<button id="none" onClick="showDiv01()">Melon Sorbet</button><br>
<button id="none" onClick="showDiv01()">Gentle Lavender</button><br></p>
<div id="answer1" style="display:none;" class="wronganswer">✗</div>
<div id="answer2" style="display:none;" class="rightanswer">✓</div>
<p><input type="button" name="next2" value="Next" onClick="showDiv2()" /></p>
</body>
try the below fiddle i am not sure its perfect u want or not but just tried
<body>
<p>Score: <span id="counter">0</span></p><br/>
<div id="div1">
<p>1) What colour is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">Almond White</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">Raspberry Diva</button><br>
<button id="none" onClick="showDiv01()">Melon Sorbet</button><br>
<button id="none" onClick="showDiv01()">Gentle Lavender</button><br></p>
</div>
<div id="div2" hidden>
1) What car is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">abc</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">def</button><br>
<button id="none" onClick="showDiv01()">rtrt</button><br>
<button id="none" onClick="showDiv01()">xyz</button><br></p>
</div>
<div id="answer1" style="display:none;" class="wronganswer">✗</div>
<div id="answer2" style="display:none;" class="rightanswer">✓</div>
<p><input type="button" id="btn" name="next2" value="Next" onClick="showDiv2()" /></p>
</body>
$('#btn').click( function() {
$("#div1").hide();
$("#div2").show();
});
http://jsfiddle.net/uxyQG/
If you want to replace the text on button click. I checked you button have an onClick="showDiv2()"
So try like this (for an example)
function showDiv2 () {
document.getElementById('counter').innerHTML = ""; //empty the value
}
Here is example fiddle, I have create when you click next the counter will be replaced.
What you want to do here is place all the content you want to replace inside a <div>.
then you will want to give that div an id attribute.
e.g.
<div id="yourID">
HTML CONTENT HERE
</div>
Then in javascript, you would need to create a function that would fire on an onclick event.
Markup:
<input type="button" onclick="changeContent('yourID', '<div>OtherHTML</div>')" value="NEXT" />
when you have these 2 components, you will want to make a script that will execute your function.
<script type="text/javascript">
function changeContent(id, html) {
//Get the element that needs it's contents replaced.
var container = document.getElementById(id);
//insert new HTML onclick.
container.innerHTML = html;
}
</script>
This is a simple example of what you need.
You could externalize this javascript in a seperate file.
If you want to do this, you will need to include the script in the <head> of your html document.
<script type="text/javascript" src="path/to/js.js"></script>
Because this will load before any of the DOM will have been loaded, you will get errors.
To solve this, the new contents of the file will be:
js.js
window.onload = function() {
function changeContent(id, html) {
//Get the element that needs it's contents replaced.
var container = document.getElementById(id);
//insert new HTML onclick.
container.innerHTML = html;
}
}
This should work for you in this scenario.
Hope this helped
‐ Sid