My data in my form will be inserted by javascript. These are li attributes. I want to send the data in these li attributes to an other php page. But that's not possible?
function addProduct() {
//var productid = document.getElementById('product').value;
var product = products[type];
//this is just a product placeholder
//you should insert an item with the selected product info
//replace productId, productName, price and url with your real product info
var productAdded = $('<li class="product" name="product' + i + '">' +
'<div class="product-image">' +
'<a href="image">' +
'<img src="images/' + product + '.jpg" alt="placeholder"></a>' +
'</div>' +
'<div class="product-details">' +
'<a style="color: black;">' + product + '</a>' +
'<span class="price">€ ' + price + '</span><br>' +
'<div class="quantity">' +
'<label>Aantal: ' + qty + '</label> <div class="actions">' +
' <a href="#0" class="delete-item" >Delete</a></div></div></div></li>');
cartList.prepend(productAdded);
}
<div class="cd-cart">
<div class="wrapper">
<header>
<h2>Winkelkar</h2>
<span class="undo">Verwijder product. Ongedaan maken</span>
</header>
<div class="body">
<form id="formtosubmit" class="form-style-12" action="checkout.php" method="post">
<ul name="products">
<!-- products added to the cart will be inserted here using JavaScript -->
</ul>
</form>
</div>
<footer>
<a id="checkoutbtn" class="checkout btn" onclick="document.getElementById('formtosubmit').submit()"><em>Ga verder: €<span>0</span></em></a>
</footer>
</div>
</div>
You can create <input type='hidden'/> element in between those <li> tags and write each product ID or product name to the value of that <input> tag. This way when you submit your form, those values will be captured.
EX:
function addProduct() {
var productid = document.getElementById('product').value;
var product = products[type];
//this is just a product placeholder
//you should insert an item with the selected product info
//replace productId, productName, price and url with your real product info
var productAdded = $('<li class="product" name="product' + i + '">' +
'<div class="product-image">' +
'<a href="image">' +
'<img src="images/' + product + '.jpg" alt="placeholder"></a>' +
'</div>' +
'<div class="product-details">' +
'<a style="color: black;">' + product + '</a>' +
'<span class="price">€ ' + price + '</span><br>' +
'<div class="quantity">' +
'<input type="hidden" value="'+productid+'" readonly name='productid[]'>' +
'<label>Aantal: ' + qty + '</label> <div class="actions">' +
' <a href="#0" class="delete-item" >Delete</a></div></div></div></li>');
cartList.prepend(productAdded);
}
Now you may have noticed what is that name='productid[]' in input tag? That means create an array of every input value particular to that element. More information can be found here.
Another approach would be saving your selected product IDs into a cookie/session variable. Then your server side can access that information and process the cart accordingly. If you were to delete a product from the cart then make sure you update your session/cookie value as well.
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
After creating a batch of Html nodes, The link does not work!
How can I fix it?
Javascript Codes:
var nnn = '<div class="media mt-3 w-100" id="commentNode_0000">' +
'<a class="pr-0" href = "#" >' +
'<img class="mr-3" src="/images/comment1.png" alt="x">' +
'</a>' +
'<div class="media-body w-100">' +
'<h5 class="mt-0 mb-1">User</h5>' +
'<div id="collapse_0000" class="">' +
'<div id="cardId_0000" class="card">' +
'<p>TEST TEST</p>' +
'</div>' +
'<div class="comment-meta" id="commentId_0000">' +
'<span><input id="deleteC_24_20" type="submit" class="submitLink" value="delete"></span>' +
'<span><input id="editC_24_20" type="submit" class="submitLink" value="edit"></span>' +
'<span>' +
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>' +
'</span>' +
'<div id="replyComment_0000" class="collapse"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$(collapseId).append(nnn);
Exactly this line of code:
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>'
I expect this event to fire after clicking the tag that I have created dynamically.
But it doesn't work!
$("a[id^='replyC_']").on("click", function (event) {
var nodeId = event.target.id;
});
var collapseId = document.getElementById('collapseId')
var nnn = '<div class="media mt-3 w-100" id="commentNode_0000">' +
'<a class="pr-0" href = "#" >' +
'<img class="mr-3" src="/images/comment1.png" alt="x">' +
'</a>' +
'<div class="media-body w-100">' +
'<h5 class="mt-0 mb-1">User</h5>' +
'<div id="collapse_0000" class="">' +
'<div id="cardId_0000" class="card">' +
'<p>TEST TEST</p>' +
'</div>' +
'<div class="comment-meta" id="commentId_0000">' +
'<span><input id="deleteC_24_20" type="submit" class="submitLink" value="delete"></span>' +
'<span><input id="editC_24_20" type="submit" class="submitLink" value="edit"></span>' +
'<span>' +
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>' +
'</span>' +
'<div id="replyComment_0000" class="collapse"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$(collapseId).append(nnn);
$("a[id^='replyC_']").on("click", function (event) {
var nodeId = event.target.id;
console.log(nodeId);
});
<div id="collapseId"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
it works fine :)
I have a form which is empty in HTML file and I'm adding input elements to it using javascript but when I submit the form to PHP file (Controller.php) it doesn't send anything
HTML File
<form id="test" action="Controller.php" method="POST">
<!-- QUESTIONS WILL APPEAR HERE-->
<div id="questions"></div>
<input type="submit" value="Finish">
</form>
JS File
var d1 = document.getElementById('questions');
d1.insertAdjacentHTML('beforeend',
"<div class='question'>"
+ "<h4 id='questionTitle'>Question Title goes here...</h4>"
+ '<ul>'
+ '<li id="ans1"><input type="radio" id="1st-option" name="selector">'
+ '<label for= "1st-option" >Answer 1</label>'
+ '<div class="check"></div>'
+ '</li>'
+ '<li id="ans1"><input type="radio" id="2nd-option" name="selector">'
+ '<label for= "2nd-option" >Answer 2</label>'
+ '<div class="check"></div>'
+ '</li>'
+ '<li id="ans1"><input type="radio" id="3rd-option" name="selector">'
+ '<label for= "3rd-option" >Answer 3</label>'
+ '<div class="check"></div>'
+ '</li>'
+ '<li id="ans1"><input type="radio" id="4th-option" name="selector">'
+ '<label for= "4th-option" >Answer 4</label>'
+ '<div class="check"></div>'
+ '</li>'
+ '</ul>');
PHP File
print_r($_POST);
The result of $_POST is an empty array Array ( ), I have tried to add elements to the form statically (in HTML) and it worked, but I can't do it from JS,IDK why this happens
Your inputs have no value attribute :
Change :
<input type="radio" id="1st-option" name="selector">
to
<input type="radio" id="1st-option" name="selector" value="your_value">
For the "Answer 1" the value could be "answer1" for exemple, or "1st-option" like the id that you've set, or anything you want. But you must have something in it. Else it will be empty.
I have a short problem.
Here is my form layout:
<form class="form-inline" action="javascript:addRecord();" method="GET">
<div class="row">
<div class="form-group col-lg-4">
<div class="form-group col-lg-6">
<label for="konu">Konu:</label>
<input class="form-control " type="text" name="konu" required="required" placeholder="Bir konu yazın"/>
</div>
</div>
</div>
<br>
<div class="form-group col-lg-5 ">
<button type="submit" class="btn btn-default">Kaydet</button>
</div>
</form>
<div id="add-record-div" class="alert alert-success" hidden="hidden">
<strong>RECORD INSERTED</strong>
</div>
And my javascript code:
function addRecord()
{
$.post('add.php', function(data)
{
trHTML +=
'<tr><td>' + value.id +
'</td><td>' + value.konu +
'</td><td>' + value.aciklama +
'</td><td>' + value.giris_tarih +
'</td><td>' + value.degistirilme_tarih +
'</td><td>' + value.ad_soyad +
'</td><td>' + value.email +
'</td></tr>';
});
getLastRecord();
$('#add-record-div').show('slow').delay('1000');
$('#add-record-div').hide('slow');
}
Databse insert looks like this: http://i.stack.imgur.com/fDiiC.jpg
My problem is this function adds only empty rows to mysql. 'giris_tarih' and 'degistirilme_tarih' are date values. Those are being added correctly but other columns are always empty. There is no problem with add.php page. If I only write: form class="form-inline" action="add.php" it works perfectly. But I couldn't get it worked with javascript function.
You have mismatched actions in your markup and script, and also your data is pointing to value which is not part of the object returned from your add.php (you set your ajax response to the variable data, therefore you must use data.propName...). I also corrected your table formatting a bit and used jQuery like the rest of your module.
function addRecord()
{
$.get('add.php', function(data)
{
$('#your-table').append('<tr>' + data.id + '</td>'
+ '<td>' + data.konu + '</td>'
+ '<td>' + data.aciklama + '</td>'
+ '<td>' + data.giris_tarih + '</td>'
+ '<td>' + data.degistirilme_tarih + '</td>'
+ '<td>' + data.ad_soyad + '</td>'
+ '<td>' + data.email + '</td>'
+ '</tr>');
getLastRecord();
$('#add-record-div').show('slow').delay('1000');
$('#add-record-div').hide('slow');
}
I'm using Javascript to dynamically add floor plans where a user can add and attach images to hotel floors.
How do I make the File upload input update it's value to what the user chose?
if the button is set on page load, it works fine, but if it's generated by Javascript, then the user's choice of file to upload isn't accepted and put into the VALUE="" field (stays empty).
I recreated it using js fiddle: http://jsfiddle.net/6fays32v/1/
HTML
<div id="floor_plans_container">
<div id="unassigned">
Test
</div>
</div>
Javascript
var floor_number = $('h2').length;
var html = '<div id="0" class="plan_page">' +
' <h2 class="closeable">Floor Plan '+floor_number+'<span class="rooms_count"> </span></h2>' +
' <div class="plan_wrapper form_section">' +
' <div class="plan_form">' +
' <form target="iframe_0" enctype="multipart/form-data" method="post" action="" id="form_0" name="form_0">' +
' <input type="hidden" value="0" id="0" name="plan_id">' +
' <input type="hidden" value="" id="room_ids_db_0" name="room_ids_db">' +
' <div id="buttons_wrapper_plan">' +
' <button class="save_changes" name="plan_save" type="submit">Save</button>' +
' ' +
' </div>' +
' <table border="0" cellspacing="0" cellpadding="0" class="floor_plan">' +
' <tbody><tr>' +
' <td>' +
' <label for="name">Floor Plan Name</label>' +
' </td>' +
' <td>' +
' <input type="text" value="Floor Plan 1" id="name" name="name">' +
' </td>' +
' </tr>' +
' <tr>' +
' <td>' +
' <label for="file">Background Image</label>' +
' </td>' +
' <td>' +
' <input type="file" value="" class="file_upload" name="file_upload"> ' +
' <iframe onload="" src="" id="iframe_0" name="iframe_0" class="iframe"></iframe>' +
' </td>' +
' </tr>' +
' <tr>' +
' <td>' +
' <label for="room_size">Room Size</label>' +
' </td>' +
' <td>' +
' <div class="room_size on"></div>' +
' <input type="hidden" value="1" class="room_size_large" name="room_size_large">' +
' </td>' +
' </tr>' +
' </tbody></table>' +
' </form>' +
' </div>' +
' <div>' +
' <div style="" class="plan image small">' +
' </div>' +
' </div>' +
' </div>' +
' </div>';
$("#floor_plans_container #unassigned").html(html);
If you try to select a file, you'll see that the VALUE="" of the input stays the same - that's the problem.
What am I doing wrong?
Thanks in advance!
JavaScript cannot alter the value of an input of type "file". It's a security thing.
Otherwise you could do something like run all kinds of hidden forms on a page and upload files via Ajax without a user knowing about it.
I have a JavaScript string called _categoryItemDivTemplate that defines HTML markup, including a <div> with class="MakeTopLevelCategory".
I thought I can remove that <div> with the following code:
item = $(_categoryItemDivTemplate);
if (!isTopLevel)
item.remove('div.MakeTopLevelCategory');
But it has no effect.
Am I missing something? Is it necessary to first add the item to the DOM?
EDIT:
Here's the template from the code:
var _categoryItemDivTemplate =
'<div class="CategoryItem" style="clear:both;">'
+ '<div class="CategoryHeader">'
+ '<img src="/images/plus.gif" class="Icon"/>'
+ '<img src="/images/icn_folder.gif" class="Icon"/>'
+ '<span class="Title"> </span>'
+ '<div style="float:right; font-size: 11px;" class="CategorySelector">'
+ '<div class="DeleteCategory" title="Delete this Category"> </div>'
+ '<div class="EditCategory" title="Rename this Category"> </div>'
+ '<div class="MakeTopLevelCategory" title="Make this Category a Top-level Category"> </div>'
+ '<div class="MoveSubcategory" title="Move this Category"> </div>'
+ '<div class="SubcategoryMarker AddSubcategory" title="Add a new Subcategory to this Category"> </div>'
+ '<div class="PackageCostingMarker AddPackage" title="Add a new Package to this Category"> </div>'
+ '<div class="ProductCostingMarker AddProduct" title="Add a new Product to this Category"> </div>'
+ '<div class="NarrativeMarker AddArticle" title="Add a new Article to this Category"> </div>'
+ '</div>'
+ '</div>'
+ '<div class="CategoryItems" style="display: none;">'
+ '</div>'
+ '</div>';
Removing it from the object does not removes it from the string, if you want to remove it from the string then you need to replace the string with the object sources so try
item = $('<div />', {html:'_categoryItemDivTemplate'});
if (!isTopLevel) {
item.find('div.MakeTopLevelCategory').remove();
}