Check the text in html - javascript

<html dir = rtl>
<head>
<title> </title>
<meta HTTP-EQUIV="Content-language" CONTENT="ar">
<script type="javascript">
function d()
{
document.getElementById("sName").innerHTML ='Name submitted';
}
</script>
</head>
<body>
<form name = "Info" method = "set" action = "">
<table border = "0" width = "40%" align = "center">
<tr>
<td> الاســــــــــــــــم: </td>
<td> <input type="text" name = "CurName" size = "31"> </td>
<td> <p id = "sName"> </p> </td>
</tr>
<tr>
<td> العــــــــــــــــمر :</td>
<td> <input type = "text" name = "CurAddress" size = "10"></td>
<td> <p id = "sAddress"> </p> </td>
</tr>
<tr>
<td> العنـــــــــــــوان :</td>
<td> <input type = "text" name = "CurAddress" size = "45"></td>
<td> <p id = "sAddress"> </p> </td>
</tr>
<tr>
<td> الحالــــــــــــــــة :</td>
<td> <input type = "radio" name = "Mar" > متزوج<input type = "radio" name = "Sin" > أعزب</td>
<td> <p id = "SitName"> </p> </td>
</tr>
<tr>
<td colspan = 2 align = center> <button type = "submit" onClick = "d(); return false;">ارسال </button> <button type = "reset">مسح</button> </td>
</tr>
</table>
</form>
</body>
</html>
When I press the submit button I expected that some words beside the first textbox will disappear, but nothing happened. Can some one explain to me where the problem is?

You have not properly defined your script tag. Proper value will be text/javascript.
<script type="text/javascript">
instead of
<script type="javascript">

Your js code is correct but you have to change that
<script type="javascript"> as <script type="text/javascript">
See your code here its working perfectly in jsfiddle
http://jsfiddle.net/WxtJ3/

<script type="text/javascript">
and change
<button type = "submit" onClick = "d();">
to
<button type = "button" onClick = "d();">
or else your page gonna be reloading

Related

Point to an element belong to HTML in javascript

For example: This is my code
<script>
function changeMe()
{
document.myform.mytable.mybutton.value = "Changed!";
}
</script>
<body>
<form id = "myform" name = "myform">
<table id = "mytable" name = "mytable">
<tr>
<td>
<input type="button" id = "mybutton" name = "mybutton" value="OK!" onclick="changeMe();"/>
</td>
</tr>
</table>
</form>
</body>
But it doesn't work. But when I change:
document.myform.mytable.mybutton.value = "Changed!";
into
document.getElementById('mybutton').value = "Changed!";
It works perfectly. Please tell me what wrong with my first code!
<!DOCTYPE html>
<html>
<body>
<form id = "myform" name = "myform">
<table id = "mytable" name = "mytable">
<tr>
<td>
<input type="button" id = "mybutton" name = "mybutton" value="OK!" onclick="changeMe(this.id);"/>
</td>
</tr>
</table>
</form>
<script>
function changeMe(elementId)
{
document.getElementById(elementId).value = "Changed!";
}
</script>
</body>
</html>

values are automatically changed after click submit button

I have code here. There are no errors in this code, but when I was tried to execute this, the output is shown just for a fraction of second. After that, the fields are changed to null. I want all the values to be shown, even after clicking the submit button.
<script type="text/javascript">
function calcu() {
var h = parseInt(document.getElementById("height").value);
var w = parseInt(document.getElementById("weight").value);
var r = h + w;
document.getElementById("res").innerHTML = r;
if (r < 50) {
var x = document.getElementById("report");
x.innerHTML = "less 50";
}
if (r > 50) {
var xy = document.getElementById("report");
xy.innerHTML = "high 50";
}
}
<body>
<form onsubmit="calcu();">
<table>
<tr>
<td>Height:</td>
<td>
<input type="text" id="height">
</td>
</tr>
<tr>
<td>Weight:</td>
<td>
<input type="text" id="weight">
</td>
</tr>
<tr>
<td>
<input type="submit" value="CALCULATE">
</td>
<td>
<p id="res"></p>
</td>
</tr>
</table>
<p id="report">REPORT</p>
<p id="tip"></p>
</form>
Show Your Code First for more.
As much i can from your statement is that you have a button which is type submit and your values are not holding because when you click on submit type button it will post your data and find the next where it has to go in action attribute as if you have not given the action attribute (a/c to me ) so its reloading the page which refreshing the whole content that's why your page is not holding the data.
But if you want it to be hold make your button type simple "Button".
I think this will resolve your problem.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" >
function calcu() {
var h = parseInt(document.getElementById("height").value);
var w = parseInt(document.getElementById("weight").value);
var r = h + w;
document.getElementById("res").innerHTML = r;
if (r < 50) {
var x = document.getElementById("report");
x.innerHTML = "less 50";
}
if (r > 50) {
var xy = document.getElementById("report");
xy.innerHTML = "high 50";
}
}
</script>
</head>
<body>
<form id="form1" >
<table>
<tr>
<td>Height:</td>
<td>
<input type="text" id="height" />
</td>
</tr>
<tr>
<td>Weight:</td>
<td>
<input type="text" id="weight"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="CALCULATE" onclick="calcu();" />
</td>
<td>
<p id="res"></p>
</td>
</tr>
</table>
<p id="report">REPORT</p>
<p id="tip"></p>
</form>
This will do good You are calling function on form submit which reloads the page so previous page does not exist thats why is not doing any good so your have to change your button type to button and on button click you can call the function you will get your desired result.

How to edit this dynamically input textarea javascription

I'm using this script to create a food & drinks menu, I just found this javascript on a website i don't know much about it but it works really well.
Im going to have a button to input entries for lots of different meal types, for example, Breakfast, Drinks, Dinner, Dessert etc etc.
How can i edit this so the textbox name is breakfast_selection[] or dinner_selection[]?
Also when i click the "Add Option" button, How can i have it so it says "Option 1: Textbox" then when they hit another textbox it says "Option 2: Textbox"
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<SCRIPT language="javascript">
function add() {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("name", "selection[]");
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
var br = document.createElement("br");
foo.appendChild(br);
}
</SCRIPT>
</head>
<body>
<form method="POST" action="testforms.php">
<p><b>Add a Menu Set</b></p>
<table border="0" width="100%" cellspacing="5" cellpadding="5">
<tr>
<td width="25%">Menu Set Name</td>
<td width="75%">
<p><input type="text" name="setname" size="50"></p>
</td>
</tr>
<tr>
<td width="25%"> </td>
<td width="75%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="75%"> </td>
</tr>
<tr>
<td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add(document.forms[0].text)"/></td>
</tr>
<tr>
<td width="100%" colspan="2">
<span id="fooBar"> </span>
</td>
</tr>
</table>
</form>
</body>
</html>
How can i edit this so the textbox name is breakfast_selection[] or dinner_selection[]?
Change
element.setAttribute("name", "selection[]");
to
element.setAttribute("name", "breakfast_selection[]");
Also when i click the "Add Option" button, How can i have it so it says "Option 1: Textbox" then when they hit another textbox it says "Option 2: Textbox"
Add a variable i to keep track of number of options. See the code below-
Update as per OP comment
Change
<td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add(document.forms[0].text)"/></td>
to
<td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add('breakfast')"/><br>
Lunch <INPUT type="button" value="Add Option" onclick="add('lunch')"/></td>
Update the script
<SCRIPT language="javascript">
var i = 1;
function add(orderType) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("name", orderType + "_selection[]");
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
//Create the option text
var a = document.createTextNode("option " + i + ": ");
foo.appendChild(a);
foo.appendChild(element);
var br = document.createElement("br");
foo.appendChild(br);
i++;
}
</SCRIPT>
See demo at JSFiddle

jquery javascript concatenate/variable issue

I have html table inside of a form tags.
When I click on the a cell inside of the table jquery gives me the “id” attr of the cell.
I save the “id” attr to a variable called id.
When I alert “id” the id shows:
alert(id); //outputs 39
However on the very next line I have
term1 = $form.find( "input[name='firstoneinput_" + id +"']").val();
alert(term1); //outputs undefinined // it should output input
value with name attribute
of "firstoneinput_39"
why is the alert outputting undefined. Btw I put real values in to the text fields also.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form action="comments.php" id="nameForm">
<table border='1'>
<tr>
<td><input type="text" class="hidden" name="firstoneinput_1_25" id="25" placeholder="firstoneinput_1_25"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_1_26" id="26" placeholder="firsttwoinput_1_26"></td>
</tr>
<tr>
<td> <input type="text" class="hidden" name="firstoneinput_2_27" id="27" placeholder="firstoneinput_2_27"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_2_28" id="28" placeholder="firsttwoinput_2_28"></td>
</tr>
<tr>
<td> <input type="text" class="hidden" name="firstoneinput_3_29" id="29" placeholder="firstoneinput_3_29"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_3_30" id="30" placeholder="firsttwoinput_3_30"></td>
</tr>
<tr>
<td> <input type="text" class="hidden" name="firstoneinput_4_31" id="31" placeholder="firstoneinput_4_31"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_4_32" id="32" placeholder="firsttwoinput_4_32"></td>
</tr>
</table>
<td> <input type="submit" value="search"></td>
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
JAVASCRIPT
<script>
$(document).ready(function(){
var id = 0;
$('table tr td').click(function(){
id = $(this).children("input[class='hidden']").attr("id");
return id;
});
$( "#nameForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this );
term1 = $form.find( "input[name='firstoneinput_" + id +"']").val();
alert(term1); <---alerts undefined even thou I put in form values
alert(id); <----alerts ok the id
New answer
This will always alert undefined ...
alert(term1); // < ---alerts undefined even thou I put in form values
... because you're looking for firstoneinput_XX ...
$form.find( "input[name='firstoneinput_" + id +"']").val();
... but your actual input elements have the name convention firstoneinput_X_XX.
<input ... name="firsttwoinput_1_26" ... />
- - - Previous answer - - 8-< - - -
Html:
<form>
<table>
<tr>
<td id='39'>Klick</td>
</tr>
</table>
<input name="firstoneinput_39" value="the_uber_value"/>
</form>
Script:
$(document).ready(function() {
$('td').click(function() {
alert($('input[name="firstoneinput_' + this.id + '"]').val());
});
});
Magic:
http://jsfiddle.net/McNull/4BDmh/

Add another element using GetElementById?

Let's say that this' an HTML code:
<tr>
<td>Wusool</td>
<td id="yasel">
15:12
</td>
</tr>
and I want to change it into this html code:
<tr>
<td>Wusool</td>
<td id="yasel">
15:12
</td>
</tr>
<tr>
<td>Ersal</td>
<td id="sent">
20:12
</td>
</tr>
How can I use GetElementById to do this?
Thanks in advance.
var tr = document.getElementById('yasel').parentNode,
new_tr = tr.parentNode.insertRow( tr.rowIndex + 1 ),
new_td;
new_tr.insertCell(0).innerHTML = 'Erasel';
(new_td = new_tr.insertCell(1)).innerHTML = '20:12';
new_td.id = "sent";
http://jsfiddle.net/7N3kr/
After getting elementbyID, get parent element (I don't have code handy, but you can google how to get parent element for html getelementbyID). Then add child element.
Try This Code in HTML Head:
<script language="javascript" type="text/javascript" >
function ChangeValue(element_id, val) {
var elm = document.getElementById(element_id);
elm.innerHTML = val;
}
</script>
Try This in HTML body:
<table>
<tr>
<td>
<span id="box1"></span>
</td>
<td>
<span id="box2"></span>
</td>
<td>
<span id="box3"></span>
</td>
</tr>
</table>
<input type="button" id="btn_change1" value="Change Value" onclick="ChangeValue('box1','22:30')" />
<input type="button" id="btn_change2" value="Change Value" onclick="ChangeValue('box2','11:10')" />
<input type="button" id="btn_change3" value="Change Value" onclick="ChangeValue('box3','21:35')" />
using javascript you can do it as
var td_elem = document.getElementById('yasel');
var tr_elem = td_elem.parentNode;
var table_elem = tr_elem.parentNode;
table_elem.innerHTML = table_elem.innerHTML + '<tr><td>Ersal</td><td id="sent">20:12</td></tr>';
fiddle : http://jsfiddle.net/4MJuS/
but you must try using jquery, it is a very good framework for javascript.
you can do it vary easily using jQuery
$('#yasel').parent().parent().append('<tr><td>Ersal</td><td id="sent"> 20:12 </td></tr>');

Categories