How do I generate n number of input text box in JavaScript using a select option. And how do I fetch the variables in PHP.
below is my html form
<HTML>
<HEAD>
<TITLE>Dynamically add Textbox in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
var numberOfElementsAdded;
var arrayOfInputs = new Array();
function addToDatabase(numberOfElementsAdded) {
numberOfElementsAdded = numberOfElementsAdded * numberOfElementsAdded;
var alltext = "";
for (var j = 1; j <= numberOfElementsAdded; j++) {
var tvalue = document.getElementsByName("text" + j)[0].value;
arrayOfInputs.push(tvalue);
alltext = alltext + tvalue + " ";
}
alert(alltext);
}
function add(type, num) {
numberOfElementsAdded = num;
//Create an input type dynamically.
var k = 0;
for (var j = 0; j < num; j++) {
for (var i = 0; i < 4; i++) {
var element = document.createElement("input");
k = k + 1;
//Assign different attributes to the element.
element.setAttribute("type", type + k);
element.setAttribute("id", type + k);
element.setAttribute("name", type + k);
element.setAttribute('width', '30');
element.setAttribute('border', '3px solid #FF0000');
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
var breakLoop = document.createElement('br')
foo.appendChild(breakLoop)
}
var element = document.createElement("input");
element.setAttribute("type", "button");
element.setAttribute("id", "Submit");
element.setAttribute("name", "Insert into database");
element.setAttribute("value", "Insert into database");
element.setAttribute("onclick", "addToDatabase(numberOfElementsAdded)");
var breakLoop = document.createElement('br')
foo.appendChild(breakLoop)
foo.appendChild(element);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H2>Dynamically add element in form.</H2>
<SELECT name="element">
<OPTION value="1">1</OPTION>
<OPTION value="2">2</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="4">4</OPTION>
<OPTION value="5">5</OPTION>
<OPTION value="6">6</OPTION>
<OPTION value="7">7</OPTION>
<OPTION value="8">8</OPTION>
<OPTION value="9">9</OPTION>
<OPTION value="10">10</OPTION>
</SELECT>
<INPUT type="button" value="Add" onclick="add('text',document.forms[0].element.value)"/>
<BR/>
<span id="fooBar"> </span>
</FORM>
</BODY>
</HTML>
It generates the text box. But I want to fetch the values of text box as a PHP variable.
Assuming the code generates the textboxes properly, to get the values in PHP, you will have to amend this:
element.setAttribute("name", "Insert into database");
to
element.setAttribute("name", "myFieldName[]"); // with the [] brackets
Then in PHP, you will get it this way:
$fields = $_POST['myFieldName'];
// make it into a single delimited field
$fields = implode('|', $fields);
Related
This for my dropdownlist and format for auto numbering
and if someone choose NK/W will get No.Reg :
001/NK/W/2018, 002/NK/W/2018, 003/NK/W/2018
And if someone choose NK/S will get No. Reg 001/NK/S/2018.
If years change, the auto numbering will reset to 001 again
The solution here has more to do with javascript than Laravel or PHP for instance.
Check this out
https://jsfiddle.net/j6znavy9/
<p>
Reg No: Auto/
<select id="mySelect">
<option selected disabled>Select an Option</option>
<option value="NK/W">NK/W</option>
<option value="NK/S">NK/S</option>
<option value="MM/A">MM/A</option>
</select>
Year: *
<select id="yearSelect">
<option selected disabled>Select a Year</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</p>
<script>
$(document).ready(function() {
function pad(number, size) {
var s = String(number);
while (s.length < (size || 2)) {s = "0" + s;}
return s;
}
var year, mySelect, auto = 1;
$('#yearSelect').on('change', function(){
year = $(this).val();
auto = 1;
});
$('#mySelect').on('change', function(){
if( year === null || year === undefined ) {
alert('year is not defined!');
} else {
alert('Reg No: ' + pad(auto, 3) + '/' + $(this).val() + '/' + year);
auto++;
}
})
});
</script>
I am working on a project in which i have to append a dropdown options to selection list .I have tried to append options but am not getting them in dropdown. while i am getting values in debugging
$("#p_combination").empty();
for(var i = 0; i < len; i++) {
var dish_name = response[i]['dish_name'];
var pincode = response[i]['pincode'];
$("#p_combination").append("<option value='" + dish_name + "'>" + dish_name + "</option>");
document.getElementById('pincode').value = pincode;
}
<select name="p_combination[]" id="p_combination" multiple>
<option value="0">Select</option>
</select>
Try this:
$("#p_combination").empty();
//supposing that your response object is something like :
var response=[{'dish_name':'name1','pincode':1},{'dish_name':'name2','pincode':2},{'dish_name':'name3','pincode':3}];
for(var i = 0; i < response.length; i++) {
$("#p_combination").append("<option value='" + response[i]['dish_name'] + "'>" +response[i]['dish_name'] + "</option>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<select name="p_combination[]" id="p_combination" multiple>
<option value="0">Select</option>
</select>
You can use the .append() method in jQuery as in the following example.
Working Example:
$(document).ready(function(){
$('button').click(function(){
var newOptionValue = $('option').length;
$('select').append('<option value="' + newOptionValue + '">Option ' + newOptionValue + '</option>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="p_combination[]" id="p_combination" multiple>
<option value="0">Option 0</option>
</select>
<button type="button">Append Option</button>
This my code. How this multiselect values with array to post modelseardh.php
<p>
<label>Country:</label>
<select multiple="multiple" name="country[]" class="qs_carlocation1 carlocations" onChange="jsFunction()" id="selectOpt">
<?php
$sql_se = mysql_query('select * from `country`');
while($se = mysql_fetch_assoc($sql_se)) {
?>
<option value = "<?php echo $se['id'];?>"><?php echo $se['country'];</option>
<?php
}
?>
</select>
</p> `
<p id="change_form">
<label>Mark:</label>
<select multiple="multiple"name="search_mark[]"class="qs_carlocation1 carlocations" >
<?php
$sql_search_mark = mysql_query('select * from `mark`');
while($smark = mysql_fetch_assoc($sql_search_mark)) {
?>
<option value="<?php echo $smark['id'];?>"><?php echo $smark['name'];?></option>
<?php
}
?>
<script>
function jsFunction(){
var select = document.getElementById("selectOpt").value;
$.post(
"modelsearch.php",
{
id: "" + select + ""
},
function(data)
{
$('#change_form').html(data);
}
);
}
</script>
</select>
</p>
<?PHP
//this modelsearch.php
include('../db.php');
$id = $_POST['id'];
?>
There's wrong with enclosing & misplaced tag in the following line that possibly make the rendering ouput fails:
<option value = "<?php echo $se['id'];?>"><?php echo $se['country'];"></option>
which is missing ?>"> right before the </option>, and you need to remove "> between ?> <?php
it should be :
<option value = "<?php echo $se['id'];?><?php echo $se['country'];?>"></option>
and you also don't ouput any values between <option> xxx </ouput>, so the value attribute is assigned in the <option> but nothing to be ouput. I meant that xxx to be output
and FYI , you dont need to multiple echo the values, just concatenate the values :
<option value = "<?php echo $se['id'] +""+ $se['country'];?>" ></option>
First of all, you don't need to keep the country name in Array change country[] to country only
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script language='javascript'>
function showselection()
var frm = document.testingform //this is the name of the form can be as your form name
var opt = frm.country //this is the multiselect option name
var numofoptions = opt.length
var selValue = new Array
var j = 0
for (i=0; i<numofoptions; i++)
{
if (opt[i].selected === true)
{
selValue[j] = opt[i].value
j++
}
}
var myvalues=document.getElementById('yourhiddenvaluename').value=selValue;
$.post( 'modelsearch.php',{ newva: myvalues }, function( data ) {
$('#change_form').html(data)
});
}
</script>
<select name='country' multiple onchange='showselection()'>
//Your values
</select>
<input type="text" id="yourhiddenvaluename" name="seletedvalued" />
In modelsearch.php:
print_r($_POST['newva']);
<select name = "team1">
<option>Computer Science</option>
<option>Mathematics</option>
<option>Bioinformatic</option>
<option>Management Sciences</option>
</select>
<select name = "team2">
<option>Computer Science</option>
<option>Mathematics</option>
<option>Bioinformatic</option>
<option>Management Sciences</option>
</select>
how can i use the above code as depending "team2" on what value "team1" have.If i select computer science in the select option of team 1, then i don't want computer science to appear in the options of "team2".
You can give an ID to your selection and check the selection of the specific element. Thus you can distinguish between team1 and team2 and remove some in team2-selection with same value. it could be something like this:
<body>
<select onChange="jsFunction()" id="team1" >
<option onclick="jsFunction()">Computer Science</option>
<option>Mathematics</option>
<option>Bioinformatic</option>
<option>Management Sciences</option>
</select>
<select id="team2">
<option>Computer Science</option>
<option>Mathematics</option>
<option>Bioinformatic</option>
<option>Management Sciences</option>
</select>
<script>
function jsFunction(){
var team1 = document.getElementById( "team1" );
var team2 = document.getElementById( "team2" );
for (i=0;i<4;i++){
team2.remove(0);
}
var position=0;
for (i=0;i<4;i++){
if (i!=team1.selectedIndex){
team2.options[position] = new Option(team1.options[i].value);
position=position+1;
}
}
}
</script>
</body>
You can use Checkbox for these options.Its solves your Problem.
why PHP?
http://jsfiddle.net/655noe6p/
HTML:
<select name = "team1">
</select>
<select name = "team2">
</select>
JS:
var l = [
'Computer Science',
'Mathematics',
'Bioinformatic',
'Management Sciences'
];
$('select').change(function() {
var me = $(this);
var other = me.siblings();
var text = me.children(':selected').text();
other.each(function() {
var select = $(this);
var currentText = select.children(':selected').text();
select.empty();
$.each(l, function(k, d) {
if(d != text) {
select.append($('<option></option>').html(d).attr('selected', d == currentText));
}
});
});
});
$('select').change().change();
I have two tables in database: city and local_area
city :
id name
1 FSD
2 LHr
Local_area :
id city_id name
1 1 Kohnoor
2 1 samnabad
3 2 joharabad
4 2 amanabad
<select>
<option value="1">Fsd</option>
<option value="2">LHR</option>
</select>
I have a select box that allows to me to choose the city to display. When I select a city it should show a new HTML element showing all local_area for the given city.
I Have to do this using jQuery, after selection I want to store my record in database table.
<select id="ddCity">
<option value="-1"></option>
<option value="1">FSD</option>
<option value="2">LHr</option>
</select>
<div id="local_area_Grid"></div>
<script>
$(function(){
$("#ddCity").change(function(){
if($(this).val() != -1){
$.ajax({
url: "Server_address",
data:{cityId = $(this).val()},
success: function(data){
var _table = $("<table></table>");
for(var i = 0; i< data.length; i++){
$("<tr></tr>").append($("<td></td>").html("<label><input type='checkbox' value='data[i]' name='local_area'/>" + data[i] + "</label>")).appendTo(_table);
}
$("#local_area_Grid").html("").append(_table);
}
});
}
});
})
</script>
You should return an array from service
You need to use jQuery AJAX to "ask" a server for list of areas corresponding to the city. Or, may be, it would be better for you to load full list of all areas with page. For example:
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select id="city" name="city">
<option value="0">- Select -</option>
<option value="1">Fsd</option>
<option value="2">LHR</option>
</select>
<div id="area" style="display:none">
</div>
<script language="JavaScript">
var areas = {
'1' : { '1' : 'Kohnoor' },
'2' : { '1' : 'amanabad' }
}
$(function (){
var areaSelect = $('#area');
var citySelect = $('#city').change(function (){
var value = $(this).val();
if( value && typeof areas[value] != 'undefined' ){
areaSelect.empty().show();
for( var i in areas[value] ){
areaSelect.append('<input type="checkbox" name="area[]" value="'+i+'" />'+areas[value][i]+'<br />');
}
}else{
areaSelect.empty().hide();
}
});
});
</script>