Ajax отправить форму

У меня есть «Создать комнату» форму:Ajax отправить форму

<div class="contentHolder"> 
     <div class="row no-margin"> 
      <div class="col-sm-offset-3 col-sm-6 col-xs-12"> 
       <g:form action="save" controller="roomLocation"> 
        <g:render template="form" model="[roomLocation:roomLocation]"/> 
        <div class="row form-row"> 
         <div class="col-md-offset-8 col-md-4 col-xs-12"> 
          <div class="form-buttons"> 
           <g:submitButton name="create" style="width:100%" class="btn btn-purple" value="Create" /> 
          </div> 
         </div> 
        </div> 
       </g:form> 
      </div> 
     </div> 
    </div>

, который визуализирует форму входа:

<div class="row form-row required"> 
    <label class="labelStyle col-md-4 text-align-xs">Location</label> 
    <div class="col-md-8"> 
     <input id="inputName" placeholder="Location" class="form-control" name="name" value="${roomLocation?.name}" required> 
    </div> 
</div>

Как вы можете видеть на первой форме, subbmision производится через кнопку создания, но вся страница обновляется, и я хочу использовать ajax так, чтобы это было сделано без обновления всей страницы. Я новичок в этом, и я был бы признателен за любую помощь в этом отношении.

источник

2015-12-06 user2923389

код JQuery для без обновления страницы и отправки формы является

$(document).ready(function() { 
$("#submit").click(function() { 
var name = $("#name").val(); 
var email = $("#email").val(); 
var contact = $("#contact").val(); 
var gender = $("input[type=radio]:checked").val(); 
var msg = $("#msg").val(); 
if (name == '' || email == '' || contact == '' || gender == '' || msg == '') { 
alert("Insertion Failed Some Fields are Blank....!!"); 
} else { 
// Returns successful data submission message when the entered information is stored in database. 
$.post("refreshform.php", { 
name1: name, 
email1: email, 
contact1: contact, 
gender1: gender, 
msg1: msg 
}, function(data) { 
alert(data); 
$('#form')[0].reset(); // To reset form fields 
}); 
} 
}); 
});

предположить, что это ваш HTML страницы ..

<html> 
<head> 
<title>Submit Form Without Refreshing Page</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<link href="css/refreshform.css" rel="stylesheet"> 
<script src="js/refreshform.js"></script> 
</head> 
<body> 
<div id="mainform"> 
<h2>Submit Form Without Refreshing Page</h2> 
<!-- Required Div Starts Here --> 
<form id="form" name="form"> 
<h3>Fill Your Information!</h3> 
<label>Name:</label> 
<input id="name" placeholder="Your Name" type="text"> 
<label>Email:</label> 
<input id="email" placeholder="Your Email" type="text"> 
<label>Contact No.</label> 
<input id="contact" placeholder="Your Mobile No." type="text"> 
<label>Gender:</label> 
<input name="gender" type="radio" value="male">Male 
<input name="gender" type="radio" value="female">Female 
<label>Message:</label> 
<textarea id="msg" placeholder="Your message.."> 
</textarea> 
<input id="submit" type="button" value="Submit"> 
</form> 
</div> 
</body> 
</html>

если вы используете PHP для серверной части затем

<?php 
// Establishing connection with server by passing "server_name", "user_id", "password". 
$connection = mysql_connect("localhost", "root", ""); 
// Selecting Database by passing "database_name" and above connection variable. 
$db = mysql_select_db("mydba", $connection); 
$name2=$_POST['name1']; // Fetching Values from URL 
$email2=$_POST['email1']; 
$contact2=$_POST['contact1']; 
$gender2=$_POST['gender1']; 
$msg2=$_POST['msg1']; 
$query = mysql_query("insert into form_element(name, email, contact, gender, message) values ('$name2','$email2','$contact2','$gender2','$msg2')"); //Insert query 
if($query){ 
echo "Data Submitted succesfully"; 
} 
mysql_close($connection); // Connection Closed. 
?>

демо здесь ... http://www.aorank.com/tutorial/submitformwithoutrefreshing_demo/refreshform.html

см эту страницу: (открыть ссылку в новой вкладке) jquery formsubmission example

источник

2015-12-06 16:01:27 Rajesh

хорошо ... Tanx за помощью ... но я не использую PHP в чем – user2923389

У меня есть действие «сохранить» в заводной языке и я сохранить данные в базе данных с помощью этого – user2923389

код бэкэнд будет изменяться, но внешний интерфейс не будет изменен. Например, вы используете сервлет-технологию, затем с out.println(); вы можете генерировать ответ динамически , или если вы используете, то вы можете итерации с помощью c-тегов как welll ... , и вы должны настроить форму с помощью action = "/ save" или любого – Rajesh

Ajax отправить форму

ответ

Смежные вопросы