0

I am a true beginner in html/js/jquery.

I am trying to save user input into an array, then later I want to write all that information from that array into an xml file.

My Problem is that my form consists of multiple Jobs which will all have the same input fields.

This is a short example of the first job:

<form>
    <table class="wrapper">
        <tr>
            <td style="text-align: left">First Digit:
            <div> <input id="fDigit" type="text" name="Job1[]" /></td>
            <td style="text-align: left">System:      
            <div> <input id="system" type="text" name="Job1[]" /></td>
            <td style="text-align: left">SAP Modul:  
            <div> <input id="sapModul" type="text" name="Job1[]" /></td>
        </tr>
        <tr>
            <td style="text-align: left">Country: 
            <div> <input id="country" type="text" name="Job1[]" /></td>
            <td style="text-align: left">Duration: 
            <div> <input id="duration" type="text" name="Job1[]" /></td>
            <td style="text-align: left">Step Number: 
            <div> <input id="stepNumber" type="text" name="Job1[]" /></td>
        </tr>
        <tr>
            <td style="text-align: left">Optional Text:
                <div> 
                <textarea align ="left" id ="optionalText" name="Job1[]" cols="20" rows="2"> </textarea>
                </div>
            </td>
        </tr>
    </table>
</form>

I have many more of those in my Script.

What I want to do now is saving the Information of every Job into an Array, meaning Job1[]: with the user input of every field which is shown above , Job2[]: different user input but similar input field with the same name. There might be an easier solution to do this but I just can't figure one out.

Sorry if this is a too stupid issue but i tried to find solutions for ages and could not find one which helped me out.

Thanks in advance!

4 Answers 4

0

For a beginner, the easiest solution might be to use a component that does form serialization for you. Your form should have a name (attribute), and an id is probably going to be useful too.

I've found form2js to be very practical, and it can manage collecting similarly named fields into an array.

I also made a small fiddle that shows one way to collect the info yourself, for example like this.

var job1 = [];
$('[name="Job1[]"]').each(function(index, inputField) {
    job1.push($(inputField).val());
});
console.log(job1);
2
  • Cheers for that! I'm gonna use it to collect the info later on for the xml!
    – JD Riegel
    Jul 23, 2013 at 8:19
  • Using the name-selector is not very efficient, so later on you might want to add all the job1-inputs a class and then use a class-selector $(".job1") to collect them.
    – Marcus
    Jul 23, 2013 at 8:26
0

you don't need to use multiple array names because the javascript is client side

just use Job1[]

0

I suggest you organize your data as a JSON object, for example

[{"Country": a, jobs:[your array]},{"Country":b, jobs:[your array]}]

and to insert a value to array, you can use: your_array.push(value)

Hope this help.

0
0

You can use a two dimensional array in your inputs name with the first index being the row index and the second the column name, something like Jobs[0][Country]. Then in the end you will have all your data in one array.

Also, if you're repeating the markup you posted for every job, avoid using id attributes on your inputs as this would produce invalid markup. Id attributes must be unique in a HTML page, use classes instead.

1
  • Thanks! I did not think of that! I go give this a try
    – JD Riegel
    Jul 23, 2013 at 8:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.