I made a form where user posts just links and text. No images and videos. I also did some kind of validations from server side in PHP. I also did very basic SQL INSERT for storing data in database. What I want is, that whenever user posts, it is always displayed on a website with different colors from database. I Googled it but got nothing. Any idea, or help on where to start?
Simple html form:
<form action="checkbox1.php" method="post">
<input name="name" id="name" type="text"/><br/>
<input type="text" id="name2" name="name2"><br/>
<input type="checkbox" id="checkbox" name="checkbox"><br/>
<input type="submit" id="submit" name="submit">
</form>
.postHolder:nth-child(5n+0) .post-text {
background: #8dc63f;
}
.postHolder:nth-child(5n+1) .post-text {
background: #009688;
}
.postHolder:nth-child(5n+2) .post-text {
background: #3f51b5;
}
.postHolder:nth-child(5n+3) .post-text {
background: #f44336;
}
.postHolder:nth-child(5n+4) .post-text {
background: #607d8b;
}
This example will work in your case, .postHolder is the class of the dive which will repeat for every post, and .post-text is class where you actually want to apply CSS, I have applied background color you can add whatever you want.
First of all, do you have predefined colors in the database?
if yes! Then you will need to send color as a parameter from the database using get or post method with your post.
Then you need to use that color and apply using javascript jquery or angular whatever your frontend is.
If you have colors in your stylesheet then you need to create predefined classes with different colors; apply them to your post dynamically.
But the second option is a bit clumsy and complex, always you will need to take which was last class you applied and then apply next class.
The third option is to use nth-child but this method has some limitations like you need to write a class for every child element.
Related
I want to learn how to display combined images with help of checkboxes. Lets say I have three images, the first one is a car, second one is the same car with new wheels on the car, third is is the same car but with tinted windows, fourth one is the car with both assets combined. I always display the original image of the car on the website higher and new one(tuned one) lower, but lets say if I click the box for new wheels it shows the second image or if I click tinted windows box, third image appears. The images are prepared with photoshop and stored in folder, simple stuff.
<form action="#" method="post">
<input type="checkbox" name="option" value="Wheels">Wheels</input>
<input type="checkbox" name="option" value="Tint">Windows</input>
<input type="submit" name="submit" value="Submit"/>
</form>
<?php
if (isset($_POST['option'])){
// Display.
}
?>
I made a simple form so far and lets say as I said if I check Wheels, the wheels appear on the car, I uncheck it they disappear. But how could I do that if I check both boxes, the fourth image appear? I would like a solution that if I had more different check boxes, I would not need to code a lot of statements
I am not asking for a code, but just ideas how to do it, because my idea is to hard code many if statements.
EDIT: I am sorry if this is maybe a duplicate, but I strongly want to implement this using PHP, because lets say a person might click n different combinations of how the car should look if there are more than 20 checkboxes and he wants to add different components to the car.
You say that you want to do this using PHP.
As the comments state, and my duplicate flag indicates, this is not necessary.
You can look at the GD library about layering images, skip CSS completely, and just link to that image.
Another PHP based approach is this:
<!Doctype>
<html>
<head>
<style>
.base-car
{
position: relative;
top: 0;
left: 0;
}
.additions
{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="checkbox" name="option[]" value="Wheels">Wheels</input>
<input type="checkbox" name="option[]" value="Tint">Windows</input>
<input type="submit" name="submit" value="Submit"/>
</form>
<img src="car.jpg" class="base-car">
<?php
$option = filter_input_array (INPUT_POST,$filter_args); //see: http://php.net/manual/en/function.filter-input-array.php
foreach($option){
echo "<img src=\"$option.png\" class=\"additions\">";
}
?>
This takes your input, and create an <img> element for each option, with the CSS class that places it on top of the base car image.
This is just as easy to do in javascript
Disadvantage of PHP:
Cannot update without resending page
Extra overhead in whole page being sent every time the user updates
More network traffic
You are sending (in your example) potentially unfiltered data to your server.
Advantages of Javascript solution:
Real-time updates
Less network traffic
Only the image requests are sent to your server.
Other things to take in to account:
Do any of the images have mutual exclusivity (ie two different types of tyres)
Does the order of the options matter in relation to the layers?
Are the images the same size?
try this code:-
<form action="#" method="post">
<input type="checkbox" name="option[]" value="Wheels">Wheels</input>
<input type="checkbox" name="option[]" value="Tint">Windows</input>
<input type="submit" name="submit" value="Submit"/>
</form>
<?php
if (isset($_POST['submit'])){
foreach ($_POST['option'] as $item) {
echo '<img src="assets/images/'.$item.'.png" alt="'.$item.'" />';
};
}
I have a form table with checkboxes. I want the user to check whichever url (element) they want to delete, press a button which then calls a "delete.php" file which deletes that record in mysql.
What I am trouble finding out how to do is to call the delete.php file with a button outside of the form. I know that you would typically use a submit button inside the form but in this situation, I am exploring whether it is possible to do it with a button that is outside it.
An image is attached to illustrate why I want to do that. The url menu on the bottom is called by a function because I want it to be modular. So I think the "Delete BM" question needs to be able to action the deletion of the checked checkbox.
I have googled a variety of search cases which dont really answer my question:
How to send checkbox state through form in a table
Search "php how to call php file outside form"
Search "how to call php file without submit button"
Call php file without using form action
Submit without submit button
Use following code for submitting your form.
and use search keyword in google "submit form without submit button in php".
<form id="jsform" action="whatever you want">
// input fields
</form>
<script type="text/javascript">
document.getElementById('jsform').submit();
</script>
For Your Problem. Below are Sample code
<input type='checkbox' class='test' name='test' value='1'>
<input type='checkbox' class='test' name='test' value='2'>
<input type='checkbox' class='test' name='test' value='3'>
<input type='checkbox' class='test' name='test' value='4'>
is somthing your checkboxes then following is the script
<script>
$(function(){
$(".test").click(function(){
var checkBoxValue = $(this).val(); // value of checkbox
$.ajax(
{
url: "" // url of page where delete funcnality is written
// and id of field
})
.done(function(data)
{
// success
});
});
});
</script>
In the past I have come across this sort of issue, of wanting a submit button outside of a form for layout/presentation reasons.
Having given it some thought and reading around, I learned there were some very good reasons to avoid doing so;
Changing the default behaviours of the browser is generally a bad idea, you make extra work for yourself and in the end is likely to complicate things and often also lead to confusing users. (for example: what happens if user clicks enter, will it still submit the form?)
Users that do not have up to date javascript or do not have it switched on, will not be able to use your form / site.
You can achieve what you want and still use the standard html submit button. Using CSS to make it appear as a text link, great example;
How to make a submit button display as a link?
In your example I personally would just have the submit button appear as a button (styled to match sites design) directly under the checkboxes, separate from your menu below. As this makes the most sense to me, and would save you some work as you wouldn't need to fiddle with your menu function.
However if you wanted to achieve exactly as you set out, you could pass the button (html string) as a paramenter into your function so that it can be entered into the menu list, then return all the menu html string and print it inside your form;
<form>
<input type="checkbox" name="1" /><br />
<input type="checkbox" name="2" /><br />
<input type="checkbox" name="3" /><br />
<?php
$buttonHtml = '<input type="submit" name="delete_bm" value="delete bm" class="submitLink" />';
echo navMenu($buttonHtml);
?>
</form>
Now the submit tag is within the form tag (and will behave as as intended), it is simply a case of using CSS to style these and any other elements to give you the presentation that you desired (might need to remove padding, margin etc. from form element).
.submitLink {
font: inherit;
background-color: transparent;
text-decoration: underline;
border: none;
color: blue;
cursor: pointer;
}
.submitLink:focus {
outline: none;
}
form{
padding: 0;
margin: 0;
}
The big upside is that now you do not need any un-necessary javascript, giving maximum accessibility and maintaining the functionality that users expect.
Also feels less complicated to me and that it is less likely to need updating.
Side note: if your form allows users to delete multiple bookmarks at once (seems like it should) you might want the text on the button to read; delete bookmark(s) Hope you had considered that ;)
You can use jQuery AJAX for this.
Because, calling PHP script with form submit will cause total page refresh.
you need to just delete the selected checkbox row and delete the entry from database.
I will explain the pseudo logic for it.
On click of the link Delete BM, call javascript for AJAX.
First open a confirm dialog.
Through AJAX, pass the id to be deleted to backend PHP file.
In PHP file, write the code to delete the record.
If record gets deleted, echo success there else failure.
If in AJAX, we get results success, delete the respective rows.
jQuery $.ajax()
I am changing the current theme of my blog and I wish to add a class to all my input fields.
I am not well versed with regex codes, so I end up in a lot of trouble whenever I need to make things like these happen.
type="submit"
I want to add class btn needs to be added to <input type="submit">
Old Code
<input type="submit" id="some_id" name="something" class="some_class" value="some_value" />
New Code
<input type="submit" id="some_id" name="something" class="btn some_class" value="some_value" />
and
Similarly, I want the class input to be added to <input type="text"> and <input type="textarea">
Old Code
<input type="text" id="some_id" name="something" class="some_class" value="some_value" />
<textarea id="some_id" name="something" class="some_class" value="some_value" />
New Code
<input type="text" id="some_id" name="something" class="input some_class" value="some_value" />
<textarea id="some_id" name="something" class="input some_class" value="some_value" />
Given your constraints, the cleanest way you can do what you want with PHP and stay within the Wordpress framework is to use DOMDocument. While it's POSSIBLE to rely on regular expressions, it's very sloppy and you can run into more problems than what you started with.
Place this in your functions.php file, and it should do everything you need:
add_filter('the_content', 'add_text_input_classes', 20);
function add_text_input_classes($content)
{
$doc = new DOMDocument(); //Instantiate DOMDocument
$doc->loadHTML($content); //Load the Post/Page Content as HTML
$textareas = $doc->getElementsByTagName('textarea'); //Find all Textareas
$inputs = $doc->getElementsByTagName('input'); //Find all Inputs
foreach($textareas as $textarea)
{
append_attr_to_element($textarea, 'class', 'input');
}
foreach($inputs as $input)
{
$setClass = false;
if($input->getAttribute('type') === 'submit') //Is the input of type submit?
$setClass = 'btn';
else if($input->getAttribute('type') === 'text') //Is the input of type text?
$setClass = 'input';
if($setClass)
append_attr_to_element($input, 'class', $setClass);
}
return $doc->saveHTML(); //Return modified content as string
}
function append_attr_to_element(&$element, $attr, $value)
{
if($element->hasAttribute($attr)) //If the element has the specified attribute
{
$attrs = explode(' ', $element->getAttribute($attr)); //Explode existing values
if(!in_array($value, $attrs))
$attrs[] = $value; //Append the new value
$attrs = array_map('trim', array_filter($attrs)); //Clean existing values
$element->setAttribute($attr, implode(' ', $attrs)); //Set cleaned attribute
}
else
$element->setAttribute($attr, $value); //Set attribute
}
If I understand your question correctly, you want to dynamically apply classes to input elements. What you need to use is a filter, or a series of filters.
First let me explain how filters work. Filters work with 'hooks' just like Actions. See the Actions and Filters codex page for details.
It sounds like you want to use hooks to add this btn class without needing to manually change each input. Thats not how hooks work. To use hooks for this you would use filters, which would mean you would need to write...
<input type="submit" class="<?php echo apply_filters('input_class', 'some-default-class'); ?>" />
You would then be able to add a filter to the 'input_class' tag.
add_filter('input_class', 'btn_class_filter');
function btn_class_filter($default){
return 'btn';
}
Whatever your function returns will replace the default value - in this case 'some-default-class' will be replaced with 'btn'.
However none of this eliminates the need to add code to each input field you want to add the class. The only way to do that, would be through javascript, most easily with jQuery. I know you said you didn't want to use jQuery, but if you dont want to edit markup, thats your only option.
The simplest thing to do would be to just add the btn class manually - if its a matter of access, the jQuery will be the way to go.
If you're just applying blanket style rules to these elements and don't care about IE6 support, why not just use attribute selectors in your CSS, eg
.btn, input[type="submit"] {
/* styles for buttons */
}
.input, input[type="text"], textarea {
/* styles for text inputs and textareas */
}
FYI, there is no <input type="textarea">, just <textarea>
To manipulate markup using a hook would be time consuming and clumsy. You'd need to grab all template output as well as plugin generated markup. I'd recommend not attempting this, Wordpress code is messy enough.
I answered above, and I would simply edit that one but its already received votes, and this answer will be significantly different.
After some comments in my initial answer, I realized that the input fields #Aniket wants to change are not within the content, they are elements throughout the site, such as in widgets, and in the templates themselves.
There is no way through hooks, actions, or filters, to modify the code thats written within the theme templates. Filters can modify strings and values, but only if there is a hook already available to do so. You don't have this, so its not possible. Your only option for adding this class dynamically without editing the input fields is to use javascript. This however is pointless for two reasons.
It would be simpler to just edit the input fields themselves
You dont need to add these classes, because CSS lets you select those elements in other ways.
You dont need to add an 'input' class to input fields.
CSS allows you to select elements by the tag name, so for example if you wanted to select any div, you dont need add a ".div" class to every div. You can select all div's by simply using "div" without any class or ID notation.
The same applies to textareas. You said you wanted to add an input class to textareas, text fields, and submit buttons, but thats not necessary. You can select all those using CSS attribute selectors. In this case, were going to specify input fields with the attribute submit, and text, as well as textarea elements stead of the two classes you wanted to add.
Instead of adding a .btn class to submit buttons, use...
input[type="submit"] {
/* Your styles */
}
And instead of adding an .input class to text fields and textareas use...
textarea, input[type="text"] {
/* Your styles */
}
Alternatively, if you just want all input fields, not just text areas and text fields use...
input {
/* Your styles */
}
Even if you did this though javascript, you would end up having to select these elements using this kind of CSS selection anyway, and any regex you could possibly do would be significantly more complicated than these simple lines.
I would like to create a simple form with form field/component duplication feature.
I searched all over the web. But i couldn't find any proper tutorial.
For example my form fields contains the following.
1. Title
2. Email
3a. Image Name
3b. Image Description
3c. Image file
3a,3b,3c are a group here. So lets call it as "image group".
I would like to have a duplicate link below that group where my users click it and duplicate as many as they want.
Here is an example of what i'm asking.
Ps: I dont want to use jformer. Because it loads all the script and it taking to much time to load the page. Thats why i'm asking this question.
Thanks
All you need to do is write a JavaScript function that will append a new set of form elements to a given container. Something like this:
<div id="imageforms">
<fieldset id="firstimage">
<input type="text" name="imagenames[]" />
<textarea name="imagedescriptions[]"></textarea>
<input type="file" name="imagefiles[]" />
</fieldset>
</div>
add another image
And then you need the JavaScript function:
function addAdditionalImage() {
$('#imageforms').append($('#firstimage').clone());
}
The most interesting part here is the usage of name="xxx[]" which tells PHP to create an array from the form values.
since you tagged your question as being jquery related you should take a look at the clone method here: http://api.jquery.com/clone/
you need to group the fields that can be duplicated (let's say enclose them in a span) so that you would have a selector for all of them, clone and then use methods like append or prepend to "inject" the same elements again
you should use arrays for names if you want to process those values on the server side (input type="text" name="image_name[]")
I'm new to PHP but was wondering how this can be done.
I want to have submit an HTML form to another PHP page, but i dont want to use the ugly button. I want to use a link.
The thing is, i see many solutions out there that uses Java Script/Jquery etc to solve this, Does any one know how to do this with PHP code and HTML only?
Either use a <input type="submit"> and style it like a link with css, or create a Link with onclick:
Lol Rofl
If you want to make sure it works when JS is disabled, add something like this:
<noscript>
<input type="submit" ... />
</noscript>
This will show the button on computers where JS is disabled, the link above will still be shown. A workaround is to hide the link with CSS and then show it with JS..
You can do this way:
Submit
That will submit the form to whatever url set in the action attribute of the form.
I dont know how much Buttons are capable of being styled in a uniform way across all browser, but here is a start/proof of concept you can fiddle with, read: test, adjust, put into external CSS, and so on
<input type="submit" value="Send" style="
border:0;
background-color:transparent;
color: blue;
text-decoration:underline;
"/>
I found an alternative way of using plain text as a submit button, by trial and (a lot of) error. Put label tags around the submit button and the text, then define the button CSS so it doesn't display and the text CSS so it looks like a link.
Bear in mind that this is probably not good practise at all. :)
For example, this goes in the HTML form:
<label class="notalink"><input type="submit" value="Submit" class="invisibutton">
Click this text to submit</label>
And this goes in the CSS:
.invisibutton {
height: 1px;
width: 1px;
display: none;
vertical-align: text-bottom;
}
label {
color: (link-color)
text-decoration: (etc.)
}
And so on for the label definition so it looks like a standard link. The button is invisible but the text is clickable as its label, so it acts like a button.
The one downside is that it made my label text drop a pixel. If there were other words around the pseudo-link, I had to define the surrounding text class with a "vertical-align: bottom;" to make sure it didn't look weird.
Worked a charm, though. I successfully used it in a WordPress page to create fake links that kick off php scripts (by setting $_POST).