i want to create a form for my client. My client require to create a dynamic for him.
suppose, i want to insert 1 record in main table of mysql, and record multiple records in secondary table which has reference key of main table. I dont know how many records against the main table, it maybe one at time or multiple records at time. I want to do it with single form. If client click add more button it show another text field to insert more data.
how i can do it ?????
aneeqtariq_143 0 Newbie Poster
Recommended Answers
Jump to Postjavascript will be used to add a set of form controls. jQuery could be used if you're a bit new to js.
Jump to Post@dafodil
dafodil? dafodil! Do I look like a freaking flower to you?! I am the Prince of Darkness! Well, when I turn off the light. :)
Laerning jQuery just for this may be overkill, but vanilla js cooks my brain owing to the way that different browsers tend …
All 8 Replies
diafol
javascript will be used to add a set of form controls. jQuery could be used if you're a bit new to js.
adam.adamski.96155 43 Junior Poster
I have the same requirement so I wrote a few lines that would demonstrate the answer to your question and give me a base to work from.
<?php
if (isset($_POST['submitted'])){
print_r($_POST);
}
?>
<html>
<head>
<script type="text/javascript">
function addTextArea(){
var div = document.getElementById('div_quotes');
div.innerHTML += "<textarea name='new_quote[]' />";
div.innerHTML += "\n<br />";
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="text_new_author" /><br />
<div id="div_quotes"></div>
<input type="button" value="Add Text Area" onClick="addTextArea();">
<input type="submit" name="submitted">
</form>
</body>
</html>
I thought I would need to keep a total of how many text areas had been added to allow them to have an individual name; area_1, area_2, area_3 etc. However adding [] to the textarea name and using the same name creates an array of values, so no values are lost and a unique name is not needed, print_r($_POST) produces:Array ( [text_new_author] => New Author [new_quote] => Array ( [0] => New quote 1 [1] => New quote 2 [2] => New quote 3 ) [submitted] => Submit Query )
But this solution causes another problem; if the user adds a new quote and then clicks the 'add text area' button the text entered into the first textarea disappears. I presume this is because a new textarea with the same name is added to the DOM, so maybe I will need a unique name for each added textarea after all :)
adam.adamski.96155 43 Junior Poster
@dafodil It's high time I learnt jQuery!
I sussed the issue was not the duplicate name, but rather the use of:div.innerHTML += "<textarea name='new_quote[]' />";
as when it grabbed the existing html it was collecting the textarea but not the user-added input. This was solved by adding a new textarea to the DOM rather than the above method, and I googled some jQuery assistance:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#button_add_input").click(function(event){
var textArea = "<textarea name='new_quote[]' />";
$("#div_quotes").append(textArea);
$("#div_quotes").append("\n<br />");
});
});
And the button to add a text area needed an id: <input type="button" value="Add Text Area" id="button_add_input">
I looked for a way to add the textarea without specifying the html as in something like $("#div_quotes").append(html.textarea), but could not find how to reference a textarea directly, so just added the HTML instead.
diafol
@dafodil
dafodil? dafodil! Do I look like a freaking flower to you?! I am the Prince of Darkness! Well, when I turn off the light. :)
Laerning jQuery just for this may be overkill, but vanilla js cooks my brain owing to the way that different browsers tend to mess up your carefully crafted code, I bit the bullet and joined the rest.
adam.adamski.96155 43 Junior Poster
@diafol Haha! Looking at your funny man links, I guess it could be 'David Hill' with a Welsh accent. I had not heard of Vanilla JS and was impressed with the performance stats, but as you mentioned, cross browser compatibility is a real pain with Javascript and jQuery separates the developer from this concern. Also, the jQuery UI looks like it will speed development of User Interfaces like the one I need to administer my quotes database.
aneeqtariq_143 0 Newbie Poster
Thanks for your Help. I get all the information what i needed.
Thanks again for helping me.
Ashvin_1 0 Newbie Poster
How to add new text field when button is clicked with database.
diafol
Read that back to yourself and ask "does it make sense"? There sre no buttons on a database
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.