Jquery Submit Form and Then Show Results in an Existing Div

jquery submit form and then show results in an existing div

This code should do it. You don't need the Form plugin for something as simple as this:

$('#create').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#created').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});

submit form and then show results in an existing div

Your trigger is the problem; rather than triggering the submit event, the following line is simply submitting the form by default action. To actually trigger the submit event your would need a submit button or use jQuery to trigger the event using any of these forms: $('#em2').submit(), $('#em2').trigger('submit'):

<a href="javascript:void(0)" onclick="javascript:document.forms['em2'].submit();return false;">Ver</a>

Either change it to the following as in this working example:

<a href="javascript:void(0)" onclick="javascript:$('#em2').submit();return false;">Ver</a>

Or try to avoid inline js and do the following (recommended):

<a id='theTrigger' href='#'>Ver</a>

$(function() {
    $('#theTrigger').on( 'click',  function() {
        $('#em2').submit();
    });
});

Which effectively changes your code to:

$(document).ready(function() {
    $('#theTrigger').on( 'click',  function() {
        $('#em2').submit();
    });    
    $("#em2").submit(function() { 
        $.ajax({ 
            data: $(this).serialize(), 
            type: $(this).attr('method'), 
            url: $(this).attr('action'), 
            success: function(response) { 
                $('#resultados').html(response); 
            }
        });
        $('html, body').animate({
            scrollTop: $('#resultados').offset().top -292 
        }, 'slow');
        return false; 
    });
});

Form submit in DIV using jQuery

I finally found out the reason: some browsers (namely the ones having issues) behave differently when the JS described in the question is loaded due to the fact the form does not exist yet because the content of the tab is loaded later on via Ajax.

Hence the solution is to create a JS function instead of the code above and adapt the button (submit becomes button, introducing onClick):

<input type="button" value=" Apply " onClick="callMyFunction()" />

This is handled correctly by Safari and Chrome then too.

Many thanks to all participants!

Filling div with partial view from ajax submit result

You can use the MVC approach with the AJAX form helper

@using (Ajax.BeginForm("_SaveConsession", "MD", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "div-for-partial", OnSuccess = "postSuccess", OnFailure = "postFailed" }))
{
  // your form fields here
}

<script>
  function postSuccess() {
    // anything else that needs handled after successful post
  }

  function postFailed() {
    alert("Failed to submit");
  }
</script>

The ajaxOptions "InsertionMode" and "UpdateTargetId" work together to tell your view that the data being returned needs to be inserted into the specified target id.

display form results inside different div

It looks like you will want to use some JQuery like below (which will of course require that you actually include the JQuery library):

function fetchData(){
  var url = 'searchdivebay.php';
  // The jQuery way to do an ajax request
  $.ajax({            
    type: "GET",
    url: url,
    data: "", // Your parameters here. looks like you have none
    success: function(html){
      // html contains the literal response from the server
      $("#showsearch").html(html);
    }
  });
}

Hope this helps!

Ajax display results in already created div

Call the search.php from main page using Jquery ajax. make sure u reference the jQuery library.

//Main Page
<form id="search" method="post" action="" >
      <input type="text" name="search" id="search"> 
      <input type="submit" name="search1" id="search1" class="btnButton" value="Search"/>
</form> 

<div id="content"></div>

<script>
$(document).ready(function(){

    //jquery click event
    $("#search").live("click", function(e){

       //disable default form submit postpage
       e.preventDefault();

       //make ajax call to the search.php parsing the search textbox value as query string
       $.get("search.php?s="+$("#search").val(), function(result){

            //Result will be dumped in the div
            $("#content").html(result);

       });

   });

});

</script>

//Search PHP Script search.php
<?php

//Get the search String
$string = $_GET["s"];

//DO search query and echo it on this page.
?>

Submit Form with ajax result

Edit

You can not access the contents of an iframe from outside of one if its an iframe with a different origin.

If its the same origin

 let form = document.createElement('form');
 let input = document.createElement('input');
 input.type = 'hidden';
 input.value = encodeURIComponent(document.querySelector('iframe').contentDocument.innerHTML);
 input.name = 'iframe_data';
 form.action = 'myDestination.html'
 form.appendChild(input);
 document.body.appendChild(form);
form.submit();

---

Related Topics