I am trying to make a list editing page, so far, I am just printing list values from a database into <li> elements, and I also made the list sortable. Ideally what I want is to also be able to double click the list items to edit. The first problem I'm facing is submitting the <li> items in $_POST format in order. I tried using serialize but that only gives the order the values are in, not the values themselves. I also tried using hidden inputs before each <li>, but again the sorting problem happens. This is my code so far:
HTML / PHP:
echo('<div class="jumbotron">
<form id="formOne" action="editListTest.php" method="get">
<input type="hidden" value="'.$dbname.'" name="dbname"></input>
<p>Title</p>
<input style="text-align:center; width: 90%" class="form-control input-md" type="text" name="title" value="'.$listname.'">
<pstyle="padding-top:10px">Items</p>
<input type="hidden" name="listitems" id="listitems" value="">
<ol id="sortable" class="rankings">');
$stmt2 = $mysqli2->prepare("SELECT listitems FROM {$dbname}");
$stmt2->execute();
$stmt2->bind_result($item);
$number = 0;
while ($stmt2->fetch()) {
$number += 1;
echo('<li class="notep" id="notep_'.$number.'"">'.$item.'</li>');
}
?>
</ol>
</input>
<p>
</br>
<input type="button" <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit" id="more_fields" onclick="add_fields();" style="font-size:28; max-height:34px; line-height:34px; padding-top:0px; width:34px; padding-left:9px" value="+" />
<input type="hidden" value="<?php echo($private)?>" name="oldprivate" id="oldprivate"/>
<input type="button" <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit" id="less_fields" onclick="remove_fields();" style="font-size:28; max-height:34px; line-height:34px; padding-top:0px; width:34px; padding-left:7px" value="-" />
<button <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit">Submit Edits</button>
</p>
<p>
Keep This List <?php echo($privateString) ?> : <input style="vertical-align:1px" type="checkbox" name="keepprivate" value="1" checked>
</p>
</form>
Javascript/Jquery:
$('#formOne').submit(function(){
var cerial = $( "#sortable" ).sortable( "serialize");
$('#listitems').val(cerial);
HTML Output (The ListItems are draggable right now, but I cant send them as an array in the order they are in after ing been dragged):
If anyone has any ideas that would be great, also if you have any ideas about double clicking to edit <li> items, that would be great. I have tried using jQuery to switch class and contenteditable but I've sort of hit a dead end with that. Also, just so you know: editListTest.php is the page this code is on, so it's just submitting to itself for now, but it will be submitting to a processing PHP page that will insert edits into a MYSQL database.
Any help is greatly appreciated,
Thank You
Related
Is there a way to transfer the value of an input to a div that I use as a submit button?
Example:
<form action="./exam/x/u_exam_run.exe.php" method="post" style="display:inline">
<input type="hidden" name="qst" value="<?=$get_QUID_text_sha;?>" />
<input type="hidden" name="uex" value="<?=$_get_EUID;?>" />
<?php
foreach($question_answers as $answer_text_sha => $answer_text) {
if($reformat_output) {
$answer_text = reformat_output_table($answer_text);
}
?>
<div name="akwMB" class="<?=$_SESSION['akw_list'][$get_QUID_text_sha]==$answer_text_sha ? 'list-item-answer-hover' : 'list-item-answer';?>" onclick="this.parentNode.submit()">
<input type="hidden" name="akwMB" value="<?=$answer_text_sha;?>"/>
<div class="question-list" >
<span><?=$answer_text;?></span>
</div>
</div>
<?php
}
?>
</form>
I'm trying to get $answer_text_sha to get submitted when I click the div, but everything I've tried didn't work. Is there a way to do this? Thanks.
I managed to get it work, I don't know how OK my solution is but I used increment for each answer id and used <label for="id">.
If anyone needs this by any chance, this is how I did it
<input id="MB<?=$i++;?>" style="display:none;" type="submit" name="akwMB" value="<?=$answer_text_sha;?>"/>
<label for="MB<?=$ii++;?>">
<div name="akwMB" class="<?=$_SESSION['akw_list'][$get_QUID_text_sha]==$answer_text_sha ? 'list-item-answer-hover' : 'list-item-answer';?>" onclick="this.parentNode.submit()">
<div class="question-list" >
<span><?=$answer_text;?></span>
</div>
</div>
</label>
i am trying to check my value form database it already enter or not before submitting the form
i have code its display the result in text box how it is possible that result is display in div or span.
my code is as under:
my first file category.php have script and html form
script
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#id").keyup(function() {
$.ajax({
type : "POST",
url : "dbscript2.php",
data : "id=" + $("#id").val(),
success : function(html) {
$("#message").val(html);
}
});
});
});
</script>
html form is :
<form method="POST" action="gcd.php">
<p>
<label>Category:</label>
<input type="text" name="category" id="id" tabindex="1" />
</p>
<p>
<div id="mes"></div>
<input type="text" name="new" id="message" tabindex="2" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Save" />
</p>
</form>
and last php file message dbscript2.php
<?php
include "config.php";
$id = $_POST['id'];
$q=mysql_query("select * from category where category ='$id'");
$num=mysql_num_rows($q);
if($num==0)
echo "";
else
{
echo "This Category already Entered";
}
?>
Since there are couple of errors in the actual code you shared and the answer you derived, let me put it across here
HTML form
<form method="POST" action="gcd.php">
<p>
<label>Category:</label>
<input type="text" name="id" id="id" tabindex="1" />
</p>
<p>
<div id="mes"></div>
<input type="text" name="message" id="message" tabindex="2" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Save" />
</p>
</form>
The core code where you want the data to get inserted to the div
$("#mes").text(html);
Please note that you get the value returned from the php script, and not some html. Hence it is better to rename your expected return value as some other identifier say mydata
$("#mes").text(mydata);
Please let me know if you are looking for something else.
Updated based on OP's further query
Please read jquery API docs, It gives you an idea of the supported functions http://api.jquery.com/.
To your specific question, yes you can hide or show a particular div using the below calls:
//check your condition and show or hide the div accordingly
$("#mydiv").show();
or
$("#mydiv").hide();
Hi i have a cart that i want to add a form automatically this code seems to kinda do the trick only the problem is i have to hit F5 for it to add the amount i am quite new to this and cant figure out where i have gone wrong.
<form method="post" action="level3.php" class="jcart" id="foo">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="ABC-8" />
<input type="hidden" name="my-item-name" value="Level 1" />
<input type="hidden" name="my-item-price" value="95.00" />
<input type="hidden" name="my-item-url" value="" />
<table>
<tr>
<td width="65%">
<strong>Level 1 all for £95</strong>
</td>
<td width="15%" align="right">
£95.00
</td>
<td>
<input type="text" hidden ="true" name="my-item-qty" value="1" size="3" hidden="true" />
</td>
<td width="20%" align="center">
<input type="submit" name="my-add-button" id="my-add-button" value="add" class="button" />
</td>
</tr>
</table>
<input type="hidden" name="visited" value="" />
</fieldset>
That is the form that submits the amount into the check out.
<script>
$(document).ready(function(){
//Check if the current URL contains '#'
if(document.URL.indexOf("#")==-1)
{
url = document.URL+"#";
location = "#";
} else {
location.reload(true);
document.getElementById("my-add-button").click();// Simulates button click this has to be in as it links to another piece of java that adds the item to the check out with out this it wont add the item
document.foo.submit(); // Submits the form without the button
}
});
</script>
document.getElementById("my-add-button").click();
The code above links to the code below that adds the items from to my knowledge
$('.jcart').submit(function(e) {
add($(this));
e.preventDefault();
});
Thank you in advance for any help or suggestions
If i understand correctly, you increase some value of cart in PHP and than want to update quantity on page without refreshing page.
I made little JSFiddle: http://jsfiddle.net/7SbBA/
Basically use ajax:
$.ajax({
url: 'example.com',
data: /* pass product id here */
success: function(){
/* update quantity you want */
}
});
There is some html change too.
UPDATE
If you want updated total values on page load, just £<span class='amount'><?php echo $product['quantity'] * $product['price'] ?></span> and there is no need to use jquery/js for that. But if you still want dynamically update on window load, i updated my JSFiddle v.2
I have the following piece of code which deletes a document when the delete image is clicked
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="image" name="submit" src="images/delete.gif" alt="DELETE">
</form>
</tr>
Now I want to modify this and change the image to a button and put some basic JS validation so that it asks a confirmation message before deleting.
I have this as my code so far
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="button" onClick ="return confirm('Are you sure you want to delete the current project activities document')" name="submit" Value="Delete">
</form>
</tr>
But there is no change/effect in the page when I click this button, Can anyone point out whats happening here? Thanks
Add id="form" to <form>, then
<input type="button" onClick ="if(confirm('Are you sure you want to delete the current project activities document')==1){document.getElementById('form').submit();}" name="submit" Value="Delete">
That's where the rest of the JavaScript comes in... or an AJAX call to a PHP file to perform that task for you. May I give you a couple of pointers? First, give that button element and ID, say id="deleter". Then, to clean up your inline markup, add this eventListener in your <head> section:
<script>
var d = document.getElementById('deleter');
var f = document.getElementByName('delete_attachment_form');
d.onClick = function() {
var yn = confirm('Are you sure you want to delete the current project activities document?');
// Note that the 'confirm' dialog is an obsolete construct
if (yn) {
f.submit();
}
};
</script>
HTML Markup
<tr>To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="button" id="deleter" name="deleter" Value="Delete">
</form>
</tr>
I am using woo composite products, and for component product variations, the maximum quantity is set to 1, so the quantity input field is automatically hidden.
However, the - / + buttons are still there! This looks bad. (not an issue for simple products)
This is the html on the page
<div class="quantity buttons_added" style="">
<input type="button" value="-" class="minus">
<input class="qty" type="hidden" name="quantity" value="1" min="1" max="1">
<input type="button" value="+" class="plus"></div>
and i think this might be the relevant code in the plugin
<div class="single_variation"></div>
<div class="variations_button">
<input type="hidden" name="variation_id" value="" />
<?php
if ( $quantity_min == $quantity_max ) {
if ( $quantity_min == 1 ) {
?>
<div class="quantity" style="display:none;">
<input class="qty" type="hidden" name="quantity" value="1" />
</div>
<?php
} else {
?>
<div class="quantity"><input type="number" class="qty input-text text" disabled="disabled" name="quantity" min="<?php echo $quantity_min; ?>" max="<?php echo $quantity_min; ?>" value="<?php echo $quantity_min; ?>" /></div>
<?php
}
} else
// min-max taken care of by variations code
woocommerce_quantity_input( array( 'input_value' => $quantity_min ), $product );
?>
From looking around, I think the solution is to include some custom javascript code, but this is far beyond me. Any help for a Noob would be greatly appreciated.
In your css, adding the following rule should hide the +/- option
.minus, .plus
{
display:none;
}
OR to remove the quantity box and the +/- options you can do it by:
Edit your product
Scroll to the "Product Data" section
Click "Inventory"
Tick the checkbox that says "Sold Individually"
To confirm, setting it to sold individually does do the trick, but if you are using product addons, it has an undesirable side effect of not displaying the the addon totals, etc. The selected addons are included when you add them to your cart though, they just don't display as they normally would on the product page.
A workaround that I found that works is to use CSS that is specific to the composite form. Each composite has a unique ID. So if you are looking to do this only on specific ones, this will work. Example below...
For pre-WooCommerce 2.3:
#composite_form_8594 .quantity, #composite_form_7073 .quantity {display:none!important;}
For WooCommerce 2.3+:
#composite_data_8594 .quantity, #composite_data_7073 .quantity {display:none!important;}