Develop Reference

insertBefore(), before() & Closest - inserting data where I need it

I am trying to insert some HTML before a divider class="replydivider" using insertBefore() but I can't get it to work. This is my code:
<div class="col-sm-12 mb-2 replydivider">
<div class="row">
<div class="col-sm-2 offset-1">
<img src="/assets/uploads/user/<?=$_SESSION['userImage'];?>" class="border rounded-circle comment-user-img mr-3">
</div>
<div class="col-sm-8 rounded form-inline">
<form method="POST" class="form-group reply-form">
<input type="text" name="comment" class="form-control mr-2" placeholder="Reply here" required>
<input type="hidden" name="postId" value="<?=$id?>">
<input type ="hidden" name="replyId" value="<?=$row['commentId'];?>">
<input type="submit" class="btn-sm btn-primary" value="Reply">
</form>
</div>
</div>
</div>
The issue I'm having is it has to be inserted before the div relative to the form that is submitted as there will be many replydividers and forms on the page.
I've tried the following and countless variations but can't get it to work:
$(this).closest('.replydivider').before(data);
$(this).closest('div').find(".replydivider").before(data);
$(this).closest('form').find(".replydivider").before(data);
$(data).insertBefore('.replydivider');
Any guidance would be appreciated.
EDIT:
This is my jquery function:
$(function () {
$('.reply-form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/comment/addComment',
data: $(this).serialize(),
success: function (data) {
alert('test');
var test = "<p>Sample data</p>";
$(this).closest('.replydivider').before(test);
}
});
$(this).closest('form').find("input[type=text]").val("");
});
});
Interestingly, if I put the $(this).closest('.replydivider').before(test); line outside the ajax call it works, but not inside it. I put the alert there to test it was returning successful and it is.

.ajax()
The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves.
If you want this in the callbacks to be the element that received the event then set the context property of Ajax like:
.......
context:this,
success: function (data) {
.......

show confirmation modal dialog after form submission

I have a form and I need it to do 2 things once the submit button is clicked:
I need the form data to be processed in the acknowledge.php that I have created.
I need the modal dialog to display confirmation.
My form:
<form class="quote-form" method="post" action="acknowledge.php">
<div class="form-row">
<label>
<span>Full Name</span>
<input type="text" name="name">
</label>
</div>
<div class="form-row">
<label>
<span>Email</span>
<input type="email" name="email">
</label>
</div>
<div class="form-row">
<label>
<span>Phone</span>
<input type="number" name="phone">
</label>
</div>
<div class="form-row">
<label>
<span>Nature of Enquiry</span>
<select name="enquiry">
<option selected>General Enquiry</option>
<option>Logo Design</option>
<option>Web Design</option>
<option>Branding</option>
<option>Social Media</option>
<option>Email/Web Hosting</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Message</span>
<textarea name="message"></textarea>
</label>
</div>
<div class="form-row">
<button type="button" name="send">Get A Quote</button>
</div>
</form>
I'm new to Javascript and AJAX but I have copied some code from some similar threads and tried to customize it to my site
<script type="text/javascript">
$(".quote-form").submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
data: $(".quote-form").serialize(),
url: 'url',
success: function(data) {
$("#myModal").modal("show");
}
});
return false;
});
});
</script>
<!--Modal container-->
<div id="myModal" class="modal">
<!-- Modal content-->
<div class="modal-content">
<span class="close">x</span>
<p>Some text in the Modal..</p>
</div>
</div>
When the submit button is clicked nothing happens. Even the acknowledge.php does not execute. What am I doing wrong?

you need to wrap your code in a document.ready() function:
<script type="text/javascript">
$(function(){
$(".quote-form").submit(function(e){
e.preventDefault();
$.ajax({
type : 'POST',
data: $(".quote-form").serialize(),
url : 'url',
success: function(data) {
$("#myModal").modal("show");
}
});
return false;
});
});
</script>
UPDATE
you need to change the type of your button to submit like this
<button type="submit" name="send">Get A Quote</button>

A number of things that have been holding you up:
In your javascript, you have a trailing }); right at the end.
Your button is doing nothing to trigger the submit event in the javascript. You should alter the button or use a proper submit input. Or use type="submit".
You're not doing anything with data in your success callback. So when the modal opens, nothing else happens.
Your URL in the AJAX request is not set. You could use this.action to use the form's action URL here.
I've made some changes that you can preview in my fiddle.
There are some parts of the fiddle that you should ignore, such as the ajax url and data options. Those should be something like:
$.ajax({
type: 'POST',
url: this.action,
data: $(this).serialize(),
//...
});
What we obviously do not know now is whether you have included your dependency scripts like jQuery and bootstrap into your page.
For example: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> is the bootstrap javascript.
Make sure that jQuery is above bootstrap, or bootstrap will fail to load as it depends on jQuery. You may need to use the bootstrap CSS as well.
Lastly, you need to check that your action in the form is the correct URL, and that the data in your form that is sent is processed and echoed back as HTML.
You will also want to go to the bootstrap documentation, get a better example of the modal, and check out the forms area to spruce up this form.
You could use developer tools in your browser and note any errors thrown by javascript in the console if you still have problems. (Ctrl+Shift+I).
You didn't need to wrap anything in a document ready.

You doing two things wrong
First you need to wrap your code with document.ready
$(function(){
});
Then you need to fix your url
var form = $(".quote-form");
$.ajax({
type : 'POST',
data: form .serialize(),
url : form.attr('action'),
success: function(data) {
$("#myModal").modal("show");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});

Add HTML form on button click

I have an HTML form in my website/application.
The form has lots of fields of input text, select, and PHP code, as well, to fill drop down values.
Is there any way I can clone/create the same form when the user clicks on the Add button? Let's say, if the user clicks 5 times, it would have five forms on the UI.
HTML
<form id = "buyerForm" role="form" method="POST" enctype="multipart/form-data" style="margin-top:30px;">
<span class="customerno" style="font-size: 22px;">Buyer 1 (Form 2)</span>
<div class="form-group">
<label>APPLICANT DETAILS</label>
</div>
<div class="form-group">
<label>Mr. / Mrs</label>
<select class="form-control" name="jnameTitle" id="jnameTitle">
<option>Please Select One</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="MS">MS</option>
</select>
</div>
// similar fields are omitted to reduce the complexity
<div class="form-group">
<label>Address</label>
<textarea name="jaddress" id="jaddress" class="form-control" cols="80" rows="5" ></textarea>
</div>
<button type="submit" name="jointCustomers" id="jointCustomers" class="btn btn-success btn-lg btn-flat">Save</button>
<button type="reset" class="btn btn-default btn-lg">Reset</button>
</form>

if you're using jQuery (or dont mind using it) you could just use clone to add the form again to the parent container
$("#youButton").click(function(){
$("#buyerForm").clone().appendTo("#yourParentWrapper");
});
see this fiddle

Yes, there is a way.
Lets say you have the main page -> mainPage.php, where you can have a list and the button (addForm).
Then you will have your myform.php page that will generate a form it self.
The process is very simple.
You press the btn AddForm
You make a request using AJAX against your function that generate the form in the myform.php page.
Inside your AJAX code, you will add your form inside the list object.
Note: This is only a basic idea. You must adapt the code to your needs.
//Your main page, will contain a list.mainPage.php
<ul id="myFORMS">
<li><button id="idBtnElement" type="button">AddForm</button></li>
</ul>
//Your php code to create the form. You can create a function if you want
$arrToJSON = array(
"myFormHtml"=>"You will put your HTML form code here"
);
return json_encode(array($arrToJSON));
//Your javaScript code
$(document).on("event", "#idBtnElement", function(){
//Data you want to send to php evaluate
var dt={
ObjEvn:"btn_ADDFORM"
};
//Ajax
var request =$.ajax({//http://api.jquery.com/jQuery.ajax/
url: "myFormGenerator.php",
type: "POST",
data: dt,
dataType: "json"
});
//Ajax Done catch JSON from PHP
request.done(function(dataset){
for (var index in dataset){
formStrHtml=dataset[index].myFormHtml;
}
//JavaScript
//Here you can grab formStrHtml in apped at the end of the list in your main page.
$("#myFORMS ul").append('<li>'+formStrHtml+'</li>');
});
//Ajax Fail
request.fail(function(jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
}

Error sending a form via AJAX

I am very new to jQuery and I'm looking for an explanation as to why this code does not seem to work. I think it is something with the "action" not sure. Can someone help me understand my mistake here. thanks
<script src="/jquery.validationEngine.js"></script>
<script>
$("#contact_body").submit(function(e) {
e.preventDefault(); // Prevents the page from refreshing
var $this = $(this); // `this` refers to the current form element
if ($("#contact_body").validationEngine('validate')) {
//Post Data to Node Server
$.post(
$this.attr("action"), // Gets the URL to sent the post to
$this.serialize(), // Serializes form data in standard format
function(data) { /** code to handle response **/ },
"json" // The format the response should be in
);
//Notify User That the Email Was Sent to the Server & Thanks!
//$('#contactThanksModal').modal('show');
$('#contactModal').modal('hide');
alert("success");
}
else {
//handle Invalid Email Format Error
alert("error");
}
});
</script>
<!--pop up contact form -->
<div id="contact" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Send us a message</h3>
</div>
<div class="modal-body">
<form id="contact_body"class="contact_body" name="contact_body" action="/contact">
<label class="label" for="form_name">Your Name</label><br>
<input type="text" name="form_name" id="form_name" class="input-xlarge"><br>
<label class="label" for="form_email">Your E-mail</label><br>
<input type="form_email" name="form_email" class="input-xlarge"><br>
<label class="label" for="form_msg">Enter a Message</label><br>
<textarea name="form_msg" class="input-xlarge"></textarea>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
Nah.
</div>
<!-- <div id="thanks"><p><a data-toggle="modal" href="#contact" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div> -->

You need to wrap your JQuery scripts in a
$(document).ready(function() {
...your_code_here...
});
This will then wait for the whole document to load before trying to attach events to objects.
Without this you may be trying to bind events to objects that have yet to be "created".

You need to put your code in a document ready handler:
<script src="/jquery.validationEngine.js"></script>
<script>
$(function() {
$("#contact_body").submit(function(e) {
// your code...
});
});
</script>
Your code is currently trying to add the submit() handler before the element exists in the DOM.

Trying to perform AJAX with jQuery doesn't work

I'm trying to use AJAX with jquery… this is what I'm trying to do :
<div class="form">
<form name="contact" class="js-form-contact" action="contact.php" method="post">
<div class="clearfix">
<label>Mail</label>
<div class="input">
<input type="text" size="44" name="mail"/>
</div>
<div class="clearfix">
<label>Message</label>
<div class="input">
<textarea rows="6" name="message"></textarea>
</div>
</div>
<!-- recaptcha -->
<br/>
<div class="submit">
<input type="submit" class="btn primary" value="Enviar"/>
</div>
<div id="quote">
<p> :D </p>
</div>
</div>
</form>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("btn primary").click(function(){
$.ajax({
type: "post",
url: "contact.php",
data: $('.js-form-contact').serialize(),
success: function(data) {
$('.js-form-contact .btn primary').attr("disabled", true);
$('#quote').html("Rock!!");
// $('.column:first-child .box').after('<p class="msg">' + data + '</p>');
}
});
});
});
</script>
the contact.php is just doing "echo "Hello";" for now. When I click the submit button, the browser goes to contact.php and it echoes "Hello"...
What's the problem here? , I'm quite new with JS and jQuery so please bare with my noobishness :)

Your jQuery selector is wrong. It should be $(".btn.primary"). The . denotes that it's a class of the element you're looking for. No whitespace between classes means the element should have all those classes to match.
Furthermore, you should probably use event.preventDefault() to prevent the click-event bubbling up to the organic submit handler.
To put the money where my mouth is...
// Note the parameter in the click-handler declaration
$(".btn.primary").click(function (event) {
event.preventDefault();
// Do ajax magic here
});