0

I'm learning javascript/jquery on the go, I'm trying to reload a form but keeping its js properties (required and masked inputs), code and pictures attached.

First image: Masked inputs works like a charm
Second image: The form its fully filled, still working
Third image: The form it reloaded, but no properties applied

The html form (minmized, just the first field)

<div class="card-body" id="clientsAddFormContainer">
        <form method="post" action="main/clients/addController.php">

          <div class="form-group row" id="clientRutDiv">
            <div class="col-lg-6">
              <div class="form-group" id="clientRutInnerDiv">
                <label class="col-form-label" for="clientRut">RUT <span class="required">*</span></label>
                <input type="text" name="clientRut" id="clientRut" class="form-control" placeholder="Ej. 11.111.111-1" required="" data-plugin-masked-input="" data-input-mask="99.999.999-*" autofocus>
              </div>
            </div>
          </div>
        </div>
      </form>
      <footer class="card-footer">
        <div class="switch switch-sm switch-primary">
          <input type="checkbox" name="wannaStay" id="wannaStay" data-plugin-ios-switch checked="checked" />
        </div> Mantenerme en esta página
        <button type="button" style="float: right;" class="btn btn-primary" onclick="realizaProceso();">Enviar</button>
      </footer>

The JS for realizaProceso()

  function realizaProceso(){
        var validator =0;
        validator += validateRequiredField('clientRut');
     if(validator == 0){
        var parametros = {
            "clientRut" : document.getElementById('clientRut').value,
            "tableName" : 'clients'
         };
     $.ajax({
        data:  parametros,
        url:   'route/to/addController.php',
        type:  'post',
        success:  function (respText) {
          if(respText == 1){
            if(document.getElementById('wannaStay').checked){
                $("#clientsAddFormContainer").load(location.href + " #clientsAddFormContainer");
            }else{
                window.location = "linkToOtherLocation";
            }
          }else{
            showNotyErrorMsg();
          }
        },
        error:  function () {
           showNotyErrorMsg();
        }
     });
     }else{
        showNotyValidationErrorMsg();
     }
  }

So my JS check all fields are validated, then prepare the array, and wait for the php binary response, 1 means the data has been inserted to db, if wannaStay is checked reload the div "clientsAddFormContainer" but as I said, it loose the properties.

Please sorry for my grammar or any other related english trouble, not a native english speaker.

Ps. I've removed some code so it could go different than the images.

Thanks in advance!

EDIT! The original code is

  <div class="card-body" id="clientsAddFormContainer">
        <form method="post" action="main/clients/addController.php">
        </form>
  </div>

one the js exec I got

  <div class="card-body" id="clientsAddFormContainer">
  <div class="card-body" id="clientsAddFormContainer">
        <form method="post" action="main/clients/addController.php">
        </form>
  </div>
  </div>

2nd EDIT I found the answer in other stackoverflow question

Luis Esteban
  • 1
  • 3
  • 1
    I'm not sure I understand the issue. It seems like you are saying something inside the `clientsAddFormContainer` is being lost. However, you are `load`ing a response into that element. `load` replaces all contents of the element with the response it gets back. So if you are expecting only part of that element to get replaced, then you are misunderstanding how load works. – Taplar Feb 05 '20 at 14:38
  • thanks for replying @Taplar, when I reload the div the required and masked property get lost, thats my trouble – Luis Esteban Feb 05 '20 at 16:06
  • 1
    So does the markup returned from your load call contain those properties? – Taplar Feb 05 '20 at 16:18
  • oh now I know whats going on, instead of reload the div it's adding another one with the same name. – Luis Esteban Feb 05 '20 at 17:57
  • @Taplar I edited my question with the problem (at the end), thanks for the time dude! – Luis Esteban Feb 05 '20 at 18:01
  • You did not answer Taplar's question though... – trincot Feb 05 '20 at 18:23
  • @Taplar yes it does... – Luis Esteban Feb 05 '20 at 20:31
  • thanks for the times guys, found the answer in other question, edited again to link the answer! – Luis Esteban Feb 05 '20 at 21:04
  • Does this answer your question? [reload div after ajax request](https://stackoverflow.com/questions/38237894/reload-div-after-ajax-request) – Skatox Feb 05 '20 at 22:46
  • 1
    @Skatox this method cause the hole trouble hahahaha, thanks dude! :) – Luis Esteban Feb 06 '20 at 16:49

0 Answers0