Here I m working on inbox page where I have to display mails.
There is a jsp code which get incremented when a new mail arrives in database.
I have put a delete button so that the selected mail can be deleted. But When I click the Del button whole Inbox is getting deleted due wrong placement of Function!
The code is (also at http://pastie.org/8593077):
<script>
function deleteCheckBox(){
if (document.getElementById('checkboxid').checked){
var answer = confirm('Are you sure you want to delete this checkbox?');
if (answer)
{
$(".del_mail").remove();
}
}else{
alert("Pls check the checkbox.");
}
}
</script>
<form id ="login" name="login" action="" method="post" class="form">
<div id="error"></div>
<fieldset>
<div><b>Inbox</b>
</div>
</fieldset>
<fieldset>
<%
int i=0;
while(i<3)
{
%>
<div class="row">
<div class="del_mail">
<section class="col col-16">
<input type="checkbox" id="checkboxid" name="checkboxname">
</section>
<section class="col col-6">
<label>
<p>From</p>
</label>
</section>
<section class="col col-6">
<label>
Subject
</label>
</section>
<button align="right" id="btnDeleteid" onclick="deleteCheckBox()" name="btnDeletename">Delete</button>
</div>
</div>
<% i++;
} %>
</fieldset>
</form>
I want to ask how to delete a specific row or Div here ?
Use this code:
<button align="right" id="btnDeleteid" onclick="deleteCheckBox(this)" name="btnDeletename">Delete</button>
In the Above HTML you need to send the object of the current checkbox by using the this in the function.
And in the JS code use this:
function deleteCheckBox(that){
if (that.checked){
var answer = confirm('Are you sure you want to delete this checkbox?');
if (answer) {
that.parentNode.remove();
}
} else {
alert("Pls check the checkbox.");
}
}
And that object you can get in the parameter that I have taken as that. and by getting that you can select the parent node that you want to delete.
In your code you are using the .del_mail which is selecting all the
elements which has the class name del_mail and deleting all those
elements.
You are using a class ".del_mail" so all the divs of this class are deleted (the jquery call to remove actually loop on all such elements).
A solution that may work: you could put a different id, such as id="del_mail_3" based on your incremented variable and delete the right element $("#del_mail_3") by passing your i to deletecheckbox.
Use below code, this will work (please add jquery library in your project)
$(document).ready(function(){
$(".del_mail").click(function(){
if (document.getElementById('checkboxid').checked){
var answer = confirm('Are you sure you want to delete this checkbox?');
if (answer)
{
$(this).remove();
}
else{
alert("Pls check the checkbox.");
}
}
});
});
Related
Javascript:
function changeStylePruefung(radiobutton) {
if (radiobutton.value === "stoerungsbehebung") {
document.getElementById("table-stoerung").style.display = "block";
document.getElementById("table-haupt").style.display = "none";
} else {
document.getElementById("table-stoerung").style.display = "none";
document.getElementById("table-haupt").style.display = "block";
}
}
HTML:
<fieldset id="uberpruefung">
<legend style="font-weight: bold">Prüfung im Rahmen einer</legend>
<div>
<label for="stoerungbeh">Störungsbehebung</label>
<input type="radio" id="stoerungbeh" name="pruefung" value="stoerungsbehebung" onchange="changeStylePruefung(this)"
checked><br>
</div>
<div>
<label for="hauptpruefung">Hauptprüfung</label>
<input type="radio" id="hauptpruefung" name="pruefung" value="hauptpruefung" onchange="changeStylePruefung(this)">
</div>
</fieldset>
<br><br>
<fieldset>
<legend style="font-weight: bold">In Ordnung</legend>
<div class='table-haupt' style="display: none">
<table class='rg-table' summary='Hed'>
.....
</table>
</div>
<div class='table-stoerung' style="display: block">
<table class='rg-table-stoerung' summary='Hed'>
.....
</table>
</div>
</fieldset>
I would like to change the style of a table if the radiobutton changes. But with that code it just do nothing.I looked up on several websites and tryed their way but it also didn't worked. Any ideas why?
You have defined the class of the Tables in the HTML file and you're searching for the ID of the Tables in the JavaScript code, that isn't available. So you should create the ID of the tables, with the same value Of The Table's class. You have used Class instead of ID, just this is the problem, replace class with id. This Will 100% Help You.
If i was approaching this my first point of call would be to look to see where and what is calling this function, firstly this is the deceleration of a function, not the invocation of a function. So where are you calling this function - is it in a html page or js file in your app?
I would step through the expectations of where it is called, console.log radiobutton in the first line of your function, then radiobutton.value, then document, then document.getElementById("table-stoerung") and keep going until you understand the scope of your function.
You need to step through incrementally and just debug - there is nothing wrong with this code, it may be that document does not have elements with these ids or one of these props is missing. That said having an else condition to get an element id is not recommended.
I checked all the code and there is nothing wrong with it. When I check the "vegetables" radio button, write something in the text field and hit add, it doesn't add the element.
function add() {
var item;
item = document.getElementById("item").value;
if (document.getElementById("1").checked) {
var li = document.createElement(li);
text = document.createTextNode(item);
li.appendChild(text);
document.getElementById("1v").appendChild(li);
}
}
<section>
<h1>Welcome to your shopping List!</h1>
<h2>Type in the item, choose its type, and hit add !!</h2>
<div id="blue">
<form action="">
<label for="task">I need :</label><br>
<input type="text" placeholder="Example : Apples" id="item" name="item"><br>
<br>
<label for="type">which is :</label><br>
<div class="">
<input type="radio" id="1" name="type" value="Vegetables">
<label for="">Vegetables</label><br>
</div>
<br>
<button id="add" onclick="add()">Add !</button>
</section>
</form>
</div>
<br>
<footer id="white">
<div>
<table border="bold">
<th>Vegetables</th>
<tbody>
<tr>
<td>
<ol id="1v"></ol>
</td>
</tr>
</tbody>
</table>
</div>
</footer>
You have several problems:
You are using a form, so when you click the button, the form
submits and you leave the page. In your case, you aren't really going to submit data anywhere, so you really don't even need the form element or to specify name attributes for your fields.
You don't have li in quotes, so you aren't actually creating an
<li> element. Without quotes, the system thinks li is a variable, but since you don't have a variable called that, a new Global variable is created with a value of undefined, so your code executes as: document.createElement("undefined"), which does actually create: <undefined></undefined>, but since that isn't an actual HTML element, nothing is rendered for it, except the text you placed inside it (but no numbering):
var li;
let el = document.createElement(li);
console.log(el);
You are using label incorrectly. A <label> element correlates to a form-field element (i.e. input, select, textarea) as a way to have a "caption" for that element. To use it, you should set its for attribute to the id of the form-field its associated with or you can not use for and just nest the form-field its associated with inside of the label. label is not just for text you want to display.
Your HTML is not nested properly and you are missing elements.
Tables should really not be used for anything but displaying tabular
data. They should not be used for layout. Since you are creating new
ordered list items for each item added, you should not use a table.
But, even when you do, you can't just have th. th must be inside
of tr, which would then be inside of thead.
A footer element is meant to provide "the fine print" content at the end of a section. Producing your list isn't that kind of content and shouldn't be in a footer.
Here's all of that put toghether:
// Get your DOM references just once
const item = document.getElementById("item");
const list = document.getElementById("1v");
const veg = document.getElementById("type");
// Don't use inline HTML event attributes to set up events.
// Do your event binding in JavaScript, not HTML.
document.getElementById("add").addEventListener("click", add);
function add() {
if (veg.checked) {
var li = document.createElement("li"); // <-- Need quotes around the element name
li.textContent = item.value;
list.appendChild(li);
}
}
table,th,td { border:1px solid black; }
<section>
<h1>Welcome to your shopping List!</h1>
<h2>Type in the item, choose its type, and hit add !!</h2>
<div id="blue">
I need : <input type="text" placeholder="Example : Apples" id="item"><br>
<br>
which is : <input type="checkbox" id="type" value="Vegetables"> Vegetables
<div><button id="add">Add !</button></div>
</div>
</section>
<br>
<footer id="white">
<div>
Vegetables
<ol id="1v"></ol>
</div>
</footer>
2 quick fixes to your code (personally, I would rewrite the whole thing):
add type="button" to the button. It will prevent the button from defaulting to a submit.
Syntax error in var li = document.createElement(li);. the li should be in quotes:
var li = document.createElement('li');
I am working on a personal blog website project, and I wanted to implement a simple message board on my index page. Due to the projected site traffic (relatively low) I decided on only using a front-end implementation without linking to a database with the following js and html code:
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<textarea class="message" type="text"></textarea><br/>
<input value="submit" type="button" class="submit-btn">
<div class="display-area">
Existing comment:
</div>
</section>
and then the js,
<script>
window.onload=function() {
var displayArea = document.getElementsByClassName("display-area");
var btn = document.getElementsByClassName("submit-btn");
btn.onclick = function() {
var comment = document.getElementsByClassName("message").value;
displayArea.appendChild(comment);
};
}
</script>
My intention was to make my display-area contain whatever was put in textarea via .appendChild when submit is clicked. Sadly, it isn't working as intended-nothing actually happens. I am thinking about potential errors in my js code, but just couldn't figure out anything that would resolve the problem.
Any assistance will be greatly appreciated!!!
getElementsByClassName() returns a collection of elements (note the s in Elements). If you have only one element that matches the class name, you have this element in the first index of the array-like collection.
var displayArea = document.getElementsByClassName("display-area")[0];
var btn = document.getElementsByClassName("submit-btn")[0];
You can also use querySelector(), that uses CSS selectors (like jQuery) and returns a single element:
var displayArea = document.querySelector(".display-area");
In order to append a text node (your variable comment stores a string), use append() instead of appendChild():
displayArea.append(comment);
Two ways this can be done are by calling the JavaScript function on click, or by calling it on form submission.
1) call function onclick:
Wrap your form within a form tag, and call your JavaScript function based on the element Ids.
Note the showInput function is being called onclick when the button is clicked.
function showInput() {
console.log('showInput called...')
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
display.innerHTML = userInput;
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form>
<textarea class="message" type="text" id="userInput"></textarea><br/>
</form>
<input type="submit" onclick="showInput();">
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
Here's a jsfiddle, with the same code as above: http://jsfiddle.net/ethanryan/94kvj0sc/
Note the JavaScript in the jsfiddle is being called at the bottom of the Head section of the HTML.
2) call function on form submit:
You can also do this by calling the JavaScript function on the submission of the form, instead of on the click of the button. However, since this form uses a textarea, hitting return will add a line break to the text, and not submit the form, so the button still needs to be clicked for the function to be called.
function showInput() {
console.log('showInput called...')
event.preventDefault()
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
display.innerHTML = userInput;
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form onsubmit="showInput()">
<textarea class="message" type="text" id="userInput"></textarea><br/>
<input type="submit" value="Submit">
</form>
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
Note the event.preventDefault() in the form, since the default behavior of forms is to submit data to a backend database.
jsfiddle: http://jsfiddle.net/ethanryan/qpufd469/
3. appending instead of replacing text
Finally, my examples above used innerHTML to replace the userInput text. If you want to append instead of replace the text, you can use insertAdjacentHTML to add the text to the end, and then append a linebreak to it. Finally, you can reset the form.
function showInput() {
console.log('showInput called...')
event.preventDefault()
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
var theForm = document.getElementById("theForm");
var linebreak = document.createElement("br");
display.insertAdjacentHTML('beforeend', userInput);
display.appendChild(linebreak);
theForm.reset();
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form onsubmit="showInput()" id="theForm">
<textarea class="message" type="text" id="userInput"></textarea><br/>
<input type="submit" value="Submit">
</form>
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
jsfiddle: http://jsfiddle.net/ethanryan/x4hq0Lzp/
I have checked all the other 'duplicate' questions on this. But have hit a wall in terms of finding what is wrong with my script. Could be something very simple. But I have run out of steam finding the fault. So I am here.
I am trying to create a product list on a web page with an 'Inquire' link for each product. On clicking the link, the product id is captured and a brief form for adding user contact details comes up. When the user submits the form, the inquired product details and user contact details are emailed to admin.
I am doing all this with JS with an Ajax Post call to a PHP file.
Everything is fine accept between the two functions
When 'Inquire' link is clicked
and
When form submit button is clicked.
My issue is, I am not able to pass the inquired product name variable 'item' to the submit function. In submit function I get 'item' undefined.
I am not too good at JS. I know I am making some procedural error. Would be great if somebody could point out what I am doing wrong.
My codes;
HTML
<div class="prodlist"><div class="productimg"><h4 id="itemcf">Cupellation Furnace</h4><img src="images/cupellation-furnace.png" alt="cupellation furnace"></div><div class="prodtxt"> This is the product description area. This area will contain details and specifications</div><div id="inquirecf"><span>Inquire</span></div><div id="inqrescf"></div></div>
<div class="prodlist"><div class="productimg"><h4 id="itemmf">Melting Furnace</h4><img src="images/furnace-2kg.png" alt="Melting furnace"></div><div class="prodtxt"> This is the product description area. This area will contain details and specifications</div><div id="inquiremf"><span>Inquire</span></div><div id="inqresmf"></div></div>
<div id="inqform">
<span id="inqclose">Close</span>
<div style="clear:both"></div>
<div id="inqresgen"></div>
<form id="forminq" method="post">
Name : <input type="text" id="inqname" require><br>
<div style="clear:both"></div>
phone : <input type="number" id="inqphone" require><br>
<div style="clear:both"></div>
Email : <input type="email" id="inqemail" require><br>
<div style="clear:both"></div>
Location : <input type="text" id="inqloc" require><br>
<div style="clear:both"></div>
Message : <textarea cols="30" rows="10" id="inqmsg" require></textarea>
<div style="clear:both"></div>
<input type="submit" onClick="sendInq();" value="Send">
<div style="clear:both"></div>
</form>
<div style="clear:both"></div>
</div>
JS
$(document).ready(function(){
var item;
$('#inqclose').click(function(){ $('#inqform').fadeOut('fast');});
$('#inquirecf,#inquiremf').click(function(){
var id = $(this).attr('id');
//alert(id);
if(id=="inquirecf"){alert("inquirecf"); item="Cupellation Furnace";}
else if(id=="inquiremf"){alert("inquiremf");item="Melting Furnace";}
else{alert("No Choices");}
$('#inqform').slideToggle('fast');
});
});
function sendInq(item){
var itemv=item;
event.preventDefault();
var inqname=$('#inqname').val();
var inqphone=$('#inqphone').val();
var inqemail=$('#inqemail').val();
var inqloc=$('#inqloc').val();
var inqmsg=$('#inqmsg').val();
alert("Item : "+ itemv);
$.post("inquire.php",
{
itemname: itemv,
inqname: inqname,
inqphone: inqphone,
inqemail: inqemail,
inqloc: inqloc,
inqmsg: inqmsg
},
function(data,status){
// alert("Data: " + data + "\nStatus: " + status);
$('#inqresgen').html( data );
///$('#inqres2').html( "<h4>Inquiry Sent</h4>");
$('#forminq').fadeOut('fast');
});
}
Well after a lot of googling and studying different options, I realized that the using
window.item
Helped
Now my code looks like
$('#inquirecf,#inquiremfhalfkg,#inquiremf1kg,#inquiremf2kg,
#inquiremf5kg,#inquirecupels,#inquiremuffles,#inquirecrucibles,#inquirethermo,
#inquiresilicon').click(function(){
var id = $(this).attr('id');
if(id=="inquirecf"){window.item="Cupellation Furnace";}
else if(id=="inquiremfhalfkg"){window.item="Melting Furnace 0.5Kg";}
else if(id=="inquiremf1kg"){window.item="Melting Furnace 1Kg";}
else if(id=="inquiremf2kg"){window.item="Melting Furnace 2Kg";}
else if(id=="inquiremf5kg"){window.item="Melting Furnace 5Kg";}
else if(id=="inquirecupels"){window.item="Cupels";}
else if(id=="inquiremuffles"){window.item="Muffles";}
else if(id=="inquirecrucibles"){window.item="Crucibles";}
else if(id=="inquirethermo"){window.item="Thermocouples";}
else if(id=="inquiresilicon"){window.item="Silicon Carbide Elements";}
else{alert("No Choices");}
}
function sendInq(item){
var itemv=window.item;
//......
}
All is well now. Thanks all for your efforts.
I have Created calculator project. I have only two pages. Now my question how to pass input field value to another page? trying too many ways its Not Working.
What to do to pass input fields values from one page to another page?
My input fields code Looks Like
<p class="pull-right">DPA Minimum Buyer Contribution<br /></p>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" style="padding-right:1%">
<input type="text" id="txtLocationContactName5" class="txt"/>
</div>
<div class="col-md-3" style="padding-left:0%">
Another page name default_results.php I have created input fields
<div class="col-md-5 padding-rht">
Minimum Buyer Contribution
</div>
<div class="col-md-2 padding-Zero">
<input type="text" id="txtCustomerName3" class="txt" />
</div>
I have tired in jQuery script
<script>
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "default_results.php?id=" + encodeURIComponent($("#txtLocationContactName5").val()) + "&technology=" + encodeURIComponent($("#txtCustomerName3").val());
window.location.href = url;
});
});
</script
but Not working so how to pass value one page to other page ?
You're making life hard for yourself! A simple form is needed to help you pass data to another page :). See here for info on html Forms - http://www.w3schools.com/html/html_forms.asp
Here is a simple example for you:
<form action="page_2_link" method="POST">
<input type="text" name="field1" value="easy">
<input type="submit" name="button1" value="Submit">
</form>
Then on the second page you can do this to retrieve the form data:
<?php
$blah = $_POST['field1']; // this now has the posted fields value
?>
I have given the second page answer in PHP as you have used this as a tag for this question, so I hope you are using this or my answer won't work.