How to Integrate Global Variable Data into Dynamically Generated Form Fields

@jlrdw like add my global variable in the loop ?

@Danny971 I've done some pretty large applications and never had that much code look into refactoring your code and reduce it down.

https://laracasts.com/discuss/channels/javascript/seeing-how-you-folks-would-iterate-returned-json

In javascript learn how to break up your code and call functions to handle some things.

I'm on mobile now later when i'm at the desktop I will give you a short example.

@Danny971 First make sure to watch some refactoring videos from @jeffreyway

Just Examples

When I develop at times I throw all in main function to make sure all works:

response.json().then(function (data) {
        var div = document.getElementById('msg');
        document.getElementById("msg").style.display = "block";
        for (var key in data) {
            div.innerHTML += " " + data[key];
        }

Which is sloppy. But after getting all done I refactor, usually goes fairly quick.

Now see this:

try {
        const response = await axios.put(url, $post);
        var data = response.data;
        showData(data);
    } catch (error) {
        if (error.response) {
            showData(error.response.data);
        }
    }

The first call to showData is to display the success message or whatever. But note that I can use the same function to show errors as well.

The showData function is just:

function showData(data) {
        var div = document.getElementById('msg');
        document.getElementById("msg").style.display = "block";
        for (var key in data) {
            div.innerHTML += " " + data[key];
        }
    }

This way I can show validation errors in a div. Like The email field is required instead of just 422.

Your main function keep short and learn to call some functions to handle some of the stuff.

@jlrdw thanks for the guideline. the link you shared was an eye opener. Im still trying to figure out where I need to put the global variable to loop through the get the field created and populated witht global variable data

@Danny971 Why are you generating this form and fields entirely in JavaScript?

@martinbean cause the fields varies

so if we enter two adult it will generate for two adults based on the number entered

here

     <div class="form-group">
                                                        <label class="text-label">Number of Adults*</label>
                                                        <input type="number" name="numberofAdults" id = "numberofAdults" min ="0"   class="form-control" onchange="addAdultFields()" required>
                                                    </div>
                                                </div>

@Danny971 If they want to add another just use a popup modal.

Also just make a simple form and post with Axios JS.

You should be able to cut all that down to a few lines of code.

Edit:

Here is example using formData with an image also:

    const buttonForm = document.getElementById("submit");
    buttonForm.addEventListener("click", async (event) => {
        event.preventDefault();
        const thisForm = document.getElementById('signup');
        var formData = new FormData(thisForm);
        var url = '<?php echo DIR . "dog/addjs"; ?>';   // custom to my app
        axios({
            method: "post",
            url: url,
            data: formData,
       })
                .then(function (response) {
                    if (response.status == 200) {
                        alert(response.status);
                    }
                    console.log(response);  // real app show in a div
                })
                .catch(function (response) {
                    console.log(response);   // real app show in a div
                });
});

Just short example while I was learning axios js.

But there are several techniques to using axios js. See examples.

Use the axios js technique you prefer.

Note, It works with formData on a post, I had trouble with put. Had to use JS to get the inputs.

@jlrdw no I should use this cause its the only way to roll smoothly with the other requirement and to keep the UI flowing

@Danny971

its the only way to roll smoothly with the other requirement and to keep the UI flowing

That's what ajax is for, you show a success message and user moves on to where they need to go next.

A simple next step button would work.

I suggest taking more javascript and ajax lessons. It generally doesn't take that many lines of code.

@jlrdw it a multi step form

the first step is where you set the amout of adults

the second step Is the area where you see the first name last name gender and age

and where you manually insert the rest

@Danny971 exactly that's what a couple of modals could be used for.

After all is filled as needed data is sent via ajax.

You hide the modal until needed. (modal or just hidden divs) however you need to do it.

You could refactor all to much simpler.

You said earlier:

cause the fields varies

How possible? You still need matching DB fields in the database. So don't have fields that vary, instead show fields when needed.

Many times I write out and draw with pencil and paper what's needed, it helps visualize the project better.

Edit:

For related data (foreign data) yes this part do as needed, but put some of the work in a function you can call, so you don't have one huge function.

I showed earlier how to use other functions for some of the work.

But exactly what isn't working?

@Danny971 Yeah, but there are far better ways to do this. Like I mentioned the other day, you’re better off using a library that has reactivity (i.e. Alpine or Vue) instead of all this horrible DOM manipulation and manually creating and appending elements in JavaScript.

If you want to dynamically create a number of inputs based on the value of another, then this would be pretty easy with something like Alpine. I’ve created a JSFiddle example here: https://jsfiddle.net/martinbean/xf9ew5Lg/17/

16 lines of HTML with a few Alpine directives to automatically generate fields (as well as disable the submit button until adult details are provided). Your HTML is also separated from the behaviour, meaning you can change your mark-up to suit your website design much easier without having to rewrite loads of JavaScript.

@martinbean oh I thought writing pure Javascript code was the best thing to do. the example you gave does look simple but I did solve the issue I might still implement it later with Alpine. I change this

     
                                                <div class="form-group col-md-3">
                                                    <div class="form-group">
                                                        <label class="text-label">Date of Birth*</label>
                                                        <input type="text" name="dob" class=" form-control" placeholder="DateOfBirth" id="mdate-3">
                                                    </div>
                                                </div>

to

     
                                                <div class="form-group col-md-3">
                                                    <div class="form-group">
                                                        <label class="text-label">Date of Birth*</label>
                                                        <input type="date" name="dob" class=" form-control" placeholder="DateOfBirth" id="mdate-3">
                                                    </div>
                                                </div>

the change was from type text to type date

but do you know any other ways to get data from one step of a multi step from to the other

I used global variables but am not sure for certain if its the global variables are causing this issue.

the issue is that sometimes it takes the date of birth and calculate it and display the age the text field.

it works now and next few seconds trying again it wont work

i constantly have to keep clearing the cache in the browser to get it to work

what do you think might be the issue ?

@Danny971 you can pass data to another page via a json array. If session data, use a json array to pass it.

But I thought you were wanting to add users on the fly. Which should be easy either using @martinbean suggestion or javascript.

What did you mean by Global Variable Data?

Edit:

I often have apps where I add on the fly, I put the table in an object like:

Clicking add new brings up an add form. Note, just examples and images were taken from a work in progress app.

A good series is https://laracasts.com/series/javascript-techniques-for-server-side-developers

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

Also you do realize there are many free javascript lessons right here on laracasts.

@martinbean solution seems easier once you learn how.

@jlrdw thanks for your information and the links you provided by global variables I means this

// Define a global object to hold form data
var formData = {
  firstName: '',
  lastName: '',
  gender: '',
  dob: ''
};

I have a multi step form

here is what it looks like

 <div class="card-body">
                                <form action="{{url('requestFormData')}}" id="step-form-horizontal" class="step-form-horizontal" method="POST" >
                                    
                               

                                    <div>
                                        <h4>Client Info</h4>
                                        @csrf
                                        <section >
                                           
                                            
                                            <div class="row">

                                                <div class="col-lg-2 mb-4">
                                                    <div class="form-group">
                                                        <label class="text-label">First Name*</label>
                                                        <input type="text" name="firstName" class="form-control " placeholder="FirstName"  >
                                                    </div>
                                                  </div>
                                                  
                                                 <div class="col-lg-2 mb-4">
                                                    <div class="form-group">
                                                        <label class="text-label">Last Name*</label>
                                                        <input type="text" name="lastName" class="form-control" placeholder="LastName" >
                                                    </div>
                                                 </div>


                                              
                            
  
                                                   <div class="row"> <!-- 3rd row -->
                                                    <!-- drop dowwn with gender -->
                                                    <div class="form-group col-md-3">
                                                    <label>Select Gender*</label>
                                                    <select class="form-control" id="inputState" name="Gender" >
                                                    <option selected disabled>Choose...</option>
                                                    <option value="Male">Male</option>
                                                    <option value="Female">Female</option>
                                                    </select>
                                                    </div>

                 
                                                <div class="form-group col-md-3">
                                                    <div class="form-group">
                                                        <label class="text-label">Date of Birth*</label>
                                                        <input type="date" name="dob" class=" form-control" placeholder="DateOfBirth" id="mdate-3">
                                                    </div>
                                                </div>


                                                              <div class="col-lg-2 mb-4">
                                                    <div class="form-group">
                                                        <label class="text-label">Number of Adults*</label>
                                                        <input type="number" name="numberofAdults" id = "numberofAdults" min ="0"   class="form-control" onchange="addAdultFields()" required>
                                                    </div>
                                                </div>

                                                <div class="col-lg-2 mb-4">
                                                    <div class="form-group">
                                                        <label class="text-label">Number of Children*</label>
                                                        <input type="number" name="numberofChildren" id = "numberofChildren" min ="0"  class="form-control" onchange="addChildrenFields()" required >
                                                    </div>
                                                </div>
                                                
                                              </div> <!-- end of address row  -->

                                            

                                    
                                                <div class="row">

                                     

                                                </div>
                                            
                                    
                                               
                                        </section>
                



                                        <h4>Family Deographics</h4>
                                        
                                        <section >
                                           
                                        
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Family Deographics </h4>
                            </div>
                            <div class="card-body">
   
                                                
                                                
                                         <div class = "familycontainer family-demo-scrollbar">

                                         <div id="adultFormcontainer" ></div>
                                        <div id="children-form-container" ></div>

                                        </div>

                            </div>
                        </div>
                                        </section>

in the code above client Info section is the first step of the multi step form and family demographics is the second step

so I created global variable to store the data of first name , last name , dob, gender

so it can be used to create and populate the field of the head of house hold in family deographics.

yes you are right @martinbean gave alot of valuable resources and I will employ them.

well I wouldn't say I am an expert in JS because I was more focusing on backend developement and I also use MDN alot for JS

@Danny971 You can do one at a time, and just have an Add More button. Which my example does it like that, it adds a checking account entry.

Added via ajax, form set back to display none, and table is loaded.

But again just an alternative suggestion.

And formData is to submit your whole form.

So if you go that route, have a loop that makes that many inputs like @martinbean showed. Yes Alpine is probably easier, but it can easily be done in blade with or without javascript.

You don't need to use javascript for everything.

@jlrdw I will do it over with Apline and formData is not to submit the whole form . like I said it global variables for me to catch what the user input on client Info so we can have that data as adult 1 or head of house hold on family demographics

I will post a pic of how it work to get you and Idea

@jlrdw if I were to use Apline.js would I be able to write code to calculate the age from date of birth ?

if I were to use Apline.js would I be able to write code to calculate the age from date of birth ?

@Danny971 Yes. Just calculate the age from the specified birth date:

<form x-data="{
  form: {
    birth_date: null,
  },
  get age() {
    if (this.form.birth_date) {
      // TODO: Logic to calculate age here
    }

    return null;
  },
}">
  <label for="birth_date">Birth date</label>
  <input
    id="birth_date"
    name="birth_date"
    type="date"
    x-model="form.birth_date"
  >
  <template x-if="age > 0">
    <p>You are <span x-text="age"></span> years old.</p>
  </template>
</form>

@martinbean wow that is really simple and quick. I will diff implement this later down cause I have a deadline to meet this week for this sprint and since I already got it to work the other way I will submit that and later come back to redo it in Apline. you learn something new everyday. Never heard of Alpine before this discussion.

I have another issue in trying to submit my captured data to the database I don't get the ages for the adults in the controller

the Javascript is the same as I posted before (using this temporary before the deadline)

here is the controller

    
        // the adult first name
      // Initialize arrays to store extracted data
$adult_first_names = [];
$adult_last_names = [];
$adult_age = [];
$adult_gender = [];

// Extract first names
foreach ($_POST as $key => $value) {
    if (strpos($key, "adult") === 0 && strpos($key, "FirstName") !== false) {
        $adult_number = intval(str_replace("adult", "", str_replace("FirstName", "", $key)));
        $adult_first_names[$adult_number] = $value;
    }
}

// Extract last names
foreach ($_POST as $key => $value) {
    if (strpos($key, "adult") === 0 && strpos($key, "LastName") !== false) {
        $adult_number = intval(str_replace("adult", "", str_replace("LastName", "", $key)));
        $adult_last_names[$adult_number] = $value;
    }
}


// Extract ages
foreach ($_POST as $key => $value) {
    if (strpos($key, "adult") === 0 && strpos($key, "Age") !== false) {
        $adult_number = intval(str_replace("adult", "", str_replace("Age", "", $key)));
        $adult_age[$adult_number] = $value;
    }
}

dd($adult_age);

// Extract genders
foreach ($_POST as $key => $value) {
    if (strpos($key, "adult") === 0 && strpos($key, "Gender") !== false) {
        $adult_number = intval(str_replace("adult", "", str_replace("Gender", "", $key)));
        $adult_gender[$adult_number] = $value;
    }
}
         


foreach ($adult_first_names as $key => $first_name) {
    DB::table('family_demographics')->insert([
        'firstname' => $first_name,
        'lastname' => $adult_last_names[$key] ?? '', // Handle missing last name
        'age' => $adult_age[$key] ?? null, // Handle missing age
        'gender' => $adult_gender[$key] ?? '', // Handle missing gender
        'family_id' => $familyId // Ensure $familyId is defined and valid
    ]);
}

i get and empty array for adult age and it doesnt capture the head of house hold section in the controller

I solved this