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
Related
I'm making an address book of a company's tech support contacts and the admin gets access to all addresses in a form of a table. In this table, he can add, delete and make changes to data in the same page.
I have set up the add and delete functions successfully, but I struggle a lot with the edit. I'm using node, express, mongodb and vanilla javascript.
I'm still a newbie in web developement and there is are words I may use wrong, so sorry in advance!
(Excuse my french, but most of the words mean the same in english.)
My HTML
<div>
<input id="edit" type="button" value="Editer" onclick="return edit()">
<input id="valider" type="hidden" value="Valider" onclick="return valider()">
</div>
<table id='myTable'>
<thead>
<tr class="header">
<th>Nom de l'entreprise</th>
<th>Téléphone 1</th>
<th>Téléphone 2</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<% companies.forEach(function(company){ %> //I loop through my db
<tr class="compName">
<td hidden id='_id' > <%= company._id %> </td>
<td> <input id="name" class="readonly" type="text" value=" <%= company.name %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="phone" class="readonly" type="text" value=" <%= company.phone %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="phone2" class="readonly" type="text" value=" <%= company.phone2 %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="mail" class="readonly" type="text" value=" <%= company.mail %>" readonly style="border: none" onblur="change(this)"> </td>
</tr>
<% }) %>
</tbody>
</table>
My Script
<script>
function edit() {
var editComp = document.getElementsByClassName("readonly");
var edit = document.getElementById('edit').type = 'hidden'; //get the edit button and hide it
var valider = document.getElementById('valider').type = 'button'; //then unhide the validate button so I can use it
for (var i = 0; i < editComp.length; i++) { //remove the readonly for each td so I can edit it
editComp[i].removeAttribute('readonly');
editComp[i].setAttribute("style", "border: 1px solid red;");
};
}
function valider() {
var editComp = document.getElementsByClassName("readonly");
var edit = document.getElementById('edit').type = 'button'; //unhide the edit button
var valider = document.getElementById('valider').type = 'hidden' //hide my validate button
for (var i = 0; i < editComp.length; i++) { //put back the readonly for each td so its uneditable
editComp[i].setAttribute('readonly', true);
editComp[i].setAttribute("style", "border: none;");
};
}
function change(element) { //when the input gets unfocused, I assume that's because changes happened
var setChanged = element.setAttribute("class", "readonly changed"); //I mark all changed element
/*I want to udapte my database with the changed elements
I was thing of getting the hidden company._id and the id of the changed element so I can update them specifically*/
}
</script>
So I was think of getting the col[0] of the changed row, which is the _id of my changed element, so I can target it for updating in my database, but I don't know how I should do it.
Thanks!
I have been able to make this work as it adds into <div></div> tags now I want to remove this array numbers 0,1,2,3 and feed the data into <div></div> tags in HTML, How can this be done, How do I make it insert inside the div tags
<html>
<head></head>
<title>Js test</title>
<h1>Js Test</h2>
<body>
<script type="text/javascript">
var data = new Array();
function addElement(){
data.push(document.getElementById('ins_name').value);
data.push(document.getElementById('gpa').value);
data.push(document.getElementById('da').value);
document.getElementById('ins_name').value='';
document.getElementById('gpa').value='';
document.getElementById('da').value='';
display();
}
function display(){
var str = '';
for (i=0; i<data.length;i++)
{
//str+="<tr><td>" + data[i] + "</td></tr>";
"<tr>
<td align=center width=176>Institution </td>
<td align=center>GPA</td>
<td align=center width=187>Degree Awarded</td>
</tr>"
"<tr>
<td align=center width=176> </td>
<td align=center> </td>
<td align=center width=187> </td>
</tr>"
}
document.getElementById('display').innerHTML = str;
}
</script>
<form name="jamestown" id="jamestown" method="post" action="samris.php" />
Institution : <input type="text" name="ins_name" id="ins_name" /></br>
GPA : <input type="text" name="gpa" id="gpa" /></br>
Degree Awarded : <input type="text" name="da" id="da" /></br>
</p>
<input type="button" name="btn_test" id="btn_test" value="Button Add Test" onClick='addElement()'; /></br>
</form>
<div id=display></div>
</body>
</html>
Since you've been adding more and more requirements in the comments, the innerHTML += "" approach stops working.
I advice you to create elements using document.createElement and add them to your document using Node.appendChild.
It's not really an answer to the initial question, but I figured it helps you more than continuing conversation in the comments. Maybe you can edit your question to reflect the additional requirements.
Let me know if there's stuff I used that you don't yet understand. Happy to elaborate!
var inputIds = ["ins_name", "gpa", "da"];
var inputElements = inputIds.map(getById);
var tbody = getById("display");
// Create a new row with cells, clear the inputs and add to tbody
function addRow() {
// Create a row element <tr></tr>
var row = document.createElement("tr");
inputElements.forEach(function(input) {
// For each input, create a cell
var td = document.createElement("td");
// Add the value of the input to the cell
td.textContent = input.value;
// Add the cell to the row
row.appendChild(td);
// Clear the input value
input.value = "";
});
// Add the new row to the table body
tbody.appendChild(row);
}
getById("btn_test").addEventListener("click", addRow);
// I added this function because document.getElementById is a bit too long to type and doesnt work with `map` without binding to document
function getById(id) {
return document.getElementById(id);
}
Institution : <input type="text" name="ins_name" id="ins_name" /><br>
GPA : <input type="text" name="gpa" id="gpa" /><br>
Degree Awarded : <input type="text" name="da" id="da" /><br>
<input type="button" id="btn_test" name="btn_test" value="Add Test"/><br>
<table>
<thead>
<tr>
<th>Institution</th>
<th>GPA</th>
<th>Degree</th>
</tr>
</thead>
<tbody id="display">
</tbody>
</table>
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/
<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
This problem seems to be odd to me and I can't seem to fix it. I do have a simple HTML form; inside, I do have a textbox and a button as shown down here:
<form id="form1" method="get"> <!-- Note: No Action property -->
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="Submit" onclick="myJS(this);" />
</td>
</tr>
</table>
</div>
</form>
MyJS file is as:
<script type="text/javascript">
function myJS(which) {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll").value;
var morestring = ""; //More data manipulation here.....
var url = CONSTANT_SITE_TARGET + allWords + morestring;
window.open(url);
//window.location = url; //Doesn't work
//window.location.href = url; //Doesn't work
//self.location = url; //Doesn't work
//top.location = url; //Doesn't work
}
</script>
As you can see, it doesn't redirect to the designated URL in the javascript. When I use the window.open then it works. Note that in the < form... > tag, I don't put the action property in it. I don't want to open a new browser, just redirect to the new url within the same browser.
Is there a way to redirect it?
Don't use the form tags. Or, set the "type" attribute of your button to be "button", not "submit". The form submits when you click the button, but you don't want that to happen. Either removing the form or changing the button should fix improper redirection. When you don't specify an action, I'm pretty sure the default is the current URL.
Ok, just an idea. As you haven't set the action parameter, the default behaviour of a submit button is to reload the same page. You alter that behaviour by handling its onclick. Maybe there is a conflict that can be resolved by having return false; at the end of the click handler, which prevents the default action for that event.
Here
function myJS(which) {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = which.txtAll.value;
var morestring = ""; //More data manipulation here.....
return CONSTANT_SITE_TARGET + allWords + morestring;
}
<form id="form1" method="get" onsubmit="this.action=myJs(this)">
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="Submit" />
</td>
</tr>
</table>
</div>
</form>
to elaborate on a comment:
<script>
window.onload=function() {
document.getElementById("Submit").onclick=function() {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll".value;
var morestring = ""; //More data manipulation here.....
location = CONSTANT_SITE_TARGET + allWords + morestring;
}
}
</script>
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Submit" value="Submit" />
</td>
</tr>
</table>
</div>
Try one the options for redirection below. I commented out three of them so that the code stays valid, but you may play around with either and see if it suits your needs.
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll").value;
var morestring = ""; //More data manipulation here.....
var url = CONSTANT_SITE_TARGET + allWords + morestring;
window.location.href= url;
//window.navigate(url);
//self.location(url);
//top.location(url);