Change html received from AJAX Wordpress - javascript

I am trying to put the form back after 2 seconds of success message, for that I've sent the form html code along with API response, can someone help me to put the form code inside <div class="custom-popup-form-wrapper"> div after 2 seconds success message?
Also the response getting as html form is same form <form class="custom-popup-form">
jQuery:
jQuery( ".custom-popup-form" ).on( "submit", function( event ) {
event.preventDefault();
let sdata = jQuery( this ).serialize();
jQuery.ajax({
url: my_ajax_object.ajax_url,
type: "post",
cache: false,
async: false,
data: {
action: "submit_huspot_dynamic_form",
data: sdata
},
beforeSend: function () {
var img_loading =
'<div class="posts-page-links"><img src="' +
my_ajax_object.loading_gif_url +
'"></div>';
jQuery(".loading_gif").html(img_loading);
},
success: function (res) {
console.log(res);
jQuery(".loading_gif").hide();
jQuery(".custom-popup-form-wrapper").html('<p>We have received your request. We will get in touch with you shortly.</p>');
}
});
});
Response received:
{"inlineMessage":"<p>We have received your request. We will get in touch with you shortly.</p>"}
<style>
.custom-popup-form input#phone_number,.custom-popup-form input#first_name,.custom-popup-form input#last_name,.custom-popup-form input#email,.custom-popup-form textarea#message,.custom-popup-form input#company_name,.custom-popup-form input#designation{
background-color: #f5f8fa !important;
border: 1px solid #c9c9c9 !important;
color: #000000 !important;
border-radius: 10px !important;
}
.custom-popup-form .message_css{
padding: 0 !important;
font-size: 15px !important;
}
</style>
<div class="custom-popup-form-wrapper">
<form class="custom-popup-form">
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="email">Email*</label>
<input type="email" class="form-control" id="email" name="email" required>
<span id="email_msg" style="display:none;"></span>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="phone_number">Phone Number*</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" required>
<span id="phone_number_msg" style="display:none;"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="first_name">First Name*</label>
<input type="text" class="form-control" id="first_name" name="first_name" required>
<span id="first_name_msg" style="display:none;"></span>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="last_name">Last Name*</label>
<input type="text" class="form-control" id="last_name" name="last_name" required>
<span id="last_name_msg" style="display:none;"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="company_name">Company name*</label>
<input type="text" class="form-control" id="company_name" name="company_name" required>
<span id="company_name_msg" style="display:none;"></span>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="designation">Designation*</label>
<input type="text" class="form-control" id="designation" name="designation" required>
<span id="designation_msg" style="display:none;"></span>
</div>
</div>
</div>
<div class="col-12 message_css">
<div class="form-group">
<label for="message">Message*</label>
<textarea rows="3" id="message" name="message" required></textarea>
<span id="message_msg" style="display:none;"></span>
</div>
</div>
<input type="hidden" class="form-control" id="section" name="section" value="" required>
<input type="hidden" class="form-control" id="pageUrl" name="pageUrl" value="" required>
<input type="hidden" class="form-control" id="pageTitle" name="pageTitle" value="" required>
<div class="col-12">
<div class="form-group">
<label for="acceptance">GDPR / Privacy Declaration*</label>
<div class="checkbox">
<label><input type="checkbox" name="remember" required> I accept the GDPR / Privacy Declaration of Test Inc</label>
</div>
<span id="acceptance_msg" style="display:none;"></span>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button><div class="loading_gif"></div>
</form>
</div>`
{"inlineMessage":"We have received your request. We will get in
touch with you shortly."}
This part of response is from API which is doing a post request and received this as success.

Related

PHP Form Does Not Inject Message into Div in HTML

This is my first question here on Stack Overflow. I have all my code below and am hoping someone can help me with this. My PHP form sends fine and is working, however my goal is to have the message after sending being placed into a Div on the HTML page. I can't figure out why this isn't working on my staging site.
Here is my JS/HTML
$(function () {
$('#contact-form').validator();
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "connect.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div style="border: 1px solid #c8c8c8; background-color: #282828; color: #c8c8c8; font-weight: 400" class="alert ' + messageAlert + ' alert-dismissable"><button style="color: #c8c8c8; top: -5px; right: 5px" type="button" class="message close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
<div class="container">
<form id="contact-form" method="post" action="connect.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="name" class="form-control" required="required"
data-error="Please Include Your Name">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="form-group">
<label for="form_lastname">Company *</label>
<input id="form_lastname" type="text" name="company" class="form-control" required="required"
data-error="Please Include Your Company">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" required="required"
data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" rows="4" required="required"
data-error="Please Include A Message"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 sm-2 md-2 lg-2 mx-auto">
<input type="submit" class="button" value="Send Message">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
I hope this is enough for someone to help me on this one. My apoligies for any issues with how it was presented, as I mentioned, first time poster. The good news is the PHP sending is fine. It's a matter of why it's not being injected into the Messages Div.

HTML required tag not validating form

Using the following form with required tags does not actaully validate my input, and always alerts "ok", what am I missing?
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputFirstName">Förnamn</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="Förnamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputLastName">Efternamn</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Efternamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputPhone">Telefon</label>
<input type="text" class="form-control" id="inputPhone" placeholder="Telefon"/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputMobile">Mobiltelefon</label>
<input type="text" class="form-control" id="inputMobile" placeholder="Mobiltelefon"/>
</div>
<div class="form-group col-sm-8">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="inputCompany">Företag</label>
<input type="text" class="form-control" id="inputCompany" placeholder="Företag" required/>
</div>
</div>
<button type="submit" class="btn btn-primary col-sm-3 pull-right" data-bind="click: submit">Submit</button>
</form>
Javascript, where i want to alert "ok" if validation passes:
vm.submit = function(){
alert("ok");
};

Serialize a form in order to send it via Ajax

I want to send a form via Ajax, not via a submit button.
I defined the form as follows in the below code excerpt, and later I defined the jQuery function to trap the CREATE BUTTON action.
When I debug this I get that
console.log($('#customer_form').serialize()); does not throw anything.
Is this the right way of serializing a form?
Do the buttons need to be inside the <form></form> element?
Here is the used code:
HTML:
<form id="customer_form" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="name">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" aria-describedby="name_help" placeholder="Name">
<small id="name_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_1">Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
<small id="address_line_1_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_2"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
<small id="address_line_2_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="town">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="town" aria-describedby="town_help" placeholder="Town">
<small id="town_help" class="form-text text-muted"></small>
</div>
</div>
<button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>
</form>
JavaScript:
$(document).ready(function(){
$('#create').click(function(event) {
console.log('foo');
alert($('#customer_form').serialize());
event.preventDefault();
});
});
You just forgot to add the name attribute to your inputs:
<input name="nameofInput" .... />
-------^
See the below snippet:
$(document).ready(function(){
$('#create').click(function(event) {
console.log('foo');
alert($('#customer_form').serialize());
event.preventDefault();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="customer_form" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="name">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="name" id="name" aria-describedby="name_help" placeholder="Name">
<small id="name_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_1">Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="adress1" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
<small id="address_line_1_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_2"></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="adress2" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
<small id="address_line_2_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="town">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="town" id="town" aria-describedby="town_help" placeholder="Town">
<small id="town_help" class="form-text text-muted"></small>
</div>
</div>
<button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>
</form>

populate a form from backend with angularjs

I am new in angularjs, i want to have a filed form from database when the user want to update his profile. I have a webservice that can give all information for the logged user then another webservice to get the information that i need with the id of the user.This is my controller:
controller('myTalentisCtrl', function ($scope,$http) {
this.User_Talent={};
this.T_User={} ;
$http.get("/LoggedUser").success(function(data) {
alert(data);
this.T_User.lnId = data.lnId;
alert(this.T_User.lnId);
});
$http.get("/usertalent",this.T_User.lnId).success(function(data) {
alert(data);
this.User_Talent.user = data.user;
this.User_Talent.talent = data.talent;
});
$scope.modif=function(){
$http.put('updating/' + this.T_User.lnId, $scope.User_Talent).success(function(data) {
$scope.User_Talent = data;
});
};
this is a part of my form:
<div ng-controller="myTalentisCtrl" class="tab-content no-margin">
<!-- Tabs Content -->
<div class="tab-pane with-bg active" id="fwv-1">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="full_name">First Name</label>
<input type="text" ng-model="User_Talent.talent.strFirstName" class="form-control" name="first_name" id="first_name" data-validate="required" placeholder="Your first name" />
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label class="control-label" for="address_line_2">Address</label>
<input ng-model="User_Talent.talent.strAdress" class="form-control" name="address_line_2" id="address_line_2" placeholder="(Optional) your Address" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="full_name">Last Name</label>
<input type="text" ng-model="User_Talent.talent.strLastName" class="form-control" name="last_name" id="last_name" data-validate="required" placeholder="Your last name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="city">City</label>
<input ng-model="User_Talent.talent.strCity" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="door_no">Phone Number</label>
<input ng-model="User_Talent.talent.lnPhone" class="form-control" name="phone_no" id="phone_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="zip">Zip</label>
<input ng-model="User_Talent.talent.lnZipCode" class="form-control" name="zip_no" id="zip_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="email">Email Adress</label>
<div class="input-group">
<span class="input-group-addon">
<i class="linecons-mail"></i>
</span>
<input ng-model="User_Talent.talent.strEmail" type="email" class="form-control" placeholder="Enter your email">
</div>
<!-- <label class="control-label" for="city">Email Adress</label>
<input ng-model="User_Talent.talent.strEmail" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" /> -->
</div>
</div>
Is there a way to initialize my ng-model with the existing values ?
you should perform a digest cycle to reflect the changes in the DOM.
Look into digest
https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Javascript object has data, but isn't populating textboxes it in MVC view

I have a method from my controller passing data as json, and when I step through the javascript, I am seeing that the data made it to the JavaScript object, but for some reason its not populating my textboxes. When I am debugging in Chrome, I see the data in the object and no errors are being thrown.
At first I tried doing this...
public ActionResult Preferences()
{
GetClientResult();
return View();
}
But I thought may have been the problem, so I changed things around and now it looks like this
In my controller I have..
public JsonResult GetClientResult()
{
OQOE = new OQOEDAL();
List<ClientInformation> ClientList = OQOE.GetClientInformation();
return Json(ClientList, JsonRequestBehavior.AllowGet);
}
and my javascript file looks like this..
$(document).ready(function () {
GetClientInformation();
});
function GetClientInformation() {
$.ajax({
type: "GET",
url: AddClientURLParam.AddGetClientInformationURL,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
return DataToGet(data);
}
})
}
function DataToGet(clientInfoData) {
$("#txtCompanyName").val(clientInfoData[0].customerName);
$("#txtAddress1").val(clientInfoData[0].address1);
$("#txtAddress2").val(clientInfoData[0].address2);
$("#txtCity").val(clientInfoData[0].city);
$("#txtState").val(clientInfoData[0].state);
$("#txtZip").val(clientInfoData[0].zip);
$("#txtEmail").val(clientInfoData[0].email);
$("#txtContact").val(clientInfoData[0].contactName);
$("#txtPhone").val(clientInfoData[0].phone);
$("#txtWorkPhone").val(clientInfoData[0].work);
$("#txtMobile").val(clientInfoData[0].mobile);
$("#txtFax").val(clientInfoData[0].fax);
$("#txtOther").val(clientInfoData[0].other);
}
and my View has this...
<div class="tab-pane active" id="YourInfo">
<h4>Please fill out your Information below.</h4>
<div class="form-group">
<label for="txtCompanyName" class="control-label col-md-2"><b>Company Name:</b></label>
<div class="col-md-8">
<input id="txtCompanyName" type="text" class="form-control max-size" required />
</div>
</div>
<hr />
<div class="col-md-6">
<fieldset>
<legend><h4><b>Address</b></h4></legend>
<div class="form-group">
<label for="txtAddress1" class="control-label col-md-2">Address</label>
<div class="col-md-10">
<input id="txtAddress1" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtAddress2" class="control-label col-md-2">Address2</label>
<div class="col-md-10">
<input id="txtAddress2" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtCity" class="control-label col-md-2">City</label>
<div class="col-md-10">
<input id="txtCity" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtState" class="control-label col-md-2">State</label>
<div class="col-md-4">
<input id="txtState" type="text" class="form-control" />
</div>
<label for="txtZip" class="control-label col-md-2">Zip/Postal</label>
<div class="col-md-4">
<input id="txtZip" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtEmail" class="control-label col-md-2">Email</label>
<div class="col-md-10">
<input id="txtEmail" type="text" class="form-control max-size" />
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend><h4><b>Contact</b></h4></legend>
<div class="form-group">
<label for="txtContact" class="control-label col-md-2">Contact</label>
<div class="col-md-10">
<input id="txtContact" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtPhone" class="control-label col-md-2">Phone</label>
<div class="col-md-10">
<input id="txtPhone" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtWorkPhone" class="control-label col-md-2">Work</label>
<div class="col-md-10">
<input id="txtWorkPhone" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtFax" class="control-label col-md-2">Fax</label>
<div class="col-md-10">
<input id="txtFax" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtMobile" class="control-label col-md-2">Mobile</label>
<div class="col-md-10">
<input id="txtMobile" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtOther" class="control-label col-md-2">Other</label>
<div class="col-md-10">
<input id="txtOther" type="text" class="form-control max-size" />
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-10">
<input id="btnSaveClientInfo" type="button" value="Save" class="btn btn-primary" />
<input id="btnCancelClientInfo" type="button" value="Cancel" class="btn btn-primary" />
</div>
</div>
</div>
Well, seems that problem will be solved with removing keyword return from AJAX success handler. Function DataToGet doesn't return anything meaningful in this case. It is just populating inputs values. So. My answer is based on comments debates.

Categories