is possible to have multi dimensional array with dynamic index in html form? - Hack The Tech - Latest News related to Computer and Technology

Hack The Tech - Latest News related to Computer and Technology

Get Daily Latest News related to Computer and Technology and hack the world.

Monday, November 27, 2023

is possible to have multi dimensional array with dynamic index in html form?

I have a form with some input that each input have a plus-button and minus-button to append and remove itself, in other word we have many "resume-part", each "resume-part" have many "resume-item", each "resume-item" have many "h4", "h5", "paragraph" and "list-item" these field fill and use inside the html code dynamic with php.

this is the form html code :

        <form class="card" action="" enctype="multipart/form-data" method="post">
      @csrf
      <div class="card-header">
        <h3 class="card-title">Resume</h3>
      </div>
      <div class="card-body">
        <div>
          <div class="mb-3">
            <label class="form-label">Title</label>
            <input type="text" class="form-control" name="programming_portfolio_resume_title" value=""/>
          </div holder>
            @for($i = 0 ; $i < count(@get_field('programming_portfolio_resume_part') ?? array_fill(0, 1, null)) ; $i++)
              <div resume-part class="mb-3">
                <div class="card">
                  <div class="card-header">
                    <div class="form-label">Resume part</div>
                  </div>
                  <div class="card-body">
                    <label class="form-label">Resume title</label>
                    <input type="text" class="form-control" name="programming_portfolio_resume_part[][title]" value=""/>
                    <div holder>
                      @for($j = 0 ; $j < count(@get_field('programming_portfolio_resume_part')[$i]["item"] ?? array_fill(0, 1, null)) ; $j++)
                      <div resume-item class="mb-3">
                        <div holder>
                            @for($k = 0 ; $k < count(@get_field('programming_portfolio_resume_part')[$i]["item"][$j]["h4"] ?? array_fill(0, 1, null)) ; $k++)
                              <div>
                                <label class="form-label">Head one</label>
                                <input type="text" class="form-control" name="programming_portfolio_resume_part[][item][][h4][]" value=""/>
                                <button type="button" class="btn btn-secondary btn-sm plus-button m-2" onclick="duplicateDiv(this)"><i class="fa-solid fa-plus"></i></button>
                                <button type="button" class="btn btn-secondary btn-sm minus-button m-2" onclick="deleteLastDiv(this)"><i class="fa-solid fa-minus"></i></button>
                              </div>
                            @endfor
                        </div>
                        <div holder>
                            @for($k = 0 ; $k < count(@get_field('programming_portfolio_resume_part')[$i]["item"][$j]["h5"] ?? array_fill(0, 1, null)) ; $k++)
                              <div>
                                <label class="form-label">Head two</label>
                                <input type="text" class="form-control" name="programming_portfolio_resume_part[][item][][h5][]" value=""/>
                                <button type="button" class="btn btn-secondary btn-sm plus-button m-2" onclick="duplicateDiv(this)"><i class="fa-solid fa-plus"></i></button>
                                <button type="button" class="btn btn-secondary btn-sm minus-button m-2" onclick="deleteLastDiv(this)"><i class="fa-solid fa-minus"></i></button>
                              </div>
                            @endfor
                        </div>
                        <div holder>
                            @for($k = 0 ; $k < count(@get_field('programming_portfolio_resume_part')[$i]["item"][$j]["paragraph"] ?? array_fill(0, 1, null)) ; $k++)
                              <div>
                                <label class="form-label">Paragraph</label>
                                <input type="text" class="form-control" name="programming_portfolio_resume_part[][item][][paragraph][]" value=""/>
                                <button type="button" class="btn btn-secondary btn-sm plus-button m-2" onclick="duplicateDiv(this)"><i class="fa-solid fa-plus"></i></button>
                                <button type="button" class="btn btn-secondary btn-sm minus-button m-2" onclick="deleteLastDiv(this)"><i class="fa-solid fa-minus"></i></button>
                              </div>
                            @endfor
                        </div>
                        <div holder>
                            @for($k = 0 ; $k < count(@get_field('programming_portfolio_resume_part')[$i]["item"][$j]["listitem"] ?? array_fill(0, 1, null)) ; $k++)
                              <div>
                                <label class="form-label">List item</label>
                                <input type="text" class="form-control" name="programming_portfolio_resume_part[][item][][listitem][]" value=""/>
                                <button type="button" class="btn btn-secondary btn-sm plus-button m-2" onclick="duplicateDiv(this)"><i class="fa-solid fa-plus"></i></button>
                                <button type="button" class="btn btn-secondary btn-sm minus-button m-2" onclick="deleteLastDiv(this)"><i class="fa-solid fa-minus"></i></button>
                              </div>
                            @endfor
                        </div>
                        <label> resume item :</label>
                        <button type="button" class="btn btn-secondary btn-sm plus-button m-2" onclick="duplicateDiv(this)"><i class="fa-solid fa-plus"></i></button>
                        <button type="button" class="btn btn-secondary btn-sm minus-button m-2" onclick="deleteLastDiv(this)"><i class="fa-solid fa-minus"></i></button>
                      </div>
                      @endfor
                    </div>
                  </div>
                </div>
                <label>resume part :</label>
                <button type="button" class="btn btn-secondary btn-sm plus-button m-2" onclick="duplicateDiv(this)"><i class="fa-solid fa-plus"></i></button>
                <button type="button" class="btn btn-secondary btn-sm minus-button m-2" onclick="deleteLastDiv(this)"><i class="fa-solid fa-minus"></i></button>
                
              </div>
            @endfor
        </div>
      </div>
      <div class="card-footer text-end">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>

and here is the final html code that I will place the form values :

    <!-- ======= Resume Section ======= -->
<section id="resume" class="resume">
    <div class="container">

      <div class="section-title">
        <h2>Resume</h2>
        <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
      </div>

      <div class="row">
        <div class="col-lg-6" data-aos="fade-up">
          <h3 class="resume-title">Sumary</h3>
          <div class="resume-item pb-0">
            <h4>Alex Smith</h4>
            <p><em>Innovative and deadline-driven Graphic Designer with 3+ years of experience designing and developing user-centered digital/print marketing material from initial concept to final, polished deliverable.</em></p>
            <ul>
              <li>Portland par 127,Orlando, FL</li>
              <li>(123) 456-7891</li>
              <li>alice.barkley@example.com</li>
            </ul>
          </div>

          <h3 class="resume-title">Education</h3>
          <div class="resume-item">
            <h4>Master of Fine Arts &amp; Graphic Design</h4>
            <h5>2015 - 2016</h5>
            <p><em>Rochester Institute of Technology, Rochester, NY</em></p>
            <p>Qui deserunt veniam. Et sed aliquam labore tempore sed quisquam iusto autem sit. Ea vero voluptatum qui ut dignissimos deleniti nerada porti sand markend</p>
          </div>
          <div class="resume-item">
            <h4>Bachelor of Fine Arts &amp; Graphic Design</h4>
            <h5>2010 - 2014</h5>
            <p><em>Rochester Institute of Technology, Rochester, NY</em></p>
            <p>Quia nobis sequi est occaecati aut. Repudiandae et iusto quae reiciendis et quis Eius vel ratione eius unde vitae rerum voluptates asperiores voluptatem Earum molestiae consequatur neque etlon sader mart dila</p>
          </div>
        </div>
        <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
          <h3 class="resume-title">Professional Experience</h3>
          <div class="resume-item">
            <h4>Senior graphic design specialist</h4>
            <h5>2019 - Present</h5>
            <p><em>Experion, New York, NY </em></p>
            <ul>
              <li>Lead in the design, development, and implementation of the graphic, layout, and production communication materials</li>
              <li>Delegate tasks to the 7 members of the design team and provide counsel on all aspects of the project. </li>
              <li>Supervise the assessment of all graphic materials in order to ensure quality and accuracy of the design</li>
              <li>Oversee the efficient use of production project budgets ranging from $2,000 - $25,000</li>
            </ul>
          </div>
          <div class="resume-item">
            <h4>Graphic design specialist</h4>
            <h5>2017 - 2018</h5>
            <p><em>Stepping Stone Advertising, New York, NY</em></p>
            <ul>
              <li>Developed numerous marketing programs (logos, brochures,infographics, presentations, and advertisements).</li>
              <li>Managed up to 5 projects or tasks at a given time while under pressure</li>
              <li>Recommended and consulted with clients on the most appropriate graphic design</li>
              <li>Created 4+ design presentations and proposals a month for clients and account managers</li>
            </ul>
          </div>
        </div>
      </div>

    </div>
  </section><!-- End Resume Section -->

the UI of the form

the question is how to set dynamic index for html form ? I mean after send and save the form, I want to get for example programming_portfolio_resume_part[0]['item'][1]['paragraph'][3]

and the first dimension index (in here the index of programming_portfolio_resume_part[]) be the same in each form loop.

but now the first index increased by each time I use programming_portfolio_resume_part in the name of form element.

result of form submit



source https://stackoverflow.com/questions/77553067/is-possible-to-have-multi-dimensional-array-with-dynamic-index-in-html-form

No comments:

Post a Comment