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);
}
});

Is there a way to send data from html tags to php?

I am trying to alter the functionality of submit button for some reasons. If have called a JS function which is called by clicking submit button but i have no idea how can i manually send my data from html tags to php variables. Below is the short description of code.
<html>
<body>
<input class="inputtext" id="email" name="email" type="text"></div>
<input value="Submit" name="v4l" id="login" class="inputsubmit" type="button" onclick="myFunction();return false">
<script>
function myFunction() {
var TestVar =document.getElementById("email").value;
document.write(TestVar);
//store data of testvar to php
}
</script>
<html>
<body>
I know it can be done by form but i need it this way.

Using a PHP form would be a really simple solution: http://www.w3schools.com/php/php_forms.asp
You could pretty much post it strait to the PHP page.

I hope you are comfortable with jQuery.
Try
$("#login").click(function(){
var email= $("#email").val();
jQuery.post(
"*your parsing url*",
{email:email},
function(data){
// Data returned from the ajax call
}
)
});

The jQuery library makes this, and many other tasks, very simple:
<html><head></head><body>
<form id="myForm">
<input class="inputtext" id="email" name="email" type="text"></div>
<input value="Submit" name="v4l" id="login" class="inputsubmit" type="button" onclick="myFunction();return false">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function myFunction() {
jQuery.ajax({
url: 'yourcode.php',
type: 'POST',
data: jQuery('#myForm').serialize(),
success: function(response) {
alert('The data was sent, and the server said '+response);
}
});
}
</script>
</body></html>
See http://api.jquery.com/jquery.ajax/ for more information.

JQuery form submit to an aspx -- form collection empty

I have the following code in my HTML file (this is oversimplfied to save space and time):
<form role="form" name="popupForm" id="popupForm">
<input type="hidden" name="season1" id="season1" value="fall" />
<input type="hidden" name="season2" id="season2" value="fall" />
<input type="hidden" name="season3" id="season3" value="fall" />
<input type="hidden" name="ITEMCOUNT" id="ITEMCOUNT" value="3" />
</form>
<button type="button" class="btn btn-primary" id="orderSave">Save Changes</button>
I then have a JQuery routine that IS getting called:
$("#orderSave").click(function () {
$.post("ProductPopupLightboxSave.aspx", $('form#popupForm').serialize(), function (data) {
$("#productModal").modal("hide");
});
});
In the file ProductPopupLightboxSave.aspx I have the following code:
If IsNumeric(Request("ITEMCOUNT")) Then intItemCount = CInt(Request("ITEMCOUNT"))
The value in intItemCount is used in a For...Next loop to interate through the and grab the individual elements "season1", "season2", and "season3" (obviously the numbers vary depending upon the product) and saves the info to the database. The problem is that Request("ITEMCOUNT") is nothing when it gets here. In fact, it doesn't seem to serialize my form data at all.
UPDATE: I have used the name element and that didn't fix anything. What I have noticed is that this is a .NET application and it has a RADSCRIPTMANAGER tag in the master page. It has an open form tag but not a closing one (it was done by another developer so I don't know the reason for that). It appears that this is getting in the way because I just changed the FORM tag to be a DIV tag with the exact same ID and with that change only the form data serializes.
What am I doing wrong? I have even done an alert on the value of the #ITEMCOUNT and it is always correct. Thanks for your help!

I've tested in my computer using your form and it worked, however I had a strange behavior in IE 10. So I changed my code and it worked, find it below, using .ajax not .post
<form role="form" id="popupForm">
<input type="hidden" id="season1" name="season1" value="fall" />
<input type="hidden" id="season2" name="season2" value="fall" />
<input type="hidden" id="season3" name="season3" value="fall" />
<input type="hidden" id="ITEMCOUNT" name="ITEMCOUNT" value="3" />
</form>
Changed the button just in case, it worked with the other button too.
<button type="button" class="btn btn-primary" id="Button1"> More Save</button>
And set an .ajax post
$("#Button1").click(function() {
$.ajax({
url: 'Default.aspx',
type: 'POST',
data: $('form#popupForm').serialize(),
success: function(data) {
alert('success');
},
error: function() {
alert("error");
}
});
});
For testing purposes I've added alerts on success and error, I'm posting to a default.aspx webpage and I get results properly.
I hope it helps.

Getting the value of the child of sibling jquery/ajax?

I'm currently trying to make a ajax comment function work once a user clicks "open comments".
Currently I'm getting data back from my php script and the status of the ajax call is "200 OK" so it definetely works but I'm just unable to get the correct value for the current comment which has been clicked on in order to post it to the php script.
What I'm asking is how do I get the value of the ".posted_comment_id" class and then how do I load the data which is returned into the ".commentView" class?
jQuery/AJAX:
$(".closedComment").click(function(){
var $this = $(this);
$this.hide().siblings('.openComment').show();
$this.siblings().next(".commentBox").slideToggle();
$.ajax({
type: "POST",
url: "http://example.dev/comments/get_timeline_comments",
data: {post_id: $this.siblings().next(".commentBox").find(".posted_comment_id").val()},
dataType: "text",
cache:false,
success:
function(data){
$this.closest(".commentView").load(data);
}
});
return false;
});
HTML:
<div class="interactContainer">
<div class="closedComment" style="display: none;">
open comments
</div>
<div class="openComment" style="display: block;">
close comments
</div>
<div class="commentBox floatLeft" style="display: block;">
<form action="http://example.com/comments/post_comment" method="post" accept-charset="utf-8">
<textarea name="comment" class="inputField"></textarea>
<input type="hidden" name="post" value="13">
<input type="hidden" name="from" value="5">
<input type="hidden" name="to" value="3">
<input type="submit" name="submit" class="submitButton">
</form>
<div class="commentView"></div>
<div class="posted_comment_id" style="display:none;">13</div>
</div>
</div>

Replace .val by .html or .text. This will return the innerHTML of the element.
data: {
post_id: $this.siblings().next(".commentBox").find(".posted_comment_id").text()
}
You might need to convert the string to an integer to make it work.
If the query selector fails, this selector might do the job instead:
$this.parent().find(".posted_comment_id")
To add the returned data on your webpage, use the success handler. Here's an example of how it's done:
success: function(json) {
// Parse your data here. I don't know what you get back, I assume JSON
var data = JSON.parse(json),
content = data.whatever_you_want_to_print;
// Assuming your selector works, you put in in the element using .html
$this.closest(".commentView").html(content);
}
});

You probably want to do something like:
$(this).parents('.interactContainer').find(".posted_comment_id").text()