Doua actiuni cu un singur buton intrun formular

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
Avatar utilizator
ionatan
Mesaje:94

Doua actiuni cu un singur buton intrun formular

Salut,
Am un formular cu ajax

Cod: Selectaţi tot

<form   method='POST'  name="ajaxform" id="ajaxform" action="rezultat.php">
	    <table>
	        <tbody>
                <tr>  
				    <td> Suprafata (mp): </td>
		            <td><input type='text' class='suprafata' name='suprafata' value=''> </td>
	            </tr>	
				
				<tr> 
				    <td>   Grosime (5 - 30 cm): &nbsp;&nbsp;&nbsp; </td>
				    <td>  <input type='text' class='grosime' name='grosime' value=''>   </td>
				</tr> 
         
		        <tr> 
				    <td>    Densitate (30 - 60 kg/mc):  </td>
				    <td>  <input type='text' class='densitate' name='densitate' value=''>   </td>
				</tr> 
				
				<tr> 
				    <td>    Distanta (Km):  </td>
				    <td>  <input type='text' class='distanta' name='distanta' value=''>   </td>
				</tr> 
				
				<tr> 
				    <td>   Folie interior:  </td>
				    <td>  <select  class='folie-int' name='folie-int' >  
					    <option value="">selecteaza</option>
                       <option value="1">Da</option>
                       <option value="0">Nu</option>					
					</select>
					
					</td>
				</tr>
				
				<tr> 
				    <td>   Folie exterior:  </td>
				    <td>  <select  class='folie-ext' name='folie-ext' >  
					    <option value="">selecteaza</option>
                       <option value="1">Da</option>
                       <option value="0">Nu</option>					
					</select>
					
					</td>
				</tr> 
				<tr> 
				    <td>   EURO:  </td>
				    <td>  <input type='text' class='euro' name='euro' value='<?php echo $euro ?>'>   </td>
				</tr> 
					
		
		
		        <tr> 
				    <td> 
	               <br>    <input type='button' value='CALCULEAZA' class='boton' name='boton' id='simple-post' >  </td>
	               
		    
				</tr>
		
      
		
		</tbody>
	</table>	  <br>
           <div id="simple-msg"> aici imi afiseaza rezultatul  </div> 
    </form>
in <div id="simple-msg"> </div> imi afiseaza rezultatul
iar in .JS am

Cod: Selectaţi tot

 $("#ajaxform").submit(function(e)
	{
		$("#simple-msg").html("<img src='ajax-loader.gif'/>");
		var postData = $(this).serializeArray();
		var formURL = $(this).attr("action");
		$.ajax(
		{
			url : formURL,
			type: "POST",
			data : postData,
			success:function(data, textStatus, jqXHR) 
			{
				$("#simple-msg").html(''+data+'');

			},
			error: function(jqXHR, textStatus, errorThrown) 
			{
				$("#simple-msg").html('AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'');
			}
		});
	    e.preventDefault();	//STOP default action
	    e.unbind();
	});
		
	$("#ajaxform").submit(); //SUBMIT FORM
Cum pot ca atunci cand dau click pe butonul CALCULEAZA imi va afisa calculul, dar sa ma mai trimita si pe o alta pagina sa imi faca alte calcule,etc dar tot prin ajax, deci sa nu se deschida in browser nimic
Multumesc
Cumpără adevărul, şi nu-l vinde, înţelepciunea, învăţătura şi priceperea.
https://www.crestinmultimedia.com/

MarPlo Mesaje:4343
Salut
Poti sa apelezi doua funnctii cand se da clic pe acel buton, iar in fiecare functie scrii ce cod sa fie executat.
Un exemplu concret, la apasare pe butonul Test se apeleaza doua functii, una adauga ceva in caseta de text, iar cealalta afiseaza o fereastra alert.

Cod: Selectaţi tot

<form action="#" method="post">
Some text: <input type="text" name="inp1" id="inp1" /><br>
<input type="button" value="Test" id="btn1" />
</form>
<script>
// add text in #inp1
function f1(){
  document.getElementById('inp1').value ='Text from f1()';
}

// show alert
function f2(){
  alert('From f2()');
}

//if #btn1 exiss, register click event and access 2 functions
var btn1 = document.getElementById('btn1');
if(btn1){
  btn1.addEventListener('click', function(e){
    f1();  f2();
  });
}
</script>
Demo:
Some text:

Subiecte similare