Doubt, how to solve this conflict?

Question

Doubt, how to solve this conflict?

Navigation

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

-1

I have the following scripts, one for validation and one for sending to php:

$(document).ready(function(){
    $("input,textarea").blur(function(){
     if($(this).val() == "")
         {
             $(this).css({"border" : "1px solid #F00", "padding": "2px"});
         }
    });
    $("#butEnviar").click(function(){
     var cont = 0;
     $("#form input,textarea").each(function(){
         if($(this).val() == "")
             {
                 $(this).css({"border" : "1px solid #F00", "padding": "2px"});
                 cont++;
             }
        });
     if(cont == 0)
         {
             $("#form").submit();
         }
    });
});

This is for validation

$(document).ready(function() {
$("#butEnviar").click(function() {
    var nome  = $("input[name=nome]").val();
    var email =  $("input[name=email]").val();
    var telefone =  $("input[name=telefone]").val();
    var assunto = $("input[name=assunto]").val();
    var msg =  $("textarea[name=msg]").val();
    $.ajax({
        "url": "enviar.php",
        "dataType": "html",
        "data": {
            "nome" : nome,
            "email":email ,
            "telefone": telefone,
            "assunto": assunto,
            "msg" : msg
        },
        "success": function(response) {
            $("div#saida").html(response);
            $("#reset").click();

        }

And this one for shipping. But I think this is conflicting and you are not sending the data to enviar.php , what should I do?

javascript

asked by anonymous 29.05.2016 / 03:40

2 answers

I can not connect to mysql on the web server Popular select with result plus a null element

score 0 · Answer 1

Tip: Use the required html property for the validations. It will greatly decrease this code, increasing readability.

<input type="text" required="required" name="name" />

It is possible to stylize the inputs, using pseudo classes:

input:required:invalid {}
input:required:valid {}

Source: See Here

score 0 · Answer 2

Your stream is wrong because you are submitting via HTML and not via JavaScript / Ajax. I imagine for your Ajax code that you want to send via JavaScript and do not submit form via HTML (which loads the page again).

To submit via Ajax you must capture the event submit of the form and stop it. Only with it canceled can you send the data to Ajax. For this it changes

in the evaluation code

$("#butEnviar").click(function(){

adds

$("#butEnviar").click(function(){
    e.preventDefault(); // para parar o submit

And in the code where you have Ajax changes

$("#butEnviar").click(function() {

for the event you are going to listen for to intercept the event you trigger with $("#form").submit(); . So it changes

$("#form").on('submit', function(e) {
    e.preventDefault();

You can also make some improvements to your code , with less jQuery and no repetitions like this:

Rating:

$(document).ready(function() {
    function uiWarning() {
        return this.classList.toggle('incomplete', this.value == '');
    }
    $("input,textarea").blur(uiWarning);
    $("#butEnviar").click(function(e) {
        e.preventDefault();
        var cont = 0;
        var falhados = $("#form input,textarea").filter(uiWarning);
        if (falhados.length == 0) $("#form").submit();
    });
});

in the submit part:

$(document).ready(function() {
    $("#form").on('submit', function(e) {
        e.preventDefault();
        var data = {};
        ['nome', 'email', 'telefone', 'assunto', 'msg'].forEach(function(name) {
            data[name] = document.querySelector('[name="' + name + '"]').value;
        });

        $.ajax({
            "url": "enviar.php",
            "dataType": "html",
            "data": data,
            "success": function(response) {
                $("div#saida").html(response);
                $("#reset").click();
            }
        });
    });
});