So I want to change the select option using javascript but without reloading the page.
I am able to change other element data using document.getElementById.value
but not the select element
This is what I am trying to do: there is a form and a table inside my webpage , the table data is fetched dynamically using php. The form will edit the data. so when the edit button is pressed the row data against it will be automatically filled into the form.
All other elements of the form could fetch the data with my code. except the select option input element.
below is the the code I have used for each element of the form
jsfiddle here:http://jsfiddle.net/ZE6BX/11/
document.getElementById("l_type").value = data[1];
data array contains the values of the row against which edit is pressed!
u can check whether using index value or option value.
var opt = ocument.getElementById('l_type').options;
for(var i=1;i<opt.length;i++){
if(opt[i].value == 'Ve'){
**opt[i].selected = true;** }
}
this will help u.
This works http://jsfiddle.net/ZE6BX/12/
YOu had a difference in case in between VE in the table and Ve as the value in the select.
Here's the code
HTML:
<div id="l-form">
<form method="post" class="DA_custom_form" id="l-form" action="php/add.php">
<h3>Add</h3>
<label>Name</label>
<input type="text" class="field" id="l_name" name="l_name" />
<label>City</label>
<input type="text" class="field" id="l_city" name="l_city" />
<label>Phone</label>
<input type="text" class="field" id="l_phone" name="l_phone" />
<label>OP</label>
<div class="cl"> </div>
<input type="text" class="field" id="l_op" name="l_op" />
<label>Type</label>
<select class="select_field" id="l_type" name="l_type">
<option value=" ">Select type</option>
<option value="cu">Cu</option>
<option value="Ve">Ve</option>
<option value="Ex">Ex</option>
</select>
<div class="cl"> </div>
<div class="btnp">
<input type="submit" value="Save" name="submit" id="submit" />
</div>
</div>
</form>
</br>
</br>
<table id="existing" border=1>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>View/Edit</th>
</tr>
</thead>
<tbody>
<tr style:padding-left:10px;>
<td>sweet_name</td>
<td>Ve</td>
<td style="display:none">dream_city</td>
<td style="display:none">123456</td>
<td style="display:none">SWAG</td>
<td>
<button class="edit_button" value="Edit" name="button">Edit</button>
</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function () {
var data;
$("#existing").on("click", ".edit_button", function () {
data = $(this).closest("td").siblings().map(function () {
return $(this).text();
}).toArray();
console.log(data[0]); // name
console.log(data[1]); //type
console.log(data[2]); //city
console.log(data[3]); //phone
console.log(data[4]); //op
document.getElementById("l_name").value = data[0];
$("#l_type").value = data[1];
document.getElementById("l_city").value = data[2];
document.getElementById("l_phone").value = data[3];
document.getElementById("l_op").value = data[4];
});
});
Related
I have a simple university project for an online course site like Udemy.
This form for adding a course contains the course data and a dynamic table with a button that adds a new row.
My problem is POST data, I don't know how to get the table data to store in the Database.
edit:
I know how to use action"test.php".
I have created sign-up and login pages.
i know I can get post data example $email = $_POST['email'];
my problem is how I get a table
php code(I know all of it html):
<form action="" method="POST">
<div>
<label for="titleC">title course</label>
<input type="text" name="titleC" id="titleC" required>
</div>
<div>
<label for="Age">Choose a Rating Age:</label>
<select name="Age" id="Age" required>
<option value="12">12+</option>
<option value="16">16+</option>
<option value="18">18+</option>
</select>
</div>
<div>
<label for="Cprice">Course Price</label>
<input type="number" name="Cprice" id="Cprice" min="0" required>
</div>
<div>
<label for="Categories">Choose a Categories:</label>
<select name="Categories" id="Categories">
<option value="Development">Development</option>
<option value="IT">IT</option>
<option value="Design">Design</option>
<option value="Photography & Video">Photography & Video</option>
</select>
</div>
<div>
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">
</div>
<table id="listVideo">
<thead>
<tr>
<th>Name</th>
<th>Link</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td><input type="text" id="txtName" name="name[]" /></td>
<td><input type="text" id="txtLink" name="link[]" /></td>
<td><input type="button" onclick="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
<div class="soloButton">
<button type="submit" name="addcourse-submit" value="submit">submit</button>
</div>
</form>
js code:
function Add() {
var txtName = document.getElementById("txtName");
var txtCountry = document.getElementById("txtLink");
AddRow(txtName.value, txtCountry.value);
txtName.value = "";
txtCountry.value = "";
};
function Remove(button) {
//Determine the reference of the Row using the Button.
var row = button.parentNode.parentNode;
var name = row.getElementsByTagName("TD")[0].innerHTML;
if (confirm("Do you want to delete: " + name)) {
//Get the reference of the Table.
var table = document.getElementById("listVideo");
//Delete the Table row using it's Index.
table.deleteRow(row.rowIndex);
}
};
function AddRow(name, txtLink) {
//Get the reference of the Table's TBODY element.
var tBody = document.getElementById("listVideo").getElementsByTagName("TBODY")[0];
//Add Row.
row = tBody.insertRow(-1);
//Add Name cell.
var cell = row.insertCell(-1);
cell.innerHTML = name;
//Add txtLink cell.
cell = row.insertCell(-1);
cell.innerHTML = txtLink;
//Add Button cell.
cell = row.insertCell(-1);
var btnRemove = document.createElement("INPUT");
btnRemove.type = "button";
btnRemove.value = "Remove";
btnRemove.setAttribute("onclick", "Remove(this);");
cell.appendChild(btnRemove);
}
The dynamic table was taken from one of the tutorials.
Thank you
[English is not my native language sorry]
For an application I am working on, I want to autocomplete a field using the input of the other field. My form will contain several pairs of inputs, which causes the problem for me to only change one specific input field.
$(function () {
$(".master").change(function () {
word = $(this).val();
$(this).parents('tr').find(".slave").val(word);
});
});
To add extra fields to the form, the script below is used.
$(document).ready(function() {
var max_fields = 1000; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<tr><td><div class="form-group"><input type="text" class="master" name="or['+x+']"></div></td><td> </td><td><div class="form-group"><input type="text" class="slave" name="tr['+x+']"></div></td></tr>'); //add input box
}
});
});
This is the form I'm using. This is one of the 100 rows in this form.
<form method="POST">
<table width="100%" class="input_fields_wrap">
<tr>
<td width="48%">
<div class="form-group">
<select id="original" name="original" class="form-control">
<option value="nederlands">Nederlands</option>
</select>
</div>
</td>
<td width="4%"></td>
<td width="48%">
<div class="form-group">
<select id="translated" name="translated" class="form-control">
<option value="frans">Frans</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group"><input type="text" class="master" name="or[0]"></div>
</td>
<td> </td>
<td>
<div class="form-group"><input type="text" class="slave" name="tr[0]"></div>
</td>
</tr>
</table>
<button type="submit" id="save" class="btn btn-success pull-right">Opslaan</button>
</form>
So just to be clear, I want to change the value of the "translation" input according to the value of the input in the same row. As my form contains so many rows, I don't know how to change that specific input according to the input in the same table row. Thanks in advance!
Here you go, I had to take out the ajax call but if you need help adding it back in just let me know.
I changed your html a bit by using classes instead of id's and this is the relevant js.
$(function () {
$("table").on('change', '.master', function () {
word = $(this).val();
$(this).parents('tr').find(".slave").val(word);
});
});
https://jsfiddle.net/6LaLm33t/4/
What you can do is get the parent, and then find the #translation of that parent. original and translation should probably be classes.
var word = '';
$(function () {
$(".original").change(function () {
word = $(this).val();
var arr;
$.ajax({ type: "POST", async: false, url: 'wordsuggestion' + word, success: function(data) {
arr = data;
$(this).parents('tr').find(".translation").val(arr);
}});
});
});
If you don't want (or can't, for some reason) to change HTML (you will have to do it, anyway, if there are multiple id's!), this is one of the ways to get desired result:
$('table tr td:first-child input').on("keyup", function() {
$(this).closest('tr').find('td:last-child input').val($(this).val());
});
So, if you have 3 cells (td's) in row, first selector will 'grab' first input, second one will find last/second input in the same row.
$('table tr td:first-child input').on("keyup", function() { //or desired event...change...input..
$(this).closest('tr').find('td:last-child input').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>
<div class="form-group"><div class="ui-widget"><input type="text" id="original" class="form-control" name="or[0]"></div></div>
</td>
<td> </td>
<td>
<div class="form-group"><input type="text" id="translation" class="form-control tags" name="tr[0]"></div>
</td>
</tr>
<tr><td>
<div class="form-group"><div class="ui-widget"><input type="text" id="original" class="form-control" name="or[0]"></div></div>
</td>
<td> </td>
<td>
<div class="form-group"><input type="text" id="translation1" class="form-control tags" name="tr[0]"></div>
</td>
</tr>
<tr><td>
<div class="form-group"><div class="ui-widget"><input type="text" id="original1" class="form-control" name="or[0]"></div></div>
</td>
<td> </td>
<td>
<div class="form-group"><input type="text" id="translation2" class="form-control tags" name="tr[0]"></div>
</td>
</tr>
</table>
It has been ages i don't work anything in JS, i'm trying to do with a select enable another html form when certain selected option is being chosen. this is my script:
<script>
function Activar() {
var e = document.getElementById('perm_tipo');
var strUser = e.options[e.selectedIndex].text;
if(strUser=="familiar"){
document.getElementById('paciente').disabled = false;
}else{
document.getElementById('paciente').disabled = true;
}
}
i have those html select inside a form, i think that could be the problem but checking on google seems that's should'nt be an issue.
here is my html code:
<form id="registro" action="admin_panel.php" method="post">
<table border="0">
<tr>
<td>Tipo de permiso</td>
<td>
<select name="perm_tipo" onchange="Activar()">
<?php
permiso();
?>
</select>
<br>
</td>
<td>Paciente</td>
<td>
<select id="paciente" disabled>
<?php
pacientes();
?>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Registrar usuario"/><br>
</td>
</tr>
</table>
the php functions just fill the select options with data from some database, no big deal there, they work, no problem there.
Since you are using getElementById, you should use 'id' instead of 'name' in the 'select' element.
<select id="perm_tipo" onchange="Activar()">
....
</select>
More refactor: you can pass the DOM element itself in the event listener and you don't have to do var e = document.getElementById('perm_tipo'); in the first place
<select name="perm_tipo" onchange="Activar(this)">
....
</select>
<script>
function Activar(e) {
var strUser = e.options[e.selectedIndex].text;
if(strUser=="familiar")
document.getElementById('paciente').disabled = false;
else
document.getElementById('paciente').disabled = true;
}
</script>
I want to have two select boxes, one empty and one populated. The user will move some of the items from the populated select box to the empty select box. I have that working. What I need help on is that when the items are moved over to the empty select box and submit is pressed, no data is sent concerning the empty select box that is now populated. I have found that this is because as the person moves items over they are not kept selected. Is there something besides a select box that looks like a select box that I can use or is there some other way for me to find out what has been moved from one box to the other?
I am doing the processing of the form in python and have attached the basic code that I am using.
.html:
<html>
<head>
</head>
<script language="Javascript">
function SelectMoveRows(SS1,SS2)
{
var SelID='';
var SelText='';
// Move rows from SS1 to SS2 from bottom to top
for (i=SS1.options.length - 1; i>=0; i--)
{
if (SS1.options[i].selected == true)
{
SelID=SS1.options[i].value;
SelText=SS1.options[i].text;
var newRow = new Option(SelText,SelID);
SS2.options[SS2.length]=newRow;
SS1.options[i]=null;
}
}
SelectSort(SS2);
}
function SelectSort(SelList)
{
var ID='';
var Text='';
for (x=0; x < SelList.length - 1; x++)
{
for (y=x + 1; y < SelList.length; y++)
{
if (SelList[x].text > SelList[y].text)
{
// Swap rows
ID=SelList[x].value;
Text=SelList[x].text;
SelList[x].value=SelList[y].value;
SelList[x].text=SelList[y].text;
SelList[y].value=ID;
SelList[y].text=Text;
}
}
}
}
</script>
<body>
<form name="projectBuild" action="../cgi-bin/pythonTest.cgi" enctype="multipart/form-data" method="POST">
<table>
<tr>
<td align="center">
<SELECT NAME="selectList" style="width: 100%" MULTIPLE>
<!--<SELECT NAME="selectList" MULTIPLE>-->
<OPTION VALUE="crc">CRC</option>
<OPTION VALUE="vector">Vector</option>
<OPTION VALUE="mm">Matrix Multiply</option>
<OPTION VALUE="bubblesort">Bubble Sort</option>
<OPTION VALUE="quicksort">Quick Sort</option>
</SELECT>
</td>
<td align="center" >
<input type="button" name="add" value="Add >>" onClick="SelectMoveRows(document.projectBuild.selectList,document.projectBuild.userSelections)">
<br>
<input type="button" name="remove" value="<< Remove" onClick="SelectMoveRows(document.projectBuild.userSelections,document.projectBuild.selectList)">
</td>
<td allign="center">
<SELECT NAME="userSelections" style="width: 100%" MULTIPLE>
<!--<SELECT NAME="userSelections" MULTIPLE>-->
<!-- <OPTION VALUE="placeholder">placeholder</option> -->
</SELECT>
</td>
</tr>
<tr>
<td>
</td>
<td align="center">
<input type="submit" value="Submit">
</td>
</table>
</body>
</html>
.cgi:
#!/usr/bin/python
import cgi, os, sys, commands
myForm = cgi.FieldStorage()
pickedAcc = myForm.getvalue("userSelections")
leftAcc = myForm.getvalue("selectList")
print pickedAcc
print "Left Accelorator list: "
print leftAcc
Before submitting the form, loop through all the options in the userSelections select and set the selected attribute of each option to true. Modify your form as follows
<form name="projectBuild"
onSubmit="selectAll(document.projectBuild.userSelections)"
action="../cgi-bin/pythonTest.cgi"
enctype="multipart/form-data"
method="POST">
In the selectAll method, you loop through all the options and set the selected attribute to true.
Execute a JavaScript when a form is submitted
Javascript loop through ALL HTML select (See the 2nd answer)
I'm trying to add html block with jQuery, but whatever i tried i couldn't add it correctly. I want to copy and paste one specific html block when i click the "add" button (Addfield button). I don't want to clone, just add one field with one click . Again and again... Hope you can help me thanks in advance.
HTML :
<div class="entry-edit">
<div class="entry-edit-head">
<h4 class="icon-head head-edit-form fieldset-legend"><?php echo Mage::helper('panel')->__('Kategoriler') ?></h4>
<button id="Addfield" title="Field Ekle" type="button" class="smclass" onclick="" style="float: right;"><span><span><span>Field Ekle</span></span></span></button>
</div>
<fieldset id="grop_fields">
<table cellspacing="0" class="form-list">
<tr>
<td class="label"><label for="Type">Tip</label></td>
<td class="value">
<select id="Type" name="optional[1][type]" class=" select">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
</td>
</tr>
<tr>
<td class="label"><label for="Class">Class</label></td>
<td class="value">
<input id="Class" name="optional[1][class]" value="" type="text" class=" input-text"> </td>
</tr>
</table>
<button id="Add" title="Ekle" type="button" class="scalable save" onclick="" style=""><span><span><span>Ekle</span></span></span></button>
<br></br>
</fieldset>
You can do it like this:
var html_code = '<span>put your full code here</span>';
var selector = 'body';
//change selector with where you want to append your html code into..
$(selector).append(html_code);
One way to approach this would be to create your "template" area in a hidden DIV. Use jQuery to duplicate and repeat the template.
For example:
<div id="templateholder"></div>
<div id="template" style="display: none;">
<div class="template">
<label for="Type">Tip</label>
<select id="Type" name="optional[1][type]" class=" select">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
<button id="Add" title="Ekle" type="button" class="scalable save" onclick="" style=""><span><span><span>Ekle</span></span></span></button>
</div>
</div>
function createTemplate() {
var temp = $("#template div.template").clone();
//from here you can do things like change name fields or values
temp.find("#Type").attr("name", "Type2");
//...attach events
temp.find("#Add").click(function() {
//some click action like make a new template
createTemplate();
});
//then add the new code to the holding area
$("#templateholder").append(temp);
}
If you wanted to create a new one when the page first loads
$(function() {
createTemplate();
});
Its would be nice to know what you have tried.... but if you do a quick search you would know about DOM method....
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
source: http://www.w3schools.com/js/js_htmldom_nodes.asp
there is another question in stackoverflow with similar question with decent answer
Inserting HTML into a div