0

How will my index.jsp look like if a button Add more is added next to the Process button, which when pressed will display another search form identical to the previous (as displayed below) but with different parameter or field like age, year etc. Example: <!-- how will I change the cloned form instead of displaying Car reg: <input type="text" name="car" /> to show age: <input type="text" name="age" /> --> <!-- how will I change the cloned form instead of displaying <input type="button"
onClick="addMoreForm('age')" value="Add More" /> to show <input type="button" onClick="delete('age')" value="delete" /> --> </div>

Brane
  • 139
  • 1
  • 2
  • 6
  • What are you doing and what do you want from us? Can you make your question a little more simplified? Thanks – Prakash K Aug 07 '12 at 07:21
  • In my jsp, I have a form made of field name "Car reg", user input field "car", dropdownlist "color" and submit button "Process". I would like to add a button next to the submit "Process" call "add more". Onclick of "add more" it will duplicate the same form under the previous one with different field name eg " instead of Car reg field as shown in the code, it will be age or year. thanks – Brane Aug 07 '12 at 10:23
  • You can do this with the help of javascript (or with some good javascript libraries like jQuery or YUI) adding fields to the same form and adding a different form below this form. This approach has nothing to do with `JSP` just javsacript will do. On the otherhand do you want that onClick of `Add more` you will hit the server and this JSP will be refreshed and will show two forms and then if clicked again it will refresh and show 3 forms ...? Hope I am not confusing you ;-) – Prakash K Aug 07 '12 at 10:47
  • I would appreciate if you provide the code for adding a completely new form with different fields (like age, year etc) when a button "add more" is clicked in the same jsp. same form with different field name below each other whenever `add more` is clicked. I am building a java web app using jsp-servlet, the above code is actually in my jsp. onClick of `Add more` I will get a similar form to the previous with different field name like age, onclick of `add more` in the second form show third form. :) thanks – Brane Aug 07 '12 at 11:28
  • Actually I would have loved to make the code for you, but then people on this site say "First ask to the questioner - `what have you tried?`, `what code is not working?`, `show some code which you tried?` this shows that the questioner wants to learn and is not some help-vampire (http://meta.stackexchange.com/q/19665/186393). So I would request you to post some code which you have tried to achieve this. For a start plz answer: 1) do you want to do this in javascript or by hitting the server everytime you say `Add More`? 2) What is your requirement in doing this? 3) do you know javascript? – Prakash K Aug 07 '12 at 12:01
  • Hi friend, the code shown above is what i have done to display one form. JSP is made of html and javascript, you can't build a java web app without any knowledge of javascript. if you can put your answer in code as i did in my question that will be appreciated. thanks – Brane Aug 07 '12 at 12:09
  • Great! Nice to hear that. Can you tell me what javascript code have you tried to add another form or which is adding anything on the page? Thanks. – Prakash K Aug 07 '12 at 12:48
  • "Can you tell me what javascript code have you tried to add another form or which is adding anything on the page?" none. thanks – Brane Aug 07 '12 at 12:54
  • :-) anyways I have tried to give an answer – Prakash K Aug 07 '12 at 13:25

1 Answers1

0

This might get you started ...

You can create a button or an anchor <a> link (whichever you like) for calling the function:

<input type="button" onClick="addMoreForm('the parameters come here*')" value="Add More" />

or

  • you can pass the formName and formId of the form to be copied, again some links:
  • https://stackoverflow.com/a/921302/468763
  • https://stackoverflow.com/a/710347/468763

  • an example with cloning with pure javacript, I am cloning your form1 to create a form2 where addingMoreId is a container like a <div> tag where your form2 will be created:

    var form2 = document.getElementById("form1").cloneNode(true);
form2.setAttribute("name", "form2");
form2.setAttribute("id", "form2");
document.getElementById("addingMoreId").appendChild(form2);

P.S.: For crowse-browser compatibility you can use a javascript library like jQuery or YUI.

Edit: Here is a sample code, you can improve a lot in this code and also can make it more generic.

<input type="button" onClick="addMoreForm('age')" value="Add More" />

<div id="addingMoreId">
    <!-- This is empty, the form2 will be created here -->
    <!-- So it is not required that the form be present here -->
</div>

<!-- This script tag goes into the <head> tag -->
<script>
    // this function will create the form2 in the div
    // you agree or not, you need to learn a lot more about Javascript :-)
    function addMoreForm(fieldName) {
        var form2 = document.getElementById("form1").cloneNode(true);
        form2.setAttribute("name", "form2");
        form2.setAttribute("id", "form2");
        document.getElementById("addingMoreId").appendChild(form2);
        form2.car.setAttribute("name", fieldName); // one way to access the element inside a form: "form2.car", where "car" is the name of the element created inside the form2
        form2.elements[fieldName].setAttribute("id", fieldName); // another way to access the element inside a form: "form2.elements["car"]"
    }
</script>

Lets Hope this helps :-)

Community
  • 1
  • 1
Prakash K
  • 11,669
  • 6
  • 51
  • 109
  • No. it is `
    ...
    ` and `
    ...
    `, Age and year are elements/fields inside this form. You can either create these elements (I have given links how to create Elements) or change the `` or `     – Prakash K Aug 08 '12 at 06:26
  • I have edited my code to include your solution, still does not work. would you like to edit it to reflect what you mean for it to work? thanks – Brane Aug 08 '12 at 11:33
  • I have edited my answer to include a sample code. You need to put your javascript inside a ` – Prakash K Aug 08 '12 at 13:11
  • thanks @Prakash :) , it works for the cloning but it does not : ` ` – Brane Aug 08 '12 at 15:52
  • I have already given code for changing the `name=car` to `name=age` and for changing the `onClick` for the `button` it is better to create one instead of changing it. Though in `jQuery` it would be very easy. I have already posted links to create elements. Thanks – Prakash K Aug 13 '12 at 06:41