I have a CMS that I've built allowing users to create a 'Page' made up of different panels each with their own content. I've made this work so that a user can create a page with one panel and one textarea of content but I still can't figure out how to do this for multiple panels/content.
Currently, if the page load gets the value of '1' from the URL value, it loads html templates with a fullwidth div and halfwidth div. I'm trying to set the panel type of each with hidden input types and they each have their own tinymce text area.
<?php if($value == 1){?>
<form method="post">
<div class="col-lg-12 fullWidth" id="full">
<input type="hidden" name="fullWidth" value="">
<div class="fullContent" style="background-color: white; height: 100%;">
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText">Some Text Here</textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
<div class="col-lg-12 halfWidth" id="half">
<input type="hidden" name="halfWidth" value="">
<div class="halfContent" style="background-color: white; height: 100%;">
<form id="form-data4" method="post">
<textarea class="original" id="mytextarea4" name="halfText">Some Text There</textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
</form>
<?php } ?>
Once this is done and they go to save page, there is another form that lets them set the title of the page and it also gets the page type ($value from above)
<form action="addPage.php" method="post">
<input type="hidden" name="pageType" value="<?php echo $value;?>">//This comes from the url value
<input class="form-control" id="addTitle" name="addTitle">
<input type="submit" name="Save Page">
The problem is, when I now call my addPage.php script to insert the records, I don't know how to pass the values correctly so that I add one page record (the $value for page_type_id and the Title) but then insert 2 content and panel records for the text areas.
Here's my expected insert in the case of the above code:
pages
ID | Title | page_type_id
1 | TitleNew | 1 /*this comes from $value*/
content
ID | Content
1 | Some Text Here
2 | Some Text There
panels
ID | panel_type_ID | page_id | content_id
1 | 1 | 1 | 1
2 | 2 | 1 | 2
This works for one insert in all 3 tables but if I can set multiple panel types to each div, how can I modify this to still insert the one page record but successfully account for multiple panel and content?
Here's the add page script
//Insert Page
$title = $_POST['addTitle'];
$page_type = $_POST['pageType'];
$addpage = "
INSERT INTO pages (title, page_type_id)
VALUES ('$title','$page_type');
";
$mysqlConn->query($addpage)
$page_id = $mysqlConn->insert_id;
//Insert Content
$content = $_POST['page_content'];
$addContent = "
INSERT INTO content(content)
VALUES('$content');
";
$mysqlConn->query($addContent);
$cont_id = $mysqlConn->insert_id;
//Insert panel(s)
$panelID = $_POST['panelType'];
$addPanel = "
INSERT INTO panels(panel_type_id, page_id, cont_id)
VALUES ('$panelID', '$page_id', '$cont_id');
";
$mysqlConn->query($addPanel);
You're manage it wrong, it should be:
pages
ID | Title | page_type_id
1 | TitleNew | 1 /*this comes from $value*/
content
ID | Content
1 | Some Text Here
2 | Some Text There
panels
ID | panel_type_ID | page_id | content_id
1 | 1,2 | 1 | 1,2
I can't find panelType in your form but, You should detect the panels Ids which user has chosen and then send it to php, Example:
if user choose the panel (1) and the panel (2) your script should wrote it here:
<input type="hidden" value="1,2">
We separate the panels Ids with a comma because we will need it when we get the data from the database.
How to get the panels IDs:
After we get the data from database it will be like 1,2 and this won't work for you so how to get them in array?
It's so simple just do this:
<?php
$string = "1,2";
$get = explode(',', $string ); // explode with ,
?>
Now, You have your array which will look like this:
Array ( [0] => 1 [1] => 2 )
how to use it?
You can use a loop:
<?php
$string = "1,2";
$get = explode(',', $string ); // explode with and
$count = count($get);
for ($i=0; $i < $count; $i++) {
$PaN = $get[$i];
/*Some code....*/
}
?>
I hope i understand you.
I guess your problem is handling multiple data collection. use [] in your element names to collect more than one data of the same collection.
<textarea class="original" id="mytextarea3" name="fullText[]">Some Text Here</textarea>
and while saving you get an array from fullText . Loop through that and save it.
if you have multiple documents in the same form. use the key in the first loop to access the respective data from the other elements array.
Hope it helps!!
Related
I'm currently working on an eCommerce app where I am working with a SESSION cart. In this cart, I have two items possible to sell. If I add the first item, it adds signifies the item correctly for my records, however if the second item is the only item selected, it's value takes the place of the the assignment I have for the first value.
To give a better understanding of what I mean, here is some code:
{
foreach($_SESSION["shopping_cart"] as $keys => $values)
{
$output .= '
<div class="customer_2_item_line">
<div class="customer_2_item_line_cell"><img src="image/'.$values['product_code'].'.jpg"><span class="customer_2_line_cell_amt">'.$values['product_quantity'].'</span></div>
<div class="customer_2_item_line_cell"><p>ET Spork</p><p><span></span><span class="customer_2_line_cell_name">'.$values['product_name'].'</span<</p></div>
<div class="customer_2_item_line_cell"><p><span>$</span><span class="customer_2_line_cell_total">'.$values['product_total'].'</span></p></div>
</div>
<hr>
';
$total_price = number_format($total_price + ($values['product_quantity'] * $values['product_price']), 2);
$total_item = $total_item + $values['product_quantity'];
$total_price_shipping = number_format($total_price + $shipping_price, 2);
$qty[] = $values['product_quantity'];
}
$output .= '
<input type="text" id="subtotal_cost" name="subtotal_cost" value='.$total_price.'>
<input type="text" id="shipping_total_cost" name="shipping_total_cost" value='.$shipping_price.'>
<input type="text" id="total_cost" name="total_cost" value='.$total_price_shipping.'>
<input type="hidden" id="item_qty1" name="item_qty1" value='.$qty[0].'>
<input type="hidden" id="item_qty2" name="item_qty2" value='.$qty[1].'>
<div id="customer_2_subtotal_shipping">
<div class="customer_2_ss_line"><p>Subtotal</p><p><span>$</span><span></span></p></div>
<div class="customer_2_ss_line"><p>Shipping</p><p><span>$</span><span></span></p></div>
</div>
<hr>
<div id="customer_2_total">
<p>Total</p>
<p><span>USD</span><span><span>$</span><span></span></span></p>
</div>
';
}
I have my $qty[] array for each cart item, but it only works if both items are in the cart. I can't figure out how to organize them so that each qty has a unique value to its product during the loop so that no matter which item is being ordered, it is assigned to it's respective product name and not by the order in which it is being purchased.
The problem is that if there is no second item being added to the cart, it only reads the first value, and then my cart gets mismatched to my fixed 'name' values to 'quantity' values of whichever quantity there is to retrieve or comes first.
Any help would be greatly appreciated.
Why don't you add a key to the $qty-array?
// ...
$qty[ $key ] = $values['product_quantity'];
// ...
I'm trying to prep forms with multiple (dynamic) inputs to insert correctly via ajax.
Currently, using my php loop, I have 4 div/forms. Each form has a starting input, and upon clicking the moreItems_add button, it dynamically adds another input, up to 10 per form/div.
This works fine. But I added a variable and console.log to log the value of my hidden input though, which should be getting an ID (<?php echo $ticker['ticker'] ?>) for each form, but it's currently only logging '1'. So when I clicked the button in the first form it looked right, but when I click the others, it's still 1. I think this is because I don't have a unique ID on the hidden input?
How can I change the way I'm keeping track of the hidden input so that I can make an ajax call that will only make an insert on the inputs of the given form WITH the correct ticker ID?
<?php foreach($tickerDisplays as $key => $ticker):?>
<form id="Items" method="post">
<label id="ItemLabel">Item 1: </label>
<input type="text" name="Items[]"><br/>
<button type="button" class="moreItems_add">+</button>
<input type="hidden" name="tickerID" id="tickerID" value="<?php echo $ticker['ticker'] ?>">
<input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>
<?php endforeach;?>
<script type="text/javascript">
$("button.moreItems_add").on("click", function(e) {
var tickerID = $('#tickerID').val();
var numItems = $("input[type='text']", $(this).closest("form")).length;
if (numItems < 10) {
var html = '<label class="ItemLabel">Item ' + (numItems + 1) + ': </label>';
html += '<input type="text" name="Items[]"/><br/>';
$(this).before(html);
console.log(tickerID);
}
});
</script>
To generate a unique id attribute you should append your ticker value from php to... the id attribute. Or if not the ticker value, at least something that makes it unique. But you don't really need to.
Since all your elements are wrapped in a form tag and are at the same level, you can find to which ticker corresponds the clicked button by finding the hidden input among its siblings:
var tickerID = $(this).siblings('input[name="tickerID"]').val();
I've Built a CMS that allows the user to save pages with 'panels' which are basically divs containing their own content. It's using TinyMCE within the div to create content, and I've gotten it working but only with one main panel and I'm trying to figure out ways to modify this to save multiple panels.
My if statement grabs $value from the URL value and if it's 1 it uses the fullwidth html template
<?php if($value == 1){?>
<?php $panelType = 1;?>
<div class="col-lg-12 fullWidth" id="full">
<div class="fullContent" style="background-color: white; height: 100%;">
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText"></textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
<?php } ?>
I then have javascript that saves the content from the text area as the value of a hidden input in my 'Save Page' form that calls the mysql insert.
<script type="text/javascript">
function content() {
var content = tinyMCE.get('mytextarea3').getContent();
$("#new").val(content);
}
</script>
<form action="addPage.php" method="post">
<input type="hidden" name="pageType" value="<?php echo $value;?>">//This comes from the url value
<input type="hidden" name="panelType" value="<?php echo $panelType;?>">//How would I loop this and the next hiddent input
<input type="hidden" id="new" name="page_content" value=""> //The javascript saves the textarea content as this value
<input class="form-control" id="addTitle" name="addTitle">
<input type="submit" name="Save Page">
My addpage.php script takes the form and inserts a record into the pages table, gets that insert ID, inserts a record to the content table, gets that ID and then lastly inserts into the panels table using the retrieved page and content IDs (this insert script is at the bottom). Up to this point it works flawlessly.
My problem is adding in multiple panel types. So let's say I modify my html template to now set panelType based on each DIV and have my javascript work on both textareas
<?php if($value == 1){?>
<div class="col-lg-12 fullWidth" id="full">
<?php $panelType = 1;?>
<div class="fullContent" style="background-color: white; height: 100%;">
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText">Some Text Here</textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
<div class="col-lg-12 halfWidth" id="half">
<?php $panelType = 2;?>
<div class="halfContent" style="background-color: white; height: 100%;">
<form id="form-data4" method="post">
<textarea class="original" id="mytextarea4" name="halfText">Some Text There</textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
<?php } ?>
<script type="text/javascript">
function content() {
var content = tinyMCE.get('mytextarea3').getContent();
$("#new").val(content);
}
</script>
<script type="text/javascript">
function content() {
var content = tinyMCE.get('mytextarea4').getContent();
$("#new").val(content);
}
</script>
So this won't work because I'm trying to set both textarea content as the value for #new. But even if I had 2 hidden input fields it wouldn't insert into the database correctly. So I don't know if I would be able to loop this as a hidden type for my insert or if there's another way.
Based on my insert script, the records I would be expecting from above html template would be
pages
ID | Title | page_type_id
1 | TitleNew | 1 /*this comes from $value*/
content
ID | Content
1 | Some Text Here
2 | Some Text There
panels
ID | panel_type_ID | page_id | content_id
1 | 1 | 1 | 1
2 | 2 | 1 | 2
This works for one insert in all 3 tables but if I can set multiple panel types to each div, how can I modify this to still insert the one page record but successfully account for multiple panel and content?
Here's the add page script
//Insert Page
$title = $_POST['addTitle'];
$page_type = $_POST['pageType'];
$addpage = "
INSERT INTO pages (title, page_type_id)
VALUES ('$title','$page_type');
";
$mysqlConn->query($addpage)
$page_id = $mysqlConn->insert_id;
//Insert Content
$content = $_POST['page_content'];
$addContent = "
INSERT INTO content(content)
VALUES('$content');
";
$mysqlConn->query($addContent);
$cont_id = $mysqlConn->insert_id;
//Insert panel(s)
$panelID = $_POST['panelType'];
$addPanel = "
INSERT INTO panels(panel_type_id, page_id, cont_id)
VALUES ('$panelID', '$page_id', '$cont_id');
";
$mysqlConn->query($addPanel);
I have dropdown list of items and a popup (used colorbox for opening popup) with a list of checkboxes. The popup is shown on click of '+Add/Edit'. Both the dropdown items and the checkboxes are generated in PHP from a complaint.csv file.
complaint.csv file
1,complaint type 1
2,complaint type 2
3,complaint type 3
etc...
PHP code
<label class="question-name" ng-class="{error:hasError()}">
<span class="ng-binding" ng-hide="question.nameHiddenOnMobile">
Chief Complaint
</span>
<span class="icon-required" ng-show="question.required"></span>
</label>
<select name="Language.PrimarySpoken" ng-hide="showAddAnswer"
ng-model="question.response.value"
ng-options="a.text as a.getText() for a in question.answers.items"
id="Language.PrimarySpoken" ng-value="a.text" class="input-wide"
ng-class="{error:hasError()}">
<option class="hidden" disabled="disabled" value=""></option>
<?php
$file_handle = fopen("../complaint.csv", "r");
while (!feof($file_handle)) {
$lines_of_text[] = fgetcsv($file_handle, 1024);
}
fclose($file_handle);
foreach ( $lines_of_text as $line_of_text):
?>
<option value="<?php print $line_of_text[1]; ?>">
<?php print $line_of_text[1]; ?></option>
<?php endforeach; ?>
</select>
<br/> <br/>
<label class="question-name" ng-class="{error:hasError()}">
<span class="ng-binding" ng-hide="question.nameHiddenOnMobile">
Additional Complaint
</span>
<span class="icon-required" ng-show="question.required"></span>
</label>
<div class="form-row added ng-binding" ng-bind-html="question.getText()" id="text" ></div>
<div class="form-row addlink ng-binding"
ng-bind-html="question.getText()">
<em><a class='inline' href="#inline_content">+ Add/Edit</a></em>
</div>
<div style='display:none'>
<div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
<?php
// Setup ---------------------------------------------------------------
define('numcols',4); // set the number of columns here
$csv = array_map('str_getcsv', file('../complaint.csv'));
$numcsv = count($csv);
$linespercol = floor($numcsv / numcols);
$remainder = ($numcsv % numcols);
// Setup ---------------------------------------------------------------
// The n-column table --------------------------------------------------
echo '<div class="table">'.PHP_EOL;
echo ' <div class="column">'.PHP_EOL;
$lines = 0;
$lpc = $linespercol;
if ($remainder>0) { $lpc++; $remainder--; }
foreach($csv as $item) {
$lines++;
if ($lines>$lpc) {
echo ' </div>' . PHP_EOL . '<div class="column">'.PHP_EOL;
$lines = 1;
$lpc = $linespercol;
if ($remainder>0) { $lpc++; $remainder--; }
}
echo ' <label class="checkbox" for="checkbox'.$item[0].'" style="font-size:20px;">
<input type="checkbox" name="complaint" value="'.$item[1].'" id="checkbox'.$item[0].'" data-toggle="checkbox">'
.$item[1].
'</label><br />';
}
echo ' </div>'.PHP_EOL;
echo '</div>'.PHP_EOL;
// The n-column table --------------------------------------------------
?>
<br/>
<input type="submit" name="submit" id="update"
class="button button-orange"
style="width: 90px; margin-top: 450px; margin-left:-1062px;"
value="Update">
<input type="submit" name="cancel" id="cancel"
class="button button-orange"
style="width: 90px; background-color:#36606e;"
value="Cancel">
</form>
</div>
</div>
Question:
If a Main complaint item is select then that same complaint does not appear in Additional Complaint list (i.e. if 'complaint type 1' is selected for Main complaint, 'complaint type 1' does not display on Additional Complaint list)
How should I get that using one complaint.csv file like checking for the selected item, and avoid it when displaying the list e.g on select 'complaint type 1', the data from complaint.csv file will be display on popup checkbox list except 'complaint type 1' which is selected?
There is empty space generating if we remove the element. I don't want the empty space of removed item in checkbox list. Empty space means if 'complaint type 2' is removed then there empty space creates between 'complaint type 1' and 'complaint type 3'.
Is there any way to have AJAX for this situation like when the item is selected AJAX will call and it will remove the item from the checkbox list which is selected and then load the new items list except the selected one. (right now both list are loading at a same time on page load insted of that using AJAX the dropdown list should load on page load and checkbox list on click '+Add/Edit' button avoiding selected item.) Thus might be the empty space will not be there.
How this should be done using AJAX?
OR
Can anyone please suggest any solution with PHP or JS to get both requirements?
In your code, make sure the select dropdown value is $line_of_text[0] e.g. 1, 2, 3 etc.
Now add onChange="hideSpaceAndComplain(this.value)" on the select element.
Copy the following javascript function as is
function hideSpaceAndComplain(id){
//Hide selected one
$("#popup_form").find('label').show();
//Hide selected one
$('input[value=' + id + ']').parents('label').hide();
//Now rearrange all the visible label in columns
var visibleLabels = $("#popup_form").find('label:visible');
visibleLabels.each(function(i,v){
var column = Math.floor(i/4); // 4 being the number of column
$(this).appendTo($("#popup_form").find('.column:eq('+column+')'));
});
}
This is doing both hiding the element which is selected and then re arranging the labels in column to remove one extra space.
Since the logic you describe depends on what the user does in the browser, what you functionality does must be done in the browser, that means in Javascript.
According to the tags of the question you are using JQuery, so here are some pointers on how to do it with JQuery. First you have to attach an event handler to the dropdown to know when the user changes its value:
$('select').on('change', function() {
//Put here what to do when the value of the dropdown changes.
}
In that function, you want to do two things:
Un-hide the complaint that you may have hidden previously
Hide the main complaint
To do so, write something like this in the event handler:
//Un-hide everything
$('label').show();
//Hide selected one
$('input[value=' + $(this).val() + ']').parent().hide();
You can see a working example in this JSFiddle.
Hope this helps.
Note that I see in your code that you uses Angular, so you may want to use this instead. But I am not sure why you generate the select options both with Angular and PHP, so I am assuming this is some copy-pasted code that you are not using.
On my site I have a main search (powered by Google, placed throughout the site) and I have now created a second search (on its own page, which searches my DB for images based on user input text) which is a totally separate search to the google one.
What I want to do -
I want both Search forms to share a single text input field, but allow the user to choose which search to use (Google or Images Only) via radiobutton.
So we'd have:
[search input field][go] (o)Use Google (o)Image Search only
I'm no coder but can hack enough to just about get by, it just takes me a day or two to figure out and get working.
What I need and would save me a great deal of time, as I'm stumped on how to proceed with this or if it is even possible! If someone could tell me A) If it's possible, and B) A few pointers if it is. For instance I'm guessing it will probably need a bit of JavaScript to make it possible?
Any pointers would be appreciated, then I can see what I can do.
All the best,
Chris
// My Stand-alone Image Search Page ////////////////////////////////
<form method="post" action="imagesearch?go" id="search-form">
<input type="text" name="name">
<input type="submit" name="submit" value="Search">
</form>
// code for above form //
if(isset($_POST['submit'])){
if(isset($_GET['go'])){
if(preg_match("/^[ a-zA-Z]+/", $_POST['name'])){
$name=$_POST['name'];
$sql="SELECT ID FROM ImageTable WHERE Name LIKE '%" . $name . "%' Order by Date Desc LIMIT 50";
//-run the query against the mysql query function
$result=mysql_query($sql);
// Create while loop and loop through result set//
$content .= ' <p><div id="wrapper">';
while($row=mysql_fetch_array($result)){
$id=$row['ID'];
$img = new Image($id);
// Format results//
$content .= '<div id="imgrt"><img src="/img/M/'.$img->ID.'.jpg" class="searchimg"><br>'.$img->Name.'';
$content .= '</div>';
}
$content .= '';$content .= '</div>';
}
else{
$content .= ' <p>Please enter a search query</p>';
}
}
}
// End of Stand-alone image search page /////////////////////////
---------------------------------------------------------------------------
// My sites main Google powered Search
<form action="http://www.example.com/gsresults" id="cse-search-box" class="searchmain">
<input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXX" />
<input type="hidden" name="cof" value="FORID:XX" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" class="mainsearch">
<input type="submit" name="sa" value="Go" class="mainsearchbutton"/>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang="></script>
OK so here we go. If you plonk this in an empty html file you can see it in action (Tried to make a jsfiddle but didnt work for some reason). What this does is set an "active" id on the selected combo option, and when you click the submit button it grabs the value of the combo option with that id, and goes to the page of that value. so if you click google and then the button you go to google.html, and same goes for image, image.html. If you want some more specifics you can ask, but thats the main logic there.
<script>
function replaceActive(obj) {
var activeElm = document.getElementById("active");
activeElm.id = activeElm.id.replace("active", "");
obj.id = "active";
}
function formFunction(obj) {
obj.action = document.getElementById("active").value + ".html";
}
</script>
<form action="#" onsubmit="return formFunction(this);" method="post">
<input type="text" />
<select>
<option value="google" id="active" onclick="replaceActive(this);">Google</option>
<option value="image" onclick="replaceActive(this);">Images</option>
</select>
<input type="submit" />
</form>
Basically you can change that "formFunction()" function's code and and use "document.getElementById("active").value" to do what ever you wanted to do.