I am trying to make this code work, I want the innerHTML to be changed but It's instantly changing and gets back to its initial state . Any help ?
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td>
<div id="text_this">123</div>
</td>
<td>
<button onclick="click_me();">Edit</button>
</td>
</tr>
</body>
</html>
Your form is getting submitted. Add a return false; to your button onclick event.
<button onclick="click_me(); return false;">Edit</button>
Or, make the button type='button' (This is the better option)
<button onclick="click_me();" type='button'>Edit</button>
The reason is because the button type is submit by default if a type is not specified.
From MDN,
submit: The button submits the form data to the server. This is the
default if the attribute is not specified, or if the attribute is
dynamically changed to an empty or invalid value.
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td><div id="text_this">123</div></td>
<td><button onclick="click_me();return false;">Edit</button></td>
</tr>
</table>
</form>
</body>
</html>
added a return false statement to the onclick event. without it, the form gets submitted and the page reloads
jsfiddle here
Related
I have a JS table generated by the data entered in textareas by users on my web site (so the data is not there when you first load the page: your have to enter something in the textarea and then generate the table). Now I'm trying to get that data (from the generated table) and show it in a (h2/) for exemple.
So I made a script to get that information:
<script type="text/javascript">
function buttonTEST()
{
document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;
}
</script>
and a Button to use that script:
<input id=GetTest type="button" onclick="buttonTEST()" value="TEST ME"/>
When I enter the "document.getElementById....etc" in the console, it shows the data that I want so I think the script is fine.
But how can I get it to SHOW that data (alphanumeric) in a (h2) plain text?
Can someone help? :)
EDIT! I tried this:
<div>
<script type="text/javascript">function buttonTEST(){document.getElementById("yourID").innerHTML="document.getElementById('excel_table1').getElementsByTagName('tr').
[0].cells[1]";
}
</script>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>
</div>
But when I click, I just get "document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1]" as a H2.
The problem in your case, seems to be the extra " around your expression to get the value.
If a value is already a string, you don't need to wrap it in quotes, since doing so makes javascript think that you want to litteraly write that piece of code to the h2 output
<div>
<script type="text/javascript">
function buttonTEST() {
document.getElementById("yourID").innerHTML = document.getElementById('excel_table1').getElementsByTagName('tr').
[0].cells[1].innerHTML;
}
</script>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>
</div>
Ok, solved it ! Thanks everybody for putting me in the right track :D
So, what worked for me:
<script type="text/javascript">
function buttonTEST()
{
document.getElementById('yourID').innerHTML=document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;
}
</script>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>
</div>
#vhoyer was right, I needed to take off the extra " otherwise JS thinks that I want to litteraly write that piece of code to the h2 output.
And the other think is that I needed to put ".innerHTML" again after all my tr and cells (yes, it makes a .innerHTML inside another .innerHTML xD )
Hope that might help someone!
Cheers
You need to create a <h2> element in your html file to replace its value (which should be empty in your html file) using javascript.
Make sure you have assigned that <h2> an id.
Then, using document.getElementById, access it in your script and change it.
An example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTest()" value="TEST ME"/>
<script>
function buttonTest() {
//Grab the ID and change it
document.getElementById("yourID").innerHTML = "whatever you want it to display";
}
</script>
</body>
</html>
Also, make sure to surround the html attributes' values in single or double quotes.
Edit:
Here is an example for your use case:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTest()" value="TEST ME" />
<p>Press me to find out the second cell in the second row</p>
<table id="table">
<tr>
<th>Color</th>
<th>Object</th>
</tr>
<tr>
<td>Red</td>
<td>Poppy</td>
</tr>
</table>
<script>
function buttonTest() {
//Here we grab the value of the second cell in the second row in a variable called value. You can change the row and cell index to access specific values.
var value = document.getElementById("table").rows[1].cells[1].innerHTML;
//Then we display it
document.getElementById("yourID").innerHTML = value;
}
</script>
</body>
</html>
I have specific html setup that looks like this
<table class="table">
<form action="" name="f_form" id="id_f_form" method="POST">
<input type="hidden" name="f1" value="555">
<tr onClick="javascript: submitform();">Block</tr>
</form>
</table>
Where the javascript function submitform() looks like this
function submitform() {
if (confirm("Do you want to proceed?")){
document.f_form.submit();
}
}
What I want is a general javascript function that works with every form and not only this form with the name="f_form". I really don't want to write a java function for each and every form :P.
This will use jQuery as it's easier to bind an event on multiple element.
$("form").on('submit',function(){
if(confirm("Do you want to proceed?")){
$(this)[0].submit();
}else{
return false;
}
});
Well for starters sort your HTML that is invalid HTML
Your code with valid required HTML, Body, head and DOCTYPE
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<table class="table">
<form action="" name="f_form" id="id_f_form" method="POST">
<input type="hidden" name="f1" value="555">
<tr onClick="javascript: submitform();">Block</tr>
</form>
</table>
</body>
</html>
use it at https://validator.w3.org/#validate_by_input
so for valid code it should be
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form name="f_form" id="id_f_form" method="POST">
<table class="table">
<tr onClick="submitform(this);"><td><input type="hidden" name="f1" value="555" />Block</td></tr>
</table>
</form>
</body>
</html>
As for your script with valid HTML you make it really easy using jQuery
function submitform(e){
if (confirm("Do you want to proceed?")){
jQuery(e).parent('form').submit();
}
}
I have a basic table that I am creating from text input and when you click the "addTask" button it adds a tr with an empty text box and clicking the "delTask" button should delete the rows from the table that have checkboxes checked.
Everything works perfectly in JSFiddle (except the line to render last textbox readonly which only works outside of JSFiddle) but when I try to test the code out live the "delTask" button does not work correctly. It will delete all rows except the first one in the table.
I'm fairly new to JQuery so please don't judge if it's something simple but I have really searched for an answer and tried everything I could find. Can anyone help me figure out what is wrong here? Thanks in advance.
EDIT I have fixed the initial issue of the delTask button not working at all by changing $(":checkbox[checked='true']") to $(".checkbox:checked") when testing outside of JSFiddle but still cant get the button to delete the first row on the table in a live test.
JSFiddle link: http://jsfiddle.net/2aLfr794/14/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<table id="tasks" cellpadding="3" cellspacing="3" border="0">
<tr>
<td><input type="checkbox"></td>
<td><input type="text" class="text"></td>
</tr>
</table>
<br>
<input type="button" id="addTask" value="Add Task" />
<input type="button" id="delTask" value="Delete Tasks" />
<script>
$("#addTask").click(function(){
var newTxt = $('<tr><td><input type="checkbox"></td><td><input type="text" class="text"></td></tr>');
$(".text").last().prop("readonly", true);
$("#tasks").append(newTxt);
});
$("#delTask").click(function(){
$(".checkbox:checked").each(function(){
var curTask = $(this).parents('tr');
curTask.remove();
});
});
</script>
</body>
</html>
Your Issues:
1.You are not assigning class checkbox to default checkbox and dynamically created checkboxes.
2.To access a checked element the syntax is $(".checkbox[checked='checked']")
Your Updated Code:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body>
<table id="tasks" cellpadding="3" cellspacing="3" border="0">
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>
<input type="text" class="text">
</td>
</tr>
</table>
<br />
<input type="button" id="addTask" value="Add Task" class="addSubmit" />
<input type="button" id="delTask" value="Delete Selected Tasks" />
<script>
$("#addTask").click(function() {
var newTxt = $('<tr><td><input type="checkbox" class="checkbox"></td><td><input type="text" class="text"></td></tr>');
$(".text").last().prop("readonly", true);
$("#tasks").append(newTxt);
});
$(document).ready(function() {
$("#delTask").click(function() {
console.log($(".checkbox[checked='checked']"))
$(".checkbox:checked").each(function() {
var curTask = $(this).parents('tr');
curTask.remove();
});
});
});
</script>
</body>
if you get "$ is not defined" error, try writing
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> as <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Note the "http:" before "//cdnjs" which is needed when you are running those from local machine, and not a webserver. At least it was always required for me.
$("input[type=checkbox]:checked")
worked for me
I am working on a history search function.
I have managed to get a working code to save the value from the textbox but I do not know how to load them into a listbox.
I want a listbox with clickable items so that I can click on a previous search value and load that value as I do from the textbox.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="jquery.js"></script>
<script src="j.js"></script>
</head>
<body>
<center>
<table>
<tr>
<td style="text-align: center">
<font size="22">Sök order</font>
</td>
</tr>
<tr>
<td>
<form action="test.php" method="post">
<input style="font-size: 44pt; text-align: center" size="9" type="text" name="txtSearch" id="txtSearch"/>
<input type="submit" id="submit" value="submit">
</form>
</td>
</tr>
</table>
</center>
</body>
</html>
And the j.js that handles the local storage function.
$(function () {
$("#submit").click(function () {
var txtSearch = $("#txtSearch").val();
localStorage.setItem('searchvalue',txtSearch);
});
});
And last my test.php that handles the post search request
<?php
$txtSearch = $_REQUEST['txtSearch'];
header('Location: '.'https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr='.$txtSearch);
?>
How can I achieve this?
Thank you.
by js, you can
window.location = "https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr="+localStorage.getItem('searchvalue');
to save in listbox or any other
document.getElementById("id").value=localStorage.getItem('searchvalue');
to save in array
var a = [];
a[0]=localStorage.getItem('searchvalue');
I come from MVC background and I have little experience with web forms.
I have established where the problem is, but so far I have been unable to fix this.
I have a form which is meant to execute Javascript function when body of the form loads. Please notice that head tag has a run at server attribute as it needs to use Request.QueryString.
The code is below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function doSomething()
{
// Use web forms to do something
var foo = <%= Request.QueryString["input"] %>;
}
</script>
<title>Foo</title>
</head>
<body onload="doSomething()">
<form id="MainForm" runat="server">
<table width="272px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="body">
...
</td>
</tr>
</table>
</form>
</body>
</html>
I get the following error:
SCRIPT5007: The value of the property doSomething is null or undefined, not a Function object.
My guess is that something executes on a server or other way round. This has worked previously (over a year ago), so potentially something in a web config was overwritten. I have spent the most of day on this and had no luck so far.
Edit: Generated output is below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function doSomething()
{
debugger;
var o = crmForm.queryString;
}
</script>
<title></title>
</head>
<body onload="doSomething()">
<form name="MainForm" method="post" action="fooPage.aspx?input=queryString" id="MainForm">
<div>
// hidden fields
<table width="272px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="body">
// inputs
</td>
</tr>
</table>
</form>
</body>
</html>
Instead of using the onload attribute of the body tag, you can also add the following code within the <script> tags:
if(window.addEventListener) window.addEventListener("load", doSomething, true);
else window.onload = doSomething;