Cum trimit datele dintr-un form cu jQuery/Ajax?

Am un form vreau sa fac post cu ajax curl la un ‘server’ cu datele preluate de la acest form si sa verifice daca am introdus text in acel input…
exemplu code

script type="text/javascript">
            // check 0-9 digit
            function regIsDigit(fData)
            {
                var reg = new RegExp("^07[0-9]+$");
                var resp = (reg.test(fData));
                return resp;
            }
           
 function checkData() {
                var nrtel = $('#nrtelefon').val();
                var mesaj = $('#tmesaj').val();
	
                if(nrtel.length==0) {
                    // nr telefon invalid
                    $('#errorForm').html('<p>Nu ai scris numarul de telefon</p>');
                    return false;
                } else if( !regIsDigit(nrtel) || nrtel.length!=10 ) {
                    // nr telefon invalid
                    $('#errorForm').html('<p>Numarul de telefon e invalid</p>');		
                    return false;
                }
                if(mesaj.length==0) {
                    // scrie mesaj
                    $('#errorForm').html('<p>Nu ai scris mesajul</p>');		
                    return false;
                }
	
	
                return true;
			
            }
               
        </script>
      <form name="myform" id="myform" action="index.php?id=712e365631f00ae9c9c4cda50a0150d4" onsubmit="return checkData();" method="POST">
<div class="floatleft" id="continut">

        <div>
    <input type="text" value="07" class='telefon' name='nrtelefon' id='nrtelefon' minlength='10' minlength='10' size='10'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("input").keyup(function(e) {
  var oldvalue = $(this).val();
  var field = this;
  if (field.value.indexOf('07') === -1 &&
    field.value.indexOf('07') === -1) {
    $(field).val('07');
  }
});
    </script>
 </div>
        <br>
        <div id='telefon_mess'></div>
        <div><textarea name='mesaj' id='tmesaj' maxlength='200'></textarea><div id='counter'><div>200</div></div></div>
        <div id='message_mess'></div>
        <div id='submit_cont'>

      <noscript>

  		<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  		<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
	  </noscript>
	  <div id="tipinfo">
      <div id="errorForm"> </div><br></br>
                          	
                       
    <input class="button special" type='submit' name="TrimiteSMS" value='Trimite!'>

Am inteles ce vrei, nu am inteles ce nu merge.
Dai drumu la debugging, spune-ne ce nu merge.

Din ce am vazut, de asta ai nevoie: http://api.jquery.com/jquery.ajax/

1 Like

salut…am nevoie ca acel form sa imi trimita datele prin ajax la www.nume.ro/index.php?=tel…&mesaj=test

Păi și de ce n-ai început cu asta în titlu? :slight_smile:

Ce ai tu nevoie există în API-ul jQuery: .serializeArray() | jQuery API Documentation

2 Likes

Poftim, trebuie doar sa adaptezi la codul tau.

<form id="formular" action="action.php" method="POST">
  <input type="text" name="telefon">
  <textarea name="mesaj"></textarea>
  <button type="submit">Submit</button>
</form>

<script>
  $('#formular').on('submit', function(e) {
    e.preventDefault();
    let form = $(this);

    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize(),
      success: function(result){
        alert(result);
      }
    });
  });
</script>
4 Likes
<script>
function sendContact() {
	var valid;	
	valid = validateContact();
	if(valid) {
		jQuery.ajax({
		url: "send.php",
		data:'telefon='+$("#telefon").val()+'&mesaj='+$("#mesaj").val(),
		type: "POST",
		success:function(data){
		$("#status").html(data);
		},
		error:function (){}
		});
	}
}
</script>




<form id="form" method="post" action="#">
    <input type="telefon" id="input">
	  <input type="mesaj" id="input">
    <input type="button" id="button"onClick="sendContact();" value="Submit">
</form>
    <div id="status"></div>

tot nu functioneaza baieti …

1 Like

ValidateContact() nu exista mai sus.
Apoi introduce link catre jquery.
In final, merge dar mai trebuie facut putin debug.

PS: vezi ca input-urile tale nu au id-urile setate corect.

Având mai multe informații de trimis nu ar fi mai bine ca data să fie un obiect dicționar?

{"telefon": $("#telefon").val(),  "mesaj": $("#mesaj").val() }

Astfel, cel puțin în Python/Django, poți accesa mai ușor datele. Nu știu php cum lucrează.

De ce nu folosesti codul meu ? Merge perfect.
Al tau este plin de greseli, normal ca nu merge.

Al tau functioneaza…dar vreau sa imi afiseze intrun div ca mesajul sa trimis sau nu sub form si nu reusesc

Poftim:

<form id="formular" action="action.php" method="POST">
  <input type="text" name="telefon">
  <textarea name="mesaj"></textarea>
  <button type="submit">Submit</button>
</form>
<div id="status-formular"></div>

<script>
  $('#formular').on('submit', function(e) {
    e.preventDefault();
    let form = $(this);

    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize(),
      success: function(result){
        $('#status-formular').html(result);
      }
    });
  });
</script>

nu afiseaza nimic.

Ca sa si afiseze ceva, in codul tau PHP, in cazul in care mesajul este trimis:

echo "Mesaj trimis cu succes !";

Practic tu in result, primesti raspuns de la fisierul PHP, si eu as face asa in locul tau:

$response = array();

if($mesajTrimis) {
	$response = array(
		'status' => 'success',
		'message' => 'Mesaj trimis cu succes !'
	);
} else {
	$response = array(
		'status' => 'error',
		'message' => 'Mesajul nu a putut fi trimis !'
	);
}

echo json_encode($response);

Iar la afisarea mesajului in JS:

success: function(result){
  result = JSON.parse(result);
  $('#status-formular').addClass(result.status).html(result.message);
}

In felul asta tratezi si success si error, iar div-ul va avea si clasa specifica, ca sa o poti colora. :slight_smile:

5 Likes