How can i dynamically generate this type of form element in javascript, including the table rows and columns enclosing the form elements.

I have try to google for solution, but without success.

I code in PHP, but i need it to integrate in my code.


Thanks for your help.

Its hard to know what you want this form to do (behaviour) as its just an image.

Are you trying to dynamically populate a second form <select> based on what is selected in the first form <select> which is also dynamically populated from a DB?

I second Dual's comments.

Are you asking how to dynamically generate the entire form? If so, there is no need for that.

Are you asking how to generate, for example, the dropdown options? You will need to use an array (javascript) or database (php/mysql) for that.

In JavaScript you can use events. For example in a div container you can use the innerHTML property to populate the form. . . do something like. . .
<div id="mydiv"></div>

In the javascript tag put a function to be triggered base on your event requirement, for example:

function on_my_command()
{
var a_div = document.getElementByID("mydiv";

a_div.innerHTML = "<table>. . .</table>";
}

Now call this function from where you want it triggered i.e. button clicks, onload events etc. Please stop double posting i.e. post your questions in more than one section.

@Op
I think what you need is the javascript even handler with so if and else statement attached.

Dual Core:

Its hard to know what you want this form to do (behaviour) as its just an image.

Are you trying to dynamically populate a second form <select> based on what is selected in the first form <select> which is also dynamically populated from a DB?

I'm glad you ask this.

The 'Job Type' label  is kind of a category and 'Job Title' is a subcategory that is dynamically populated based on the choosing selection from the 'Job Type' and the 'Quantity and Amount' text field can be manually inputted.

The 'Add More' button to the right of the 'Job Type' will generate a similar form like the one in the image whenever the user clicked on it.

In the new generated form 'Job Type' label will now be 'Job Type 2: ',  'Job Type 3:' ,  and so on.

I hope i'm not confusing anything? Thanks for your help.

yawa-ti-de:

I second Dual's comments.

Are you asking how to dynamically generate the entire form?  If so, there is no need for that.

Are you asking how to generate, for example, the dropdown options? You will need to use an array (javascript) or database (php/mysql) for that.

I don't want to query the database during data entry, neither do I want the page to refresh or use ajax while the form is being filled.

dell_net:

In JavaScript you can use events. For example in a div container you can use the innerHTML property to populate the form. . . do something like. . .
<div id="mydiv"></div>

In the javascript tag put a function to be triggered base on your event requirement, for example:

function on_my_command()
{
var a_div = document.getElementByID("mydiv";

a_div.innerHTML = "<table>. . .</table>";
}

Now call this function from where you want it triggered i.e. button clicks, onload events etc. Please stop double posting i.e. post your questions in more than one section.

Thank you. I will see how i can manipulate the code above, I'm new to javascript.

Your observation is well noted!

Passing by. . .

*dhtml¡:

Passing by. . .

Bros why you go dey pass by na! Abeg help ur boy!

Am having a little headache, i cannot read all this long posts now. Maybe later.
But these professionals for here suppose don help you na??

, i dey wait!

binaflexia:

I don't want to query the database during data entry, neither do I want the page to refresh or use ajax while the form is being filled.

No DB query, no JS page refresh, no AJAX.
Then what exactly do you want?

I'd like to help you with this but you have to be clear.

*dhtml¡:

Am having a little headache, i cannot read all this long posts now. Maybe later.
But these professionals for here suppose don help you na??

I got a dislocated right arm from the pool on Friday. Dunno how but I dived in and heard my arm do "praarrp!" after a few strokes. So we in the same boat

After taking a very-big-bowl-of-garri (i don code pass dinner - everybody don sleep) - i have finally recovered from the headache. . . .

@op, my head don clear like alajo-somolu now. But wait, all those codes they are writing above there are not so relevant jare.

I understand what you want. My question now is how do we go about it?

You want to generate dynamically. Do you want to generate with PHP or with javascript?

Now if the answer is PHP, can you try to give a little example. Do you want to populate from an array or what?

Or are you just looking for a simple wrapper that makes it very easy for you to generate those stuffs?

Mehn, i hope i am not talking thrash sha?

The spam bot swallowed your reply - https://www.nairaland.com/nigeria?topic=787296.10;wap2

I will see what i can do - i cant promise anything.

The main question left is - where is the information to populate going to be coming from? Are we talking of an ajax application
or what?

Forget about codes, dont write any codes, give an example of how you want the application to work

e.g. You display 3 buttons and then user clicks one and a list comes out. . . . something like that?

*dhtml:

The main question left is - where is the information to populate going to be coming from? Are we talking of an ajax application
or what?

Forget about codes, dont write any codes, give an example of how you want the application to work

e.g. You display 3 buttons and then user clicks one and a list comes out. . . . something like that?

I read your reply and I just smile with joy.

No sir, not ajax application. The information will come from the javascript code itself, maybe from arrays or normal string. I don't want the application to query any database until the form is been submitted when it will need to insert to information into the database.

* I'm to happy to be able to seek you attention. Thank you bros!

*dhtml:

The spam bot swallowed your reply - https://www.nairaland.com/nigeria?topic=787296.10;wap2

I will see what i can do - i cant promise anything.

I no know wetin i do the spam bot, d tin just dey annoy me terribly!. Thanks for coming to the rescue.

contradiction: information you want populated on the select form fields are coming from a javascript array. when you add more job types, how does that get updated in thw javascript array? what are databases for?

Suggestion: state what this is, a school assignment, a clients job e.t.c. State how you want it in pure English, leave the coder to worry about what technology to use.

Very good. Dual core has explained it more clearly - that is the kinda stuff am trying to ask you. The word dynamic could mean a lot of things.

Maybe you should create the forms down already, and use javascript to selectively display and hide any form you are interested in.

Wetin i do the spam bot na and why he dey try frustrate my efforts?

See the swallowed post in plain text as bros take do am b4

https://www.nairaland.com/nigeria?topic=787296.20;wap2

Na wa o. See as spam bot pirate omo-to-dun! Having headaches aGAIN - i will read the posts later.

I was banned too once while i was a moderator, first thing i did was to check my moderation status. I think dual core and some other mods ave been banned too at some point.

Dual Core and Dhtml

Bros, how una dey do me now?

Is this what you want?

A form containing categories (Job Type) populated into a list and another list containing sub categories (job titles) based on the job type selected.
Two links below to "Add More Job Type" and "Add More Job Title".

Is this it?

Yes, along with the text input field for quantity and amount.

==save as index.php==
<?php
ob_start();
session_start();

//database connection
$dbuser="root";
$dbpass="";
$dbhost="localhost";
$dbname="bina";

@mysql_connect($dbhost, $dbuser, $dbpass) or die("Check database connection settings";
@mysql_select_db($dbname);


//getting random string, state length
function genId($length) {
    $characters = "0123456789abcdefghijklmnopqrstuvwxyz";
    $string = "";   

    for ($p = 0; $p < $length; $p++) {
        $string .= $characters[mt_rand(0, strlen($characters))];
    }

    return $string;
}

//add job type
if($_POST['add_type']){
$add_job_type_name = $_POST['job_type'];
$add_job_type_id = genId(10);
if(@mysql_query("insert into job_type (job_type_name, job_type_id) values ('$add_job_type_name', '$add_job_type_id')"){
$add_type_message = "A new job type has been added!";
}
}


//add job title
if($_POST['add_title']){
$add_job_title_name = $_POST['job_title'];
$add_job_title_id = genId(10);
$add_job_type_id = $_POST['job_type_id_2'];
if(@mysql_query("insert into job_title (job_title_name, job_title_id, job_type_id) values ('$add_job_title_name', '$add_job_title_id', '$add_job_type_id')" or die(@mysql_error())){
$add_title_message = "A new job title has been added!";
}
}

//get all job types
$job_type_result = @mysql_query("select * from job_type";
while($job_type_row = @mysql_fetch_array($job_type_result)){
$job_type_name[] = $job_type_row['job_type_name'];
$job_type_id[] = $job_type_row['job_type_id'];
}
$job_type_row_count = count($job_type_name);


?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>$(function(){
$('#add_job_type').hide();
$('#add_job_title').hide();

$('#add_job_type_link').click(function(){$('#add_job_type').fadeIn(); $('#add_job_title').hide();});
$('#add_job_title_link').click(function(){$('#add_job_title').fadeIn(); $('#add_job_type').hide();});


});</script>

</head>
<body>

<div>
<?php
if($add_type_message){
?>
<p>A new Job Type has been added!</p>
<?php
}
elseif($add_title_message){
?>

<p>A new Job Title has been added!</p>
<?php
}
?>
<form>
<table class="table">
<tr>
<td>Job Type</td>
<td>
<select name = "job_type_id" id = "job_type_id">
<option value="none">Choose a job type</option>
<?php
for($i=0;$i<$job_type_row_count;$i++){
?>
<option value="<?php echo $job_type_id[$i] ?>"><?php echo $job_type_name[$i] ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Job Title</td>
<td><p id="job_title">Choose a Job Type above</p></td>
</tr>
<tr>
<td>Quantity</td>
<td><input type ="text" name="quantity" id="quantity" /></td>
</tr>
<tr>
<td>Amount</td>
<td><input type ="text" name="amount" id="amount" /></td>
</tr>
</table>
</form>
<p><a href="#" id = "add_job_type_link">Add more job types</a></p>
<p><a href="#" id = "add_job_title_link">Add more job title</a></p>
<div id="add_job_type">
<form method="post" action="#">
<table>
<tr>
<td>Job Type</td>
<td><input type = "text" name = "job_type" /></td>
</tr>
<tr>
<td></td>
<td><input type = "submit" name = "add_type" value = "Add" /></td>
</tr>
</table>
</form>
</div>


<div id="add_job_title">
<form method="post" action="#">
<table>
<tr>
<td>Job Type</td>
<td>
<select name = "job_type_id_2" id = "job_type_id_2">
<option value="none">Choose a job type</option>
<?php
for($i=0;$i<$job_type_row_count;$i++){
?>
<option value="<?php echo $job_type_id[$i] ?>"><?php echo $job_type_name[$i] ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Job Title</td>
<td><input type = "text" name = "job_title" /></td>
</tr>
<tr>
<td></td>
<td><input type = "submit" name = "add_title" value = "Add" /></td>
</tr>
</table>
</form>
</div>


</div>
<script>
$('#job_type_id').change(function(){
var xmlhttp;
var job_type_id = $('#job_type_id').val();
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","get_job_title.php?request=job_title&job_type_id="+job_type_id);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
$('#job_title').html(xmlhttp.responseText);
}
}
});
</script>
</body>
</html>
<?php
ob_flush();
?>









===save as get_job_title.php in same folder as index ===
<?php

//database connection
$dbuser="root";
$dbpass="";
$dbhost="localhost";
$dbname="bina";

@mysql_connect($dbhost, $dbuser, $dbpass) or die("Check database connection settings";
@mysql_select_db($dbname);

//process request for job titles
if($_GET['request'] == "job_title"{
$req_job_type_id = $_GET['job_type_id'];
$job_title_result = @mysql_query("select * from job_title where job_type_id = '$req_job_type_id'";
while($job_title_row = @mysql_fetch_array($job_title_result)){
$job_title_name[] = $job_title_row['job_title_name'];
$job_title_id[] = $job_title_row['job_title_id'];
}
$job_title_row_count = count($job_title_name);
//echo $job_title_row_count;
}
if($job_title_row_count > 0){
?>
<select name = "job_title_id" id = "job_title_id">
<?php
for($i=0;$i<$job_title_row_count;$i++){
?>
<option value="<?php echo $job_title_id[$i] ?>"><?php echo $job_title_name[$i] ?></option>
<?php
}
?>
</select>

<?php }
else{
echo "No records";
}
?>






=====sql dump ======
-- Database: `bina`
--

-- --------------------------------------------------------

--
-- Table structure for table `job_title`
--

CREATE TABLE `job_title` (
  `job_type_id` varchar(255) NOT NULL,
  `job_title_id` varchar(255) NOT NULL,
  `job_title_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- --------------------------------------------------------

--
-- Table structure for table `job_type`
--

CREATE TABLE `job_type` (
  `job_type_id` varchar(255) NOT NULL,
  `job_type_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;






I do hope you understand all the codes. Forgive my scattered coding, its not a habit. I'm very busy with some projects and gave you 30 mins of my precious morning hours when i'm sanest.

Sorry if its not very clear. I tried to squeeze a lot together into 2 files for education purposes. I paid no regard to the look, security and form validation as these matters are outside the scope of the educational purpose.

@Dual Core

I can't explain how grateful I'm to you, for putting such amount of efforts to produce this nice code. Maybe I was wrong to think that this could be achieved with JavaScript alone.

God bless you!