I need to insert a div value into my database, as you can see down there in the code there is the called Total Amount, this is giving me the final price i will have to pay, what i want is to insert the total amount value(which depends on what you are buying) into the database, for example if i pay 90$ i want the column Payment in my table to save the price i paid. I already done some php and im gonna insert it here.
`<div class="box step6">
<h2 class="title">Step 5: Billing contact information</h2>
<h3>Amount:</h3> <div class="pay one"></div></br>
<h3>Early Bird Offer:</h3> <div class="pay two"></div></br>
<h3>Total Amount:</h3> <div class="pay three"></div>
<div class="pay-bt">
<div class="paypal"><h3>Paypal</h3></div>
<div class="card"><h3>Credit Card</h3></div>
<div class="bank"><h3>Bank Transfer</h3></div>
</div>`
If you want to keep the div content as html, you can use jquery JSON.stringify($(".step6").html()) to get the content and encode html chars in php to prevent XSS
Consider using ajax to send your data.
I would suggest using an ID for the div you want to target lets try #pay-three
$.ajax({
url: '/your-php-script.php',
type: 'POST',
data: {
total-amount: $('#pay-three').text(),
}
}).done(function(data){
alert('data sent');
});
In your script:
$total-amount=mysqli_real_escape_string($_GET['total-amount']);
Related
I am calling ajax with below code in my index.php file.
<script type="text/javascript">
$(document).ready(function(){
$("#counting").click(function(){
$.ajax({
type: 'POST',
url: 'https://example.com/update.php',
data: {url: '<?=$url?>'},
success: function(data) {
// alert(data);
//$("p").text(data);
}
});
});
});
</script>
It's working perfectly, but the issue is
I have div called counting multiple times on the page.
example
<div id="counting">
example
</div>
<div id="counting">
example
</div>
Issue - Ajax call only works with first div, not below divs.
How to make it work with all divs with id counting
Id attributes are supposed to be unique. You're only ever going to get the first div called because once the DOM sees that, it's met it's requirement and doesn't search further. I suggest you give you divs unique ids and then use a class that is the same for all of them.
<div id="div1" class="counting_class">
example
</div>
<div id="div2" class="counting_class">
example
</div>
Then your jQuery would look something like this:
$(".counting_class").click(function(){
var id = $(this).attr('id');
//then call ajax based on the individual ID
}
When loading data using AJAX, what is preferred:
Loading html data e.g.
<div class="message">
<span class="author">John Smith</span>
<span class="date">01/01/17</span>
<div class="message-content">
Example text
</div>
<div class="message-actions">
Upvote
Downvote
Leave a comment
</div>
</div>
(The above is entirely fictional, by the way)
Or loading JSON data e.g.
{
"author":"John Smith",
"date":"01/01/17",
"text":"Example Text"
}
I realise that loading JSON data would place less load on the server, but I'm primarily concerned about loading speed for the user. So basically, my question is, how does loading html data-for example using JQuery's .load() method, compare to loading JSON data and rendering it as html using Javascript, in terms of total time before a user can see the displayed result?
EDIT after #vol7ron's comment:
This is a messaging application, and so these messages will be displayed one after the other in a scrolling area of the screen. The number of messages is variable.
I am creating a commenting system whose structure is like below:
<div id="main_comment_DIV_id_no">
//Some user comment
</div>
<div "reply_DIV">
<textarea name="reply_comment" id="reply_comment" rows="1" style="width:100%">
</textarea>
</div>
I want to append the textarea data to the main comment (also updating the database) part on pressing the Enter key.
I can easily accomplish this if there is only one (or few) DIVs, but here I have n numbers of DIVs so I am searching for a solution to append the nth reply data to the nth main_comment_DIV only.
Any help will be highly useful?
Here is the logic. That might help you.
When you click on enter, call ajax function and pass reply_comment with it. In php side, add that comment into the database and fetch all messages from database. On ajax success,
$('#main_messages_container').html(null);
$('#main_messages_container').html(res);
This will give you all updated messages with the new one. You don't need to append any div container in this case.
DETAILED ANSWER:
$('#enter_key_button').on('click',function(){
$.ajax({
type: 'post',
url: 'process.php',
data: {textarea : textarea},
success: function (res) {
//alert(res);
$('#main_messages_container').html(null);
$('#main_messages_container').html(res);
}
});
});
You can try with the keyup event and jquery class selector. You should not use id as selector, because you said you have n number of main comment dive, so id of n number of divs should not be same.
<body>
<script type="text/javascript">
$(document).ready(function(){
$('[name="reply_comment"]').keyup(function(e){
if(e.which === 13){
var comment = $(e.currentTarget).val(),
commentDiv = $('.main_comment_DIV_id_no');
//you have the comment here, so you can call an ajax request to update it in the database.
$(e.currentTarget).val("");
//if the blank div where you want to add the comment is already present, then write
$(commentDiv[commentDiv.length-1]).text(comment);
// Else no need to add the blank div initially, just create a new div and add the comment there.
$(commentDiv[commentDiv.length-1]).after('<div class="main_comment_DIV_id_no">'+comment+'</div>');
}
})
})
</script>
<div class="main_comment_DIV_id_no">
Some user comment
</div>
<div class="main_comment_DIV_id_no">
Some user comment2
</div>
<div class="main_comment_DIV_id_no">
</div>
<div id="reply_DIV">
<textarea name="reply_comment" id="reply_comment" rows="1" style="width:100%" ></textarea>
</div>
</body>
The title might be a little misleading but it's quite a difficult one to put into words.
I've been trying all day and failed even with attempts from stackoverflow, so I must ask once again for help.
I am retrieving a list of article information from MySQL and displaying them in a table. Once displayed these table rows are clickable by using jQuery .click function, when clicked ckeditor (which is with a display:none;) opens from a <section></section> and hides the whole table.
The issue that I am having is when I click on a row, it should display the data from those specific articles inside the ckeditor, but no matter what the first row data always shows up even if I click on a different row, I can point out that it is due to not having an id so the .click function cannot distinguish which section it is trying to show, but I cannot figure out how to connect the table with the section information.
This is how I am retrieving the data and displaying it in a table, using foreach.
<?php
$getInfo = $articleClass->get_all_article_info();
foreach($getInfo as $data)
{
$article_title = $data['article_title'];
$article_content = substr(htmlentities($data['article_content']),0,50).'...';
$article_content_full = $data['article_content'];
$article_uid = $data['article_uid'];
echo '
<tr id="tr_id" class="'.$article_uid.'">
<td class="marker">
<i class="fa fa-align-left"></i>
</td>
<td class="title">
'.$article_title.'
</td>
<td class="content">
'.$article_content.'
</td>
</tr>
<section id="post_info_id" style="display:none;">
<textarea id="editor1">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
</section>
';
}
?>
And this is the click function; jQuery.
<script type="text/javascript">
$(document).on('click', '#tr_id', function ()
{
$("#post_info_id").css("display", "block");
$("#table_id").hide();
});
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>
I know that the problem is that when I click on the tr, it cannot distinguish the #post_info_id, because it just retrieves about 20 rows of information but the $post_info_id has no specific id to match with the #tr_id, but I have no idea how I could even accomplish this.. I have retrieved the article_uid which is an incremented number when the articles are inserted into the database, and could use that to mark both the #tr_id and #post_info_id but with jQuery I have no idea how to accomplish after what I tried.
I don't want to make this a long question, considering the more I write the less likely I will get an answer but here is what I have tried.
I tried setting the article_uid as the id, but I cannot retrieve the id's of the articles as they're in random, and there's nothing specific that I was able to connect both the post_info_id and tr_id by using .attr('id').
This can be achieved by using the Jquery next() function.
You could change your onclick method to this:
$(document).on('click', '#tr_id', function ()
{
$(this).next('section').css("display", "block");
$("#table_id").hide();
});
And all elements should always have unique ids so here's a way to achieve that:
'<section id="post_info_id"'.$counter.' style="display:none;">
<textarea id="editor'.$counter.'">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
</section>'
Then declare a variable to keep count outside your loop:
$counter = 0;
Finally, increment the counter at the end of the loop:
$counter++;
I want to search multiple HTML files from a separate page, where I search for text from all the divs which has a specific id for each, whole id containing matched search term will be displayed on the search page in list.
The div list looks like this :
<body>
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
Please note that I want to perform search from different page and want to display results there with links to the searchable page.
For now I was searching like this :
HTML
<body>
<input type="text" id='search' />
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
JavaScript
$('#search').on('input', function () {
var text = $(this).val();
$('.vs div').show();
$('.vs div:not(:contains(' + text + '))').hide();
});
It is working on the fiddle here, but I don't want it to work like this, I want to do the search from a separate page remotely and display results there with link to this page.
Solution with jQuery and AJAX:
<form id="searchForm">
<input type="text" id="search"/>
<input type="submit" name="Search!" />
</form>
<div id="resultContainer">
</div>
<script type="text/javascript">
$("#searchForm").submit(function(e) {
e.preventDefault();
var results = $("#resultContainer");
var text = $("#search").val();
results.empty();
$.get("http://example.com/", function(data) {
results.append($(data).find("div:contains(" + text + ")"));
});
});
</script>
Fiddle (This fiddle enables you to search for content on the jsfiddle page, try for example JSFiddle as search term.)
Note however that this does not work cross-domain, because browsers will prevent cross-site scripting. You didn't describe your use-case clear enough for me to know whether you're okay with that.
You'll want to look at using PHP file_get_contents to retrieve the HTML contents of the external page, and from there analyze the data in the <div>s that you are interested in. Ultimately, you'll want to store each individual search term in a JavaScript array (you can create JavaScript arrays dynamically using PHP), and then create search functionality similar to example you posted to search all the elements in your array.
So on page load, you'll want to have a <div> in which you are going to list all the elements from the array. You can list these by looping through the array and displaying each individual element. From there, you will want to call a function every time the user enters or deletes a character in the <input> box. This function will update the <div> with an updated list of elements that match the string in the <input> box.
This is the theory behind what you are trying to accomplish. Hopefully it will give you some direction as to how to write your code.
Update:
If you're looking for a JavaScript only solution, check out a JavaScript equivalent of PHP's file_get_contents: http://phpjs.org/functions/file_get_contents/
From here, you can maybe look at using .split to break up the list. Ultimately, you're still trying to store each individual search term as an element in an array, it's just the method that you retrieve these terms is different (JavaScript as opposed to PHP).
Perhaps I was emphasizing too much on PHP, perhaps it's because it's the web development language I'm most familiar with. Hope this JavaScript-only solution is helpful.