Check fields and stop sending form

Question

Check fields and stop sending form

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a form that checks the value of two textboxes, if they are different it shows the message that one of the fields should be fixed, but even so it sends me the information fulfilling another class, here my code:

This is the one that compares the two textbox:

<script type="text/javascript">
function comprobarClave(){ 
   bl = document.getElementById('bl').value;
   bl2 = document.getElementById('bl2').value;
  if (bl != bl2){
     alert("Compruebe la informcación de carga.") 
     return false;
  }else{
      
      return true;
   }
}
</script>

And this is the one that sends the info; What I want is that you do not send the data if the two textbox have different info.

$(document).ready(function(){
    $('.guardar').submit(function(){
	var x = confirm("¿Estás seguro que quieres guardar?");
      if (x){
        $.ajax({
          type: "POST",
          url: "caso2.php",
          data:$(this).serialize(),
          cache: false,
          success: function(data) {
                //$('#result').show(3000);
				
				$('#result2').html(data).
            fadeIn().delay(3000).fadeOut();

            }
        });//end ajax
		return false;
      }
      
    });
});

<form class="guardar"  id="cass" name="cass"  method="post"  onSubmit = "return comprobarClave(); " autocomplete="off" name="caso"><table width="1151" height="155" border="0" cellspacing="0">
      <tr>
      
        <td><div id="result2"></div>
        BL/BOOKING:</td>
        <td>&nbsp;</td>
        <td><label for="bl"></label>
          <input type="text" name="bl" id="bl" required="required" /></td>
        <td>&nbsp;</td>
        <td>BL/BOOKING:</td>
        <td>&nbsp;</td>
        <td><label for="bl2">
          <input type="text" name="bl2" id="bl2" required="required" />
        </label></td>
        <td>&nbsp;</td>
        <td>Fecha:</td>
        <td>&nbsp;</td>
        <td><label for="fech">
         <?php date_default_timezone_set("America/Bogota"); ?>
          <input type="text" name="fech" id="fech" value="  <?php echo $hoy = date("d/m/y");  ?>" required="required" readonly="readonly" />
        </label></td>
      </tr>
      <tr>
        <td>Nombre del cliente:</td>
        <td>&nbsp;</td>
        <td><select name="nom_cli" id="nom_cli">    
<?php
$con = mysql_connect('localhost','root', 'master3.1416');
            mysql_select_db('roda', $con);
        
            $sql = mysql_query("SELECT * FROM cliente ORDER BY nom_cli " ,$con);
              
            $contar = @mysql_num_rows($sql);
              
            if($contar == 0){
           
            }else{
              while($row=mysql_fetch_array($sql)){
                $id_cli = $row['id_cli'];
			
?>
    <option value='<?php echo $nombre = $row["nom_cli"]; ?>' required> <?php echo $nombre = $row["nom_cli"]; ?>  </option>
   <?php  
	   }
			}
	 ?> 
</select></td>
        <td>&nbsp;</td>
        <td>Codigo del cliente:</td>
        <td>&nbsp;</td>
        <td><select name="cod_cli" id="cod_cli" required>    
    <option value='<?php echo $cod_cli = $row["cod_cli"]; ?>' name='cod_cli' id='cod_cli' required>   </option>
</select></td>
        <td>&nbsp;</td>
        <td>Origen:</td>
        <td>&nbsp;</td>
        <td><label for="Origen">
          <input type="text" name="origen" id="origen" required="required" />
        </label></td>
      </tr>
      <tr>
        <td>Cantidad de items/cont:</td>
        <td>&nbsp;</td>
        <td><label for="cant"></label>
          <input type="number" name="cant" id="cant" min="1"/>      <label for="nom_cli"></label></td>
        <td>&nbsp;</td>
        <td>Almacenamiento:</td>
        <td>&nbsp;</td>
        <td><label for="alm"></label>
          <input type="date" name="alm" id="alm" /></td>
        <td>&nbsp;</td>
        <td>Retención:</td>
        <td>&nbsp;</td>
        <td><label for="ret"></label>
          <input type="date" name="ret" id="ret" /></td>
        </tr>
      
      </table>
      <p>&nbsp;</p>
      <p>
        <input type="submit" class="button" name="send"  value="Guardar"    />
        <button type="reset" class="button" value="Limpiar">Reset</button>
      </p>
  </form>

And this is my form.

javascript jquery html php ajax

asked by Leonardo 18.10.2017 в 04:45

source

2 answers

Doubt about decoupling algorithm with templates Get values from a table and convert it into an array

score 1 · Answer 1

To execute the submit event twice? Should you only do it once, also if you are using jQuery to use native JavaScript?

Change your form line by this:

<form class="guardar" id="cass" method="post" autocomplete="off">

And your js:

$('.guardar').submit(function(e){
    e.preventDefault();

    var bl = $("#bl").val();
    var bl2 = $("#bl2").val();

    if (bl != bl2){
        alert("Compruebe la informcación de carga.") 
    }else{
        var x = confirm("¿Estás seguro que quieres guardar?");
        if (x){
            $.ajax({
                type: "POST",
                url: "caso2.php",
                data:$(this).serialize(),
                cache: false,
                success: function(data) {
                    //$('#result').show(3000);
                    $('#result2').html(data).
                    fadeIn().delay(3000).fadeOut();
                }
            });//end ajax
        } 
    }    
});

I hope it serves you.

score 1 · Answer 2

It sends you the information why you are using the submit event in this line of code:

< input type="submit" class="button" name="send" value="Save" / >

Change the type="submit" to type="button" on your form. Also add the value "save" to the class attribute so that it looks like this: class="button save"