Для отображения результата на той же странице

Я использую php, mysql и ajax для отображения формы контакта, но проблема в том, что вывод «1 запись вставлен» отображается на следующей странице. Я хочу, чтобы его отображали на той же странице в submit.Для отображения результата на той же странице

Ниже приводится код

validation.html

<html> 
<head> 
    <title>Contact Form</title> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script type="text/javascript" language="javascript"> 

// <script type="text/javascript"> 

$(document).ready(function(){ 
    $("#myButton").click(function() { 
    alert("Hii"); 
     $.ajax({ 
     cache: false, 
     type: 'POST', 
     url: 'validation.php', 
     data: $("#contact").serialize(), 
     success: function(d) { 
      $("#record").html(d); 
     } 
     }); 
    }); 
}); 

</script> 
    </head> 
    <body> 
    <form method="post" id="contact" action="validation.php"> 
    Name: <input type="text" name="name"> <br> 
    E-mail: <input type="text" name="email"> <br> 
    Password: <input type="text" name="pass"> <br> 
    Mobile: <input type="number" name="mobile"> <br> 
    <br> 
    <input type="submit" value="SUBMIT" id="mybutton"/> 
    </form> 
    <div id="record">Record has been inserted</div> 
    </body> 
</html>

Может кто-нибудь, пожалуйста, указать, как я могу продолжать делать это или то, что все изменения необходимы?

источник

2014-01-27 Caffeine Coder

использовать AJAX пост еще раз, вместо того, чтобы представить –

Придется смотреть в него, первоначальный поиск смысл вашего ответа. Можете ли вы быть более описательным и опубликовать его как ответ? –

Почему бы вам не ввести '

Это потому что, когда вы нажимаете #myButton, вы отправляете форму и перенаправляет ее.

Просто предотвратите действие по умолчанию.

$("#myButton").click(function(event) { 
event.preventDefault(); 
alert("Hii"); //what is this for??? 
    $.ajax({ 
    cache: false, 
    type: 'POST', 
    url: 'validation.php', 
    data: $("#contact").serialize(), 
    success: function(d) { 
     $("#record").html(d); 
    } 
    }); 
});

источник

2014-01-27 07:45:26

Я сделал то же самое, но он по-прежнему перенаправляется на следующую страницу :( –

Похоже, что что-то еще происходит, если вы предотвращаете умолчание, форма не должна быть отправлена вообще –

Я вставил эхо в if else цикл, который показывает, что данные были вставлены в validation.php, нет ничего более. –

В настоящее время форма отправлена вашей кнопкой, потому что это Submit-Button. Если вы не хотите, представления формы есть несколько методов, но эти два являются лучшими:

// Use prevent default 
$("#myButton").click(function(e) { // This 'e' is important 
    e.preventDefault() 
    # rest of the function here 
});

или вы можете просто заменить кнопку вашего с помощью тегом ссылки (только с заполнителем HREF), как здесь:

<html> 
    <head> 
    <title>Contact Form</title> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script type="text/javascript" language="javascript"> 

    <script type="text/javascript"> 
     // Actual Javascript code here 
    </script> 
    </head> 
    <body> 
    <form method="post" id="contact" action="validation.php"> 
    Name: <input type="text" name="name"> <br> 
    E-mail: <input type="text" name="email"> <br> 
    Password: <input type="text" name="pass"> <br> 
    Mobile: <input type="number" name="mobile"> <br> 
    <br> 
    <a href="#" id="mybutton">SUBMIT</a> 
    </form> 
    <div id="record">Record has been inserted</div> 
    </body> 
</html>

Лучший случай будет сочетать оба.

источник

2014-01-27 07:53:42

Вам потребовалось 8 минут, чтобы опубликовать ответ, который я опубликовал? –

Прочтите внимательно, я предложил другую помощь! –

его открытая другая страница, потому что ваша форма будет отправлять результаты при нажатии #myButton.
есть способ решить эту проблему.

1. атрибута добавить в свой тег формы:

<form method="post" id="contact" action="validation.php" onsubmit="return false;">

или
2. сделать вашу кнопку, чтобы предотвратить представить procces вернув false:

$(document).ready(function(){ 
    $("#myButton").click(function() { 
     alert("Hii"); 
     $.ajax({ 
     cache: false, 
     type: 'POST', 
     url: 'validation.php', 
      data: $("#contact").serialize(), 
      success: function(d) { 
       $("#record").html(d); 
      } 
     }); 
     return false; 
    }); 
});

источник

2014-01-27 07:59:07

Пробовал это, но данные не вставляются в базу данных –

ваш 'return false' находится за пределами функции обратного вызова' click' – vher2

извините, моя ошибка, возврат должен быть включен в функцию щелчка –

U подают кнопку, Just изменение

<input type="button" id="myButton">Submit</input> 
OR 
<button id="myButton">Submit</button>

Он будет ссылаться на ваш запрос ajax ,

источник

2014-01-27 08:02:03

Как это было поддержано? Кнопка внутри формы по умолчанию будет по-прежнему выполнять действие отправки. –

тоже не имеет смысла и проверял его, чтобы быть уверенным, что он перенаправляется. –

Ребята, если он будет использовать submit, запрос будет отправлен в виде отправки формы, и это не вызовет вашу функцию события JQuery. См. Форму пользователя, не используется onsubmit = "return false;" поэтому он будет обращаться к серверу напрямую с помощью HTTP-запроса. –

попытаться вызвать функцию onclick событие входного элемента

<input type="submit" value="SUBMIT" id="mybutton" onclick="return myFunction()"/>

затем вызвать эту функцию

function myFunction() 
{ 
    $.ajax({ 
    cache: false, 
    type: 'POST', 
    url: 'validation.php', 
    data: $("#contact").serialize(), 
    success: function(d) { 
     $("#record").html(d); 
    } 
    }); 
    return false; 
}

также заменить это

<form method="post" id="contact" action="validation.php">

<form method="post" id="contact" action="validation.php" onsubmit="return false;">

Это должно помочь вам! Спасибо.

источник

2014-01-27 08:03:15

попробовать это

<input type="button" id="myButton">Submit</input>

ИЛИ Отправить

источник

2014-02-06 12:35:37 harish

Для отображения результата на той же странице

ответ

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