am try to send form ajax like this code
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#non").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
url = $form.attr( 'action' );
/* Send the data using post */
var posting = $.post( url, { title: $('#mak').val(),meaning: $('#za').val()} );
/* Alerts the results */
posting.done(function( data ) {
alert('success');
});
});
</script>
it not alert success,and i check action after click button is ok
If jquery.min.js added. Then please ignore it. Else add it. To get action of <form> Use var action_url = form.attr('action');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#non').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var formData = form.serialize();
var action_url = form.attr('action');
$.ajax({
url: action_url,
type: "POST",
data: formData,
success: function (data) {
alert(data);
},
error: function () {
alert("Oops..!! Problem Ocurred. Please Try Again..!!");
}
});
});
</script>
User's Requirement
<script>
$('#non').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var val1 = $('#text1').val();
var val2 = $('#text2').val();
var action_url = form.attr('action');
$.ajax({
url: action_url,
type: "POST",
data: { text1: val1, text2: val2 },
success: function (data) {
alert(data);
},
error: function () {
alert("Oops..!! Problem Ocurred. Please Try Again..!!");
}
});
});
Or, check Send FormData and String Data Together Through JQuery AJAX?
Additional
<script>
$('#non').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var formData = form.serialize();
var title_f = $('#mak').val();
var meaning_f = $('#za').val();
formData.append(title,title_f);
formData.append(meaning,meaning_f);
var action_url = form.attr('action');
$.ajax({
url: action_url,
type: "POST",
data: formData,
success: function (data) {
alert(data);
},
error: function () {
alert("Oops..!! Problem Ocurred. Please Try Again..!!");
}
});
});
Why not attach your Handler directly to the Submit-Button & do something like this:
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#submitBtn").on("click", function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
// HERE IS THE PROBLEM... THE $(this) VARIABLE POINTS TO THE BUTTON, NOT FORM.
var $form = $( this ).parentsUntil("form").parent("form"),
url = $form.attr( 'action' );
/* Send the data using post */
var posting = $.post( url, { title: $('#mak').val(),meaning: $('#za').val()} );
/* Alerts the results */
posting.done(function( data ) {
alert('success');
});
});
Related
I am trying to fetch the records from the database using blur function. There are two input fields where this function triggers. I have used different names, variables, javascript, controller using laravel to fetch the records. I am able to fetch the records through ajax and successfully opens the modal. When the modal pop ups when the blur function triggers, it also triggers the function for the second field.
I just want to trigger the modal according to the field, where the blur triggers and not to trigger twice.
//input field: originS
<script type="text/javascript">
$(document).ready(function(){
var origin = "";
var _token = "";
var ovalue = "";
$('#originS').blur(function(){
ovalue = "";
origin = $(this).val();
_token = $('input[name="_token"]').val();
$.ajax({
type: 'POST',
url: '{{ route('pagescontroller.fetchOrigin') }}',
data:{origin:origin, _token:_token},
success: function(response){
if(response){
$("#originSelect").modal('show');
console.log(response);
$(".result").html(response);
$(document).on('change', '#selectSuburb', function () {
ovalue = $(this).val();
if ($(this).is(':checked')) {
$('#originS').val(ovalue);
$("#originSelect").modal('hide');
$this.die('blur');
}
});
$('#originSelect').on('hidden.bs.modal', function (e) {
if (ovalue == "") {
$("#originS").val('');
$(".result").html(response);
}
});
}
},
});
});
});
</script>
//input field: destS
</script>
<script type="text/javascript">
$(document).ready(function(){
var dest = "";
var _token = "";
var dvalue = "";
$('#destS').blur(function(){
dvalue = "";
dest = $(this).val();
_token = $('input[name="_token"]').val();
$.ajax({
type: 'POST',
url: '{{ route('pagescontroller.fetchdest') }}',
data:{dest:dest, _token:_token},
success: function(response){
if(response){
$("#destSelect").modal('show');
console.log(response);
$(".dresult").html(response);
$(document).on('change', '#selectSuburbdest', function () {
dvalue = $(this).val();
if ($(this).is(':checked')) {
$('#destS').val(dvalue);
$("#destSelect").modal('hide');
$this.die('blur');
}
});
$('#destSelect').on('hidden.bs.modal', function (e) {
if (dvalue == "") {
$("#destS").val('');
$(".dresult").html(response);
}
});
}
},
});
});
});
</script>
I have an ajax function something like this:
function foo(e, e1, curc)
{
var sender = (e && e.target) || (window.event && window.event.srcElement);
$.ajax({
type: 'POST',
url: 'script.php',
dataType: 'json',
data: "id="+e+"&mod="+e1+"&curc="+curc,
beforeSend: function() {
$('#mform').show();
},
complete: function() {
$('#fountainG').hide();
},
success: function(data) {
document.getElementById("itog").innerHTML = data.d+data.a;
},
error: function(xhr) {
document.getElementById("itog").innerHTML = '123';
}
});
}
I need to show some modal form to user, and get the data from it in ajax script. I tried to add show function to ajax beforeSend - but I do not understand how to wait for user form submit, and get data from modal form. Ajax function call in html: href="javascript:void(0)" onclick="javascript:foo(3800064420557,1,138)
You just need to re-arrange your logic. Instead of trying to show the modal "within" the ajax request, hold off on sending the ajax request until you have gotten the necessary data from the modal. Here is a rough outline, presuming that your modal element $('#mform') has a form in it with an id of myform which is the form you want to get data out of.
function foo(e, e1, curc)
{
var sender = (e && e.target) || (window.event && window.event.srcElement);
var modal = $('#mform');
var form = $('#myform', modal);
form.on( 'submit', function(){
$('mform').hide();
// make your ajax call here the same way, and inside the
// onsuccess for this ajax call you will then have access to both
// the results of your ajax call and the results of the form
// data from your modal.
$.ajax({ ... });
});
}
To get form data, you can try with below code
function foo(e, e1, curc)
{
var sender = (e && e.target) || (window.event && window.event.srcElement);
form_values = {}
$('mform').show();
$('#myForm').submit(function() {
var $inputs = $('#myForm :input');
$inputs.each(function() {
form_values[this.name] = $(this).val();
});
console.log("form data:", form_values)
// with form_values continue with your coding
$.ajax({
type: 'POST',
url: 'script.php',
dataType: 'json',
data: "id="+e+"&mod="+e1+"&curc="+curc,
success: function(data) {
$('mform').show();
document.getElementById("itog").innerHTML = data.d+data.a;
},
error: function(xhr) {
document.getElementById("itog").innerHTML = '123';
}
});
});
}
Hope it will help you :)
i made a function that sends data (ajax) to the database and depending on the response from the server i need to alert a message but it seems like whenvever i change the select option i get the alert message for each change(if i change the select four times when i click i get the alert four times ) , but if i remove my ajax function and replace it simply by an alert i get it once not repeating itself here is my JS
$('.select_ids').change(function () {
var id = $(this).val();
var form = $('#form_widget_ids_' + id);
var container = form.parent('.ewb_forms');
var box = container.parent('.edit_widget_box');
container.children('.selected').fadeOut(300, function () {
$(this).removeClass('selected');
form.fadeIn(300, function () {
$(this).addClass('selected');
});
});
Widget.updateSSOUrl(box);
$.ajax({
type: "POST",
url: window.location + "",
data: {'id': id}
}).done(function (msg) {
$(".red").on('click', function (evt) {
if ('done' == msg) {
evt.preventDefault();
alert('NOP');
}
})
});
});
the event that you are binding i think is wrong. For newly append items is better in your case to use
$(document).on('click', ".red", function (evt) {
})
And it must be moved outside the ajax success because now you are triggering it every time
----- Edited ---
If you want just to alert the output of the ajax you dont need the onClick event
$('.select_ids').change(function () {
var id = $(this).val();
var form = $('#form_widget_ids_' + id);
var container = form.parent('.ewb_forms');
var box = container.parent('.edit_widget_box');
container.children('.selected').fadeOut(300, function () {
$(this).removeClass('selected');
form.fadeIn(300, function () {
$(this).addClass('selected');
});
});
Widget.updateSSOUrl(box);
$.ajax({
type: "POST",
url: window.location + "",
data: {'id': id}
}).done(function (msg) {
if (msg === 'done') {
evt.preventDefault();
alert('NOP');
}
});
});
If you want to show the latest result on a button click you can store the msg on a global variable and on click of a div show that like
var globalMsg = "";
$('.select_ids').change(function () {
var id = $(this).val();
var form = $('#form_widget_ids_' + id);
var container = form.parent('.ewb_forms');
var box = container.parent('.edit_widget_box');
container.children('.selected').fadeOut(300, function () {
$(this).removeClass('selected');
form.fadeIn(300, function () {
$(this).addClass('selected');
});
});
Widget.updateSSOUrl(box);
$.ajax({
type: "POST",
url: window.location + "",
data: {'id': id}
}).done(function (msg) {
globalMsg = msg
});
});
$(".div").click(function() { alert(globalMSG); });
I'm trying to auto submit a form when the username column is not null. i've got my script down there but since i'm new to jquery, i've got it missed up and its not working
$(function() {
var $username = $('#username'),
if ($username != null){
$("#form1").submit,function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "http://mysample.com/ans.php",
data: data,
success: function(data) {
$('#log_msg').html(data);
var result = $.trim(data);
if(result==="ok"){
window.location = 'page.html';
}
});
});
});
Try to use on change listener, like
$(document).on('change', '#input_id', function(e) {
$('form_selector').submit();
});
$(document).on('submit', 'form_selector', function(e) {
//Your ajax submit logic
});
If you want to do an AJAX submission, just call $.ajax in the if:
$(function() {
var $username = $("#username").val();
if ($username != '') {
$.ajax({
type: "POST",
url: "/ans.php",
data: $("#form1").serialize(),
success: function(data) {
$('#log_msg').html(data);
var result = $.trim(data);
if(result==="ok"){
window.location = 'page.html';
}
});
}
});
You don't need to define a $("#form1").submit() handler for this.
I am trying to do a ajax autocomplete search and display the results. I develop small search box with autocomplete but i am struggling with showing search results , can anyone guide me ?
search.php
=========
<script>
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $last_name = $clicked.find('.last_name').html();
var decoded = $("<div/>").html($last_name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
</script>
here the index file which i have done so far ...........
index.php
=========
if($_POST)
{
$q=$_POST['search'];
$sql_res=mysql_query("select personal_names_id,last_name,initials from personal_names where last_name like '%$q%' order by personal_names_id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$last_name=$row['last_name'];
what i want to do i display the results which related to auto-complete text data ?