We Keep Coding

AJAX Button disappering

I have a web app in laravel and I have a simple textarea with a form that allows users to enter some basic markdown text and I need it to output the data in both HTML tags and then normal formatting, my main problem, is my button disappears after submitting the first time and I can only seem to have it print out the HTML formatting or the text values but not both at the same time. I'm a little new to AJAX so any help would be awesome. Here is my AJAX code and part of my form.
<form action="{{action('MarkDownController#process')}}" method="post" name="markdownform" id="markdownform">
<input name="_token" type="hidden" value="{{ csrf_token() }}"/>
<input type="button" id="ctaPrimary" value="Parse"/>
</form>
<script>
$(function () {
$('#ctaPrimary').click(function(e) {
e.preventDefault();
$.ajaxSetup({headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}});
$.ajax({
type: 'post',
url: 'process',
crossDomain:'true',
data: $('#markdownform').serialize(),
success: function (data) {
$("#markdownform").html(data);
}
});
});
});
</script>
So I was able to fix my problem overall, by changing
data: $('#markdownform').serialize(),
success: function (data) {
$("#markdownform-html").html(data);
$("#markdownform-text").text(data);
}
And just adding:
<div id="markdownform-html"></div>
<div id="markdownform-text"></div>
I guess my final question is, with $("#markdownform-text").text(data); I would like the data to show on a new line if there is a space between the elements not how it is showing below, in just one long block:
<h1>Header one</h1> <p>Hello</p> <p>more text <br />What's going on?</p> <h2>Another Header</h2> <p>something hear, eh?</p>

You are replacing the content that is in the <form> tags, you need to put it into a separate <div> to ensure it does no change the HTML within it.
<form action="{{action('MarkDownController#process')}}" method="post" name="markdownform" id="markdownform">
<input name="_token" type="hidden" value="{{ csrf_token() }}"/>
<input type="button" id="ctaPrimary" value="Parse"/>
</form>
<div id="markDownContent"></div>
<script>
$(function () {
$('#ctaPrimary').click(function(e) {
e.preventDefault();
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
});
$.ajax({
type: 'post',
url: 'process',
crossDomain:'true',
data: $('#markdownform').serialize(),
success: function (data) {
$("#markDownContent").html(data);
}
});
});
});
</script>

'undefined' data submited when using ajax

I'm using HTML form to send data to google sheet, it work great. But when i add ajax code, the data send to google sheet always is "undefined", remove the code it'll work but it show the code really ugly after that, so i want using ajax.
$(document).ready(function() {
var submit = $("button[type='submit']");
submit.click(function() {
var data = $('form#test-form').serialize();
$.ajax({
type: 'GET',
url: 'https://script.google.com/macros/s/AKfycby8PCL7hef6N35QAEe7CcGWEVLeONJfy8ATXIsM5Sn7icTDMw8/exec',
dataType: 'json',
crossDomain: true,
data: data,
success: function(data) {
if (data == 'false') {
alert('Oopps! Đã có lỗi. Quý khách hãy thử lại hoặc liên hệ trực tiếp qua hotline nhé.');
} else {
alert('Đã tiếp nhận thành công! Cát Tiên sẽ liên hệ lại trong thời gian sớm nhất. Cám ơn quý khách');
}
}
});
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://script.google.com/macros/s/AKfycby8PCL7hef6N35QAEe7CcGWEVLeONJfy8ATXIsM5Sn7icTDMw8/exec" method="GET">
<input type="text" name="SDT" id="ip2" placeholder=" SĐT hoặc Email">
<button type="submit" id="submit-form" class="button">Nhận</button>
</form>
<script type="text/javascript">
</script>
I don't know about code, all i using tutorial in web. Many thanks for your help.

You forgot to add an ID to your form.
Your script is trying to serialize the form with the id test-form with this function:
var data = $('form#test-form').serialize();
The form isn't found, because you forgot to add the id to the form.
Just replace your form's HTML with the following:
<form
id="test-form"
action="https://script.google.com/macros/s/AKfycby8PCL7hef6N35QAEe7CcGWEVLeONJfy8ATXIsM5Sn7icTDMw8/exec" method="GET">
<input type="text" name="SDT" id="ip2" placeholder=" SĐT hoặc Email">
<button type="submit"id="submit-form" class="button">Nhận</button>
</form>

jQuery ajax post data with javascript submit form

This is my code:
<html>
<body>
<?php
include('header.php');
?>
<div class="page_rank">
<form name="search" id="searchForm" method="post">
<span class="my_up_text">ENTER THE WEBSITE TO CHECK GOOGLE PAGE RANK:</span>
<br /><br />
<input type="text" name="my_site"/></form></div>
<div class="p_ity">
PAGE RANK</div>
<div id="my_pass"></div>
<script>
function sub_form()
{
document.forms["search"].submit();
}
$(function () {
$('form#searchForm').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'check-google-page-rank.php',
data: $('form').serialize(),
success: function (data) {
$('#my_pass').html(data);
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
The problem is the ajax post works perfect if I use a submit button in the form.It doesn't work if I use a sub_form() method to submit the form after on click event.My doubt is will the java script sub_form() method trigger the jquery ajax function or not?
Note:
The data returned by the post url is
echo "<img width=\"165\" height=\"55\" src=\"./images/page-rank/pr".$rank.".gif\" />"

document.forms[].property
This returns an array of all the forms in the current document.
Since it is a array, you should pass the index value as integer.
document.forms[0].submit();
this will submit the form, if you have this form as your first form in the html page from top.

Reload a single DIV on a page using onClick

In my page there are several DIVs, which are supposed to show different news items depending on the user selection and a press of a submit button.
Am I able to refresh only a single DIV when the relevant submit button is clicked?
I tried <input type ="button"> instead of <input type="submit"> but that didn't work as expected. My code is below:
<div class="dloader"></div>
<div class="search">
<form action="" method="post">
Furniture:
<input type="text" name="val1" id="val1" value="<?=$_POST['val1']?>" />
<input type="submit" value="Submit" name="submit" />
</form>
</div>
<?php
if( isset($_POST['submit']) ){
$postItemHeader = htmlentities($_POST['val1']);
}?>
<script>
$(window).load(function() {
$(".dloader").fadeOut("slow");
})
</script>

Take One Button For Post Event
<input type="submit" id="add" name="add" />
If You want to pass the Text Data, so a text value from the Text to fetch the particular data
<div id="result">Result should appear here</div>
Use Javascript To POst The Text Data To Back End
$(document.ready(function() {
$("#add").click(function(e) {
e.preventDefault();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#add').val,
success: function(data, status) {
$("#result").html(data)
}
});
});
});

What you need is AJAX. (read the documentation). A simple example is here.
The HTML
<div id="target_div"></div> <!-- Here is where you gonna place your new content -->
<input type='button' id='trigger' onClick="get_new_data()" value="Get new Content"> <!-- When this button is pressed get new content -->
The Javascript
function get_new_data()
{
$.ajax(
{
type: POST,
url: "you-url-here.php",
dataType:"HTML", // May be HTML or JSON as your wish
success: function(data)
{
$('div#target_div').html(data) // The server's response is now placed inside your target div
},
error: function()
{
alert("Failed to get data.");
}
}); // Ajax close
return false; // So the button click does not refresh the page
} // Function end

Complete Javascript Ajax php confusion

Hi all I am developing a site in Codeigniter and I have a form that I am posting using PHP and this is absolutely fine. However I have a small dropdown on the side of my page which I am using to jump between pages - in order to do this I am simply using a href and passing variables within the URL.
I need to POST some data however when they click on the link. I don't wish to use a button and was wondering whether this could be acheived using an ajax onclick() event?? - the data I need to post however is within the form. The code structure is roughly:
<form action="main/postback" method="post">
<input type="hidden" name="pagereference" value="2" />
<input type="hidden" name="supervariable" value="7" />
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<div>
<ul>
<li><a href = 'http:localhost/landing'>click me</a></li>
</ul>
</div>
When someone clicks on the link I want to send an Ajax Post request, but In the php file that I am posting the data I want to be able to retrieve data from within the form. Is this possible? if so could someone please provide an example AJAX request and how to retrieve the data in PHP as I am majorly confused. I tried the following:
<li><a onclick='myFunction()'>click me</a></li>
<script type="text/javascript">
function myFunction()
{
var "test";
$.ajax({
type: "POST",
url: "http://localhost/ciproject/assessment/test",
dataType: String,
success: function(msg){
alert( "Data Saved: " + msg ); //Anything you want
}
});
window.alert("TEST");
}
</script>
Any ideas would be much appreciated, many thanks

You will probably run into problems using complete urls (with the domain name) due to CORS so I would recommend removing that, but you can easily do what you want using something like:
<li><a class="postFormLink">click me</a></li>
<script type="text/javascript">
$('.postFormLink').on('click', function() {
$.ajax({
type: "POST",
url: "/ciproject/assessment/test",
data: $('form').serialize(),
success: function(msg){
alert( "Data Saved: " + msg ); //Anything you want
}
});
window.alert("TEST");
}
</script>
If you have more than one form on your page, you should add an ID or a class to target it instead of using $('form').
Note that I have also removed the inline event handler.

Try the following:
<form action="main/postback" method="post" id="form1">
<input type="hidden" name="pagereference" value="2" />
<input type="hidden" name="supervariable" value="7" />
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<li><a id="clickme">click me</a></li>
<script type="text/javascript">
$(function () {
$("#clickme").click(function () {
var form_data = $('#form1').serialize();
$.ajax({
type: "POST",
dataType: "text",
url: "ciproject/assessment/test",
data: form_data,
success: function(response){
alert('Job well done');
}
})
})
})
</script>

The following should work, if you put it into your ajax options. You will need to identify your form, the easiest way is to use an id.
data: $("#theFormId").serialize()