I am making an ecommerce website. So far, all are okay except where I want to delete items in the cart based on my cart database. The cart comprises of cart_id and menu_id.
Whenever I click the button (Delete), there is an error shown
"Object not found!
The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.
If you think this is a server error, please contact the webmaster.
Error 404
localhost
Apache/2.4.52 (Unix) OpenSSL/1.1.1m PHP/8.1.2 mod_perl/2.0.11 Perl/v5.32.1"
I can't figure out what was my mistake. Hope you can help me. Thanks
<div class="container-2">
<?php
include('cart.php');
if ($_SERVER['REQUEST_METHOD'] == "POST") {
if (isset($_POST['delete_submit'])) {
// call method addToCart
$Cart->deleteCart($_POST['menu_id']);
}
}
?>
<div class="row">
<div class="col h2 ">
<img src="https://logos-world.net/wp-content/uploads/2020/09/Starbucks-Emblem.png" class="Logo" alt="Logo" />
</div>
</div>
<div class="row" style="min-height: 20vh; border-top: 1px solid #dee2e6;">
<div class="col" style="text-align: left;">
<!-- Display Item From Database -->
<h3>Order here</h3>
<div class="row" style="padding: 1rem; background-color: #FFFFFF; border-radius: 10px; border: 1px solid #dfdfdf;">
<?php
foreach ($menu->getData('cart') as $item) :
$cart = $menu->getProduct($item['menu_id']);
$subTotal[] = array_map(function ($item) {
?>
<div class="col">
<div>
<img src="<?php echo $item['menu_image'] ?? "./menu-img/Warm Drinks/Brewed Coffee/Caffe ministo.jpeg"; ?>" style="width: 80%; border-radius: 25px;">
</div>
<div style="padding: 0.5rem;">
<h3>₱ <?php echo $item['menu_price'] ?? "0.00"; ?></h3>
</div>
</div>
<div class="col" style="margin: auto;">
<h5><?php echo $item['menu_name'] ?? "Unknown"; ?></h6><br>
</div>
<div class="col text-center" style="padding-top: 8%;">
<form action="post">
<input value="<?php echo $item['menu_id'] ?? 0; ?>" name="menu_id">
<?php
echo '<button type="submit" name="delete_submit" class="btn-default btn-lg"><p >Delete</p></button>';
?>
</form>
</div>
<!-- !cart item -->
<?php
return $item['menu_price'];
}, $cart);
endforeach;
?>
</div>
</div>
</div>
function:
public function deleteCart($menu_id = null, $table = "cart")
{
if ($menu_id != null) {
$result = $this->db->con->query("DELETE FROM {$table} WHERE menu_id={$menu_id}");
if ($result) {
header("Location:" . $_SERVER['PHP_SELF']);
}
return $result;
}
}
You have set the Form Element's action attribute to post. This attribute actually specifies the URL that the post data should be sent to. So instead of POSTing to the current URL, it's trying to send the data as a GET request (the default method) to http://yourdomain/post. What you need to do is set the method attribute instead and omit the action attribute.
<form method="post">
<button> Delete </button>
</form>
I have a select list of genders.
Code:
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>
I want to use an image in drop down list as drop-down-icon.jpeg.
I want to add a button in place of drop down icon.
How to do that?
In Firefox you can just add background image to option:
<select>
<option style="background-image:url(male.png);">male</option>
<option style="background-image:url(female.png);">female</option>
<option style="background-image:url(others.png);">others</option>
</select>
Better yet, you can separate HTML and CSS like that
HTML
<select id="gender">
<option>male</option>
<option>female</option>
<option>others</option>
</select>
CSS
select#gender option[value="male"] { background-image:url(male.png); }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }
In other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI, e.g. using Selectable.
From jQuery UI 1.11, Selectmenu widget is available, which is very close to what you want.
With countries, languages or currency you may use emojis.
Works with pretty much every browser/OS that supports the use of emojis.
select {
height: 50px;
line-height: 50px;
font-size: 12pt;
}
<select name="countries">
<option value="NL">🇳🇱 Netherlands</option>
<option value="DE">🇩🇪 Germany</option>
<option value="FR">🇫🇷 France</option>
<option value="ES">🇪🇸 Spain</option>
</select>
<br /><br />
<select name="currency">
<option value="EUR">🇪🇺 € EUR 💶</option>
<option value="GBP">🇬🇧 £ GBP 💷</option>
<option value="USD">🇺🇸 $ USD 💵</option>
<option value="YEN">🇯🇵 ¥ YEN 💴</option>
</select>
You can use iconselect.js; Icon/image select (combobox, dropdown)
Demo and download; http://bug7a.github.io/iconselect.js/
HTML usage;
<div id="my-icon-select"></div>
Javascript usage;
var iconSelect;
window.onload = function(){
iconSelect = new IconSelect("my-icon-select");
var icons = [];
icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});
iconSelect.refresh(icons);
};
My solution is to use Font Awesome and then add library icons as text, using the unicode in HTML directly.
You just need the Unicode value for whatever icon you want, and they are all found here: Font Awesome full list of icons, including unicode
Here is an example state filter:
<select name='state' style='height: 45px; font-family:Arial, Font Awesome;'>
<option value=''> All States</option>
<option value='enabled' style='color:green;'> Enabled</option>
<option value='paused' style='color:orange;'> Paused</option>
<option value='archived' style='color:red;'> Archived</option>
</select>
Note the font-family:Arial, FontAwesome; is required to be assigned in style for select like given in the example.
You already have several answers that suggest using JavaScript/jQuery. I am going to add an alternative that only uses HTML and CSS without any JS.
The basic idea is to use a set of radio buttons and labels (that will activate/deactivate the radio buttons), and with CSS control that only the label associated to the selected radio button will be displayed. If you want to allow selecting multiple values, you could achieve it by using checkboxes instead of radio buttons.
Here is an example. The code may be a bit messier (specially compared to the other solutions):
.select-sim {
width:200px;
height:22px;
line-height:22px;
vertical-align:middle;
position:relative;
background:white;
border:1px solid #ccc;
overflow:hidden;
}
.select-sim::after {
content:"▼";
font-size:0.5em;
font-family:arial;
position:absolute;
top:50%;
right:5px;
transform:translate(0, -50%);
}
.select-sim:hover::after {
content:"";
}
.select-sim:hover {
overflow:visible;
}
.select-sim:hover .options .option label {
display:inline-block;
}
.select-sim:hover .options {
background:white;
border:1px solid #ccc;
position:absolute;
top:-1px;
left:-1px;
width:100%;
height:88px;
overflow-y:scroll;
}
.select-sim .options .option {
overflow:hidden;
}
.select-sim:hover .options .option {
height:22px;
overflow:hidden;
}
.select-sim .options .option img {
vertical-align:middle;
}
.select-sim .options .option label {
display:none;
}
.select-sim .options .option input {
width:0;
height:0;
overflow:hidden;
margin:0;
padding:0;
float:left;
display:inline-block;
/* fix specific for Firefox */
position: absolute;
left: -10000px;
}
.select-sim .options .option input:checked + label {
display:block;
width:100%;
}
.select-sim:hover .options .option input + label {
display:block;
}
.select-sim:hover .options .option input:checked + label {
background:#fffff0;
}
<div class="select-sim" id="select-color">
<div class="options">
<div class="option">
<input type="radio" name="color" value="" id="color-" checked />
<label for="color-">
<img src="http://placehold.it/22/ffffff/ffffff" alt="" /> Select an option
</label>
</div>
<div class="option">
<input type="radio" name="color" value="red" id="color-red" />
<label for="color-red">
<img src="http://placehold.it/22/ff0000/ffffff" alt="" /> Red
</label>
</div>
<div class="option">
<input type="radio" name="color" value="green" id="color-green" />
<label for="color-green">
<img src="http://placehold.it/22/00ff00/ffffff" alt="" /> Green
</label>
</div>
<div class="option">
<input type="radio" name="color" value="blue" id="color-blue" />
<label for="color-blue">
<img src="http://placehold.it/22/0000ff/ffffff" alt="" /> Blue
</label>
</div>
<div class="option">
<input type="radio" name="color" value="yellow" id="color-yellow" />
<label for="color-yellow">
<img src="http://placehold.it/22/ffff00/ffffff" alt="" /> Yellow
</label>
</div>
<div class="option">
<input type="radio" name="color" value="pink" id="color-pink" />
<label for="color-pink">
<img src="http://placehold.it/22/ff00ff/ffffff" alt="" /> Pink
</label>
</div>
<div class="option">
<input type="radio" name="color" value="turquoise" id="color-turquoise" />
<label for="color-turquoise">
<img src="http://placehold.it/22/00ffff/ffffff" alt="" /> Turquoise
</label>
</div>
</div>
</div>
Another jQuery cross-browser solution for this problem is http://designwithpc.com/Plugins/ddSlick which is made for exactly this use.
This is using ms-Dropdown : https://github.com/marghoobsuleman/ms-Dropdown
Data resource is json. But you dont need to use json. If you want you can use with css.
Css example : https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples
Json Example : http://jsfiddle.net/tcibikci/w3rdhj4s/6
HTML
<div id="byjson"></div>
Script
<script>
var jsonData = [
{description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
{image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
{image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
{image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
{image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
{image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
{image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
];
$("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
}
</script>
For those wanting to display an icon, and accepting a "black and white" solution, one possibility is using character entities:
<select>
<option>100 €</option>
<option>89 £</option>
</select>
By extension, your icons can be stored in a custom font.
Here's an example using the font FontAwesome: https://jsfiddle.net/14606fv9/2/
https://jsfiddle.net/14606fv9/2/
One benefit is that it doesn't require any Javascript.
However, pay attention that loading the full font doesn't slow down the loading of your page.
Nota bene:
The solution of using a background image doesn't seem working anymore in Firefox (at least in version 57 "Quantum"):
<select>
<option style="background-image:url(euro.png);">100</option>
<option style="background-image:url(pound.png);">89</option>
</select>
For a two color image, you can use Fontello, and import any custom glyph you want to use. Just make your image in Illustrator, save to SVG, and drop it onto the Fontello site, then download your custom font ready to import. No JavaScript!
Alvaros JS free answer was a great start for me, and I really tried to get a truly JS-free answer that still delivered all the functionality expected of a Select with images, but sadly nesting forms was the down-fall. I'm posting two solutions here; my main solution that uses 1 line of JavaScript, and a totally JavaScript-free solution that won't work inside another form, but might be useful for nav menus.
Unfortunately there is a bit of repetition in the code, but when you think about what a Select does it makes sense. When you click on an option it copies that text to the selected area, i.e., clicking 1 of 4 options will not change the 4 options, but the top will now repeat the one you clicked. To do this with images would require JavaScript, orrrr... you duplicate the entries.
In my example we have a list of games (Products), which have versions. Each product may also have Expansions, which can also have versions. For each Product we give the user a list of each version if there's more than one, along with an image and version specific text.
<h4>#Model.Name</h4>
#if (Model.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="#Model.Versions[0].ImageUrl" alt="">#Model.Versions[0].VersionName (#Model.Versions[0].Year)
</div>
}
else
{
<h5>Select the version</h5>
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
#foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<input type="radio" name="game" id="game-#version.ProductId-#version.VersionId" #if (version == Model.Versions.First()) { #Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="#version.ImageUrl" alt="">#version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button"></label>
<div class="rich-select-options">
#foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="game-#version.ProductId-#version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button').click();">
<img src="#version.ImageUrl" alt=""> #version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
Using JS for the checkbox deselection we can have multiple instances on a form. Here I've extended to show a list of Expansions, which also have the same logic around versions.
<h5 class="mt-3">Include Expansions?</h5>
#foreach (var expansion in Model.Expansions)
{
<div class="form-row">
<div class="custom-control custom-checkbox w-100">
<input type="checkbox" class="expansion-checkbox custom-control-input" id="exp-#expansion.ProductId">
<label class="custom-control-label w-100" for="exp-#expansion.ProductId">
#if (expansion.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="#expansion.ImageUrl" />#expansion.Name: #expansion.Versions[0].VersionName (#expansion.Versions[0].Year)
</div>
}
else
{
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
#foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<input type="radio" name="exp-#version.ProductId" id="exp-#version.ProductId-#version.VersionId" #if (version == expansion.Versions.First()) { #Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="#version.ImageUrl" alt="">#expansion.Name: #version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button-#expansion.ProductId" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button-#expansion.ProductId"></label>
<div class="rich-select-options">
#foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="exp-#version.ProductId-#version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button-#expansion.ProductId').click();">
<img src="#version.ImageUrl" alt="">#expansion.Name: #version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
</label>
</div>
</div>
Of course this requires a fair bit of CSS, which I've only included in this JSFiddle to reduce the size of this already massive answer. I've used Bootstrap 4 to reduce the amount needed, and also to allow it to fit in with other Bootstrap controls and any site customisations that have been made.
The images are set to 75px, but this can easily be changed in 5 lines in .rich-select and .rich-select-option-body img
I propose an alternative
when I'm in a difficult situation like this using dxlookup from devexpress
Examples:https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/Templates/jQuery/Light/
I tried several jquery based custom select with images, but none worked in responsive layouts. Finally i came accross Bootstrap-Select. After some modifications i was able to produce this code.
Code and github repo here
I got the same issue. My solution was a foreach of radio buttons, with the image at the right of it. Since you can only choose a single option at radio, it works (like) a select.
Worked well for me.
I was struggling with the same problem: how to create a language selector with flags. I came up with a :ḧover solution without javascript. It does involve some server-side processing to set a class in the HTML.
The code can be easily generated from PHP or nodejs or Angular/Typescript. In this example there are 3 images contained in an A-element (< a href='./?lang=..."> ).
The trick is that you should fetch the URL GET parameter lang and set the class selected so it will be the only one visible.
The CSS hinges on the fact that there is only one flag visible based on the class selected being present. When the mouse hovers over the container (<div class="languageselect">.....</div>) the CSS will show all flags by overriding the classes div.flag:not(.selected) and div.flag.selected and setting display:block . Then the <a href="..."> will be available to the users.
Of course there is lots of other styling possible to increase useability. This is just a starting point.
Please note the first part of the CSS-line will put the language selector on top on a fixed position. This also helps prevent the flag-container to span a whole line, messing up the :hover detection.
Happy coding!
WOrking example here: codepen
HTML:
<div class="languageselect">
<div class="select">
<div class="flag ">
<a href="./?lang=en">
<img src="https://www.sciencekids.co.nz/images/pictures/flags120/United_Kingdom.jpg">
</a>
</div>
<div class="flag selected">
<a href="./?lang=en_us">
<img src="https://www.sciencekids.co.nz/images/pictures/flags120/United_States.jpg">
</a>
</div>
<div class="flag ">
<a href="./?lang=nl">
<img src="https://www.sciencekids.co.nz/images/pictures/flags96/Netherlands.jpg">
</a>
</div>
</div>
</div>
CSS:
.languageselect {
position: absolute;
top: 0;
left:0;
z-index: 1000;
}
.languageselect img {
max-height: 20px;
}
.languageselect div.flag:not(.selected) {
display: none;
}
.languageselect div.flag.selected {
display: block;
}
.languageselect:hover div.flag {
display:block;
}
UPDATE: As of 2018, this seems to work now. Tested in Chrome, Firefox, IE and Edge
UPDATE: Yes I changed the background-color, not the image, stop voting me down, showing that you can change style here is still a useful contribution.
<!DOCTYPE html>
<html>
<body>
<style>
select#newlocale option[value="volvo"] { background-color: powderblue; }
select#newlocale option[value="opel"] { background-color: red; }
select#newlocale option[value="audi"] { background-color: green; }
</style>
<select id="newlocale">
<option value="volvo"><div >Volvo</div></option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
But... One problem is still appear. When I set up value for hard in HTML:
<div class="flex">
<div class="field">
<input name="subject_field" id="subject_field" placeholder="Temat" value="Testing" disabled>
<label class="icon" for="subject_field">
<i class="fa fa-star fa-fw" aria-hidden="true"></i>
</label>
</div>
</div>
My PHP code didn't see that in this field is something inside.
I want to have input for subject/topic and selection for subject/topic. I will be comment one of them if I don't need them. But also I want to have third variant - input for subject/topic with hard setup setup value. But this not working as I except.
Now that is the main problem. Why? And how to resolve this one. It is very important for me. Please advice.
UNDER IS THE MAIN QUESTION - one problem was solved by me.
Ok, I have to edit my question because I see that nobody can not understand me.
Well, so again:
I have very low knowledge about PHP, but even so I created simply contact form only in PHP. It works very well but I would like to upgrade it and I don't know how.
That contact form looks that:
It is in Polish because I from Poland. I am asking here because we do not have in Poland place like this for asking help.
Now, what I would like to change? You can see field named "Temat" (well it is not name, but placeholder)? It means Topic. Now everybody can topic message as they want. I want to change it and set up "hard" topics. Then everybody will only can choice my topics. So what is the problem?
Even if I now setup hard "topic" via "value=something" (in HTML) then PHP thinks that this field is empty and of course return error. I have to setup variable in PHP code.
I suppose if I now create new field for list choice then PHP still will be think that field is empty. And I don't want to create variables for each topic. I would like to setup PHP for reading what is in field and setup variable by self.
Now here I don't know what to do and how. Because I am newbie. Don't tell me go back to book and learn whole PHP. Please advice.
Here is code of PHP: https://github.com/IdolwSzutrab7/Contact-Form/blob/master/submit.php It is little long and I don't know to paste it here or not?
<?php
function died($error) {
echo '<p><h2>Wystąpił problem z działaniem skryptu.</h2></p>';
echo '<p>Wykryto następujące błędy:<ul>'.$error.'</ul></p>';
echo '<p>Wiadomośc nie została wysłana.</p>';
echo '<p>Kliknij tutaj, aby wrócić i spróbować ponownie.</p>';
//echo '<p>Kliknij tutaj, aby zamknąć kartę i spróbuj ponownie..</p>';
die();
};
function done() {
echo '<p><h1>Wiadomość została wysłana.</h1></p>';
}
if ( isset($_POST) ) {
// Adresat
$do = 'XXX'; // Adres e-Mail na który ma zostać wysłany formularz
// Dane formularza
$imie = $_POST['name_field'];
$email = $_POST['address_field'];
$telefon = $_POST['phone_field'];
$firma = $_POST['company_field'];
$temat = $_POST['subject_field'];
$wiadomosc = $_POST['message_field'];
$captcha = $_POST['g-recaptcha-response'];
// Nagłówek wiadomości e-Mail
$headers = array('From: "'.$imie.'" <'.$email.'>',
'Reply-To: '.$email,
'X-Mailer: PHP/' . PHP_VERSION);
$headers = implode("\r\n", $headers);
// ReCaptcha NoCaptcha
$secret = "XXX";
if (!$captcha) {
died('<li>Proszę wypełnić formularz reCAPTCHA.</li>');
exit;
}
$response=json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true);
// Wytyczne do sprawdzenia danych
$email_exp = '/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
$imie_exp = "/^[A-Za-z ęóąśłżźćńĘÓĄŚŁŻŹĆŃ]+$/";
$telefon_exp = "/^[0-9 ]+$/";
// Sprawdzanie formularza w poszukiwaniu błędów
if ($response['success'] == false) { // Tutaj sprawdza, czy reCAPtCHa zwraca success
died('<li>Walidacja reCAPTCHA nie przeszła poprawnie!<br />Twoje działanie zostało zarejestrowane, a dane przesłane do administratora.</li>');
exit;
} else if ( !isset($_POST['name_field']) ||
!isset($_POST['address_field']) ||
!isset($_POST['message_field']) ) { // Tutaj jest bloczek, który sprawdza czy dane pola są uzupełnione
died('<li>Nie wszystkie wymagane pola zostały wypełnione.</li>');
} else if ( !preg_match($email_exp,$email) ) { // Tutaj sprawdza, czy e-Mail jest poprawnie uzupełniony
died('<li>Adres e-Mail nie wygląda na autentyczny.</li>');
} else if ( !preg_match($imie_exp,$imie) ) { // Tutaj sprawdza, czy Imię lub Nick nie zawiera jakichś dziwnych znaków
died('<li>Imię lub Nick zawiera nienaturalne znaki.</li>');
} else if ( !preg_match($telefon_exp,$telefon) && !$telefon == null ) { // Tutaj sprawdza, czy telefon zawiera cyfry tylko wtedy, gdy jest coś wpisane [inaczej widzi pole ktore jest ukryte i trkatuje je jako blad]
died('<li>Numer telefonu powinien zawierać wyłącznie cyfry.');
} else if ( strlen($wiadomosc) < 10 || strlen($wiadomosc)>1000 ) { // Tutaj sprawdza długość wiadomości
died('<li>Wiadomość jest zbyt krótka lub zbyt długa.');
} else if ( strlen($imie)>50 ||
strlen($email)>50 ||
strlen($telefon)>50 ||
strlen($firma)>50 ||
strlen($temat)>100 ) { // Tutaj jest bloczek, który sprawdza długość poszczególnych pól
died('<li>Przekroczono maksymalną ilość znaków w niektórych polach.</li>');
} else { done(); mail($do, $temat, $wiadomosc, $headers); };
} else {
died('<li>Nastąpiło nieoczekiwane zatrzymanie skryptu!</li>');
};
?>
And here is code of form in HTML: https://github.com/IdolwSzutrab7/Contact-Form/blob/master/index.php It is also little long.
<html>
<head>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="//www.google.com/recaptcha/api.js"></script>
</head>
<body>
<style>
body, html {margin:0;padding:0;}
#contact_form {
width: 600px;;
padding: 50px;
margin: 25px auto;
background: white;
background: url('https://zotabox.com/media/core/image/gallery/simplepopup/1d.jpg');
background-size: cover;
box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.5);
} #contact_form div.flex {
display: flex;
width: 100%;
} #contact_form div.field {
position: relative;
width: 100%;
margin: 5px;
} #contact_form div.field input, #contact_form div.field textarea {
width: 100%;
box-sizing: border-box;
padding: 10px;
padding-left: 30px;
outline: none;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 4px;
background: white;
font-family: Arial;
color: black;
} #contact_form div.field input:hover, #contact_form div.field input:focus,
#contact_form div.field textarea:hover, #contact_form div.field textarea:focus {
border: 1px solid rgba(0,0,0,0.4);
} #contact_form div.field #submit_button {
width: auto;
} #contact_form div.field #submit_button:hover {
cursor: pointer;
} #contact_form div.field .icon {
position: absolute;
top: 9px;
left: 7px;
color: rgba(0,0,0,0.5);
cursor: text;
} #contact_form div.field input:hover + .icon, #contact_form div.field input:focus + .icon,
#contact_form div.field textarea:hover + .icon, #contact_form div.field textarea:focus + .icon {
color: rgba(0,0,0,0.7);
}
</style>
<form id="contact_form" method="post" action="submit.php">
<div class="flex">
<div class="field">
<input name="name_field" id="name_field" placeholder="Twój nick lub imię">
<label class="icon" for="name_field">
<i class="fa fa-user fa-fw" aria-hidden="true"></i>
</label>
</div>
<div class="field">
<input name="address_field" id="address_field" placeholder="Twój adres e-Mail">
<label class="icon" for="address_field">
<i class="fa fa-envelope fa-fw" aria-hidden="true"></i>
</label>
</div>
</div>
<div class="flex">
<div class="field" style="display: none;">
<input name="phone_field" id="phone_field" placeholder="Twój numer telefonu">
<label class="icon" for="phone_field">
<i class="fa fa-phone fa-fw" aria-hidden="true"></i>
</label>
</div>
<div class="field" style="display: none;">
<input name="company_field" id="company_field" placeholder="Firma">
<label class="icon" for="company_field">
<i class="fa fa-briefcase fa-fw" aria-hidden="true"></i>
</label>
</div>
</div>
<div class="flex">
<div class="field">
<input name="subject_field" id="subject_field" placeholder="Temat">
<label class="icon" for="subject_field">
<i class="fa fa-star fa-fw" aria-hidden="true"></i>
</label>
</div>
</div>
<div class="flex">
<div class="field">
<textarea name="message_field" id="message_field" placeholder="Tutaj wpisz treść swojej wiadomości..." rows="7" maxlength="1000" spellcheck="true"></textarea>
<label class="icon" for="message_field">
<i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
</label>
</div>
</div>
<div class="flex">
<div class="field">
<div class="g-recaptcha" data-sitekey="6LfnGigTAAAAAGsECHWJRKpajpJI0SYt24XFy8S-"></div>
</div>
<div class="field" style="text-align: right;"><div style="display: inline-block; position: relative;">
<input id="submit_button" type="submit" value="Wyślij">
<label class="icon" for="submit_button" style="cursor: pointer;">
<i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i>
</label>
</div></div>
</div>
</form>
</body>
</html>
Well... When I setup value for "hard" like this:
Then I have to setup variable for "hard" in PHP, like this:
Otherwise PHP return error while send form.
I am sure at 90% that same situation will be when I add selection field in the form - I mean PHP will not recognize choice from selection. That is the problem.
Hmm... I think I found what is wrong. My PHP code only check if the value of specified fields are set. Not if they contains something. Even if value is empty for PHP it means it is set. Please look at this section:
if ( !isset($_POST['name_field']) ||
!isset($_POST['address_field']) ||
!isset($_POST['message_field']) )
So now the main question is how to rebuild it for checking if these values contains something not checking if they are set.
This code:
<input name="subject_field" id="subject_field" placeholder="Temat" value="Testing" disabled>
should be:
<input name="subject_field" id="subject_field" placeholder="Temat" value="Testing" readonly>
The disabled function in your code won't post the input value of "subject_field" to the PHP file.
If you want to make a selection so you just add a select tag in your html forms, just a simple as that. Also make sure that your value in selection correspond to your selection list.Below is the code
<select>
<option value="topic1">Topic 1</option>
<option value="topic2">Topic 2</option>
<option value="topic3">Topic 3</option>
</select>
Well... I think I resolve my problem (and appear another, please read to the end), but please check me and confirm.
I also give you test link but please don't spam too much - http://ts.isvn.pl/contactform/
The problem was from beginning with PHP code (I supposed that) but I didn't know where. I star thinking about that and I found:
} else if ( !isset($_POST['name_field']) ||
!isset($_POST['address_field']) ||
!isset($_POST['subject_field']) ||
!isset($_POST['message_field'])) { // Tutaj jest bloczek, który sprawdza czy dane pola są uzupełnione
died('<li>Nie wszystkie wymagane pola zostały wypełnione.</li>');
}
I read a few interesting questions here at stackoverflow (i.e. "php is null or empty?") and understand that what I had was wrong. Again I started thinking about that and start changing. I found working solution:
} else if ( $imie == NULL ||
$email == NULL ||
$temat == NULL ||
$wiadomosc == NULL ) { // Tutaj jest bloczek, który sprawdza czy dane pola są uzupełnione
died('<li>Nie wszystkie wymagane pola zostały wypełnione.</li>');
}
But that was not finish. I told you that I want my form modular. Some of fields I would like to turn on and turn off. I used just display: none in HTML:
<div class="flex" style="display: none;">
<div class="field">
<input name="subject_field" id="subject_field" placeholder="Temat" value="Testing" disabled>
<label class="icon" for="subject_field">
<i class="fa fa-star fa-fw" aria-hidden="true"></i>
</label>
</div>
</div>
But... For people like me this is hidden. But not for PHP code. I had to comment these lines. Otherwise PHP code still saw this code.
<!--
<div class="flex" style="display: none;">
<div class="field">
<input name="subject_field" id="subject_field" placeholder="Temat" value="Testing" disabled>
<label class="icon" for="subject_field">
<i class="fa fa-star fa-fw" aria-hidden="true"></i>
</label>
</div>
</div>
-->
So bad but I can handle this.
But... One problem is still appear. When I set up value for hard in HTML:
<div class="flex">
<div class="field">
<input name="subject_field" id="subject_field" placeholder="Temat" value="Testing" disabled>
<label class="icon" for="subject_field">
<i class="fa fa-star fa-fw" aria-hidden="true"></i>
</label>
</div>
</div>
My PHP code didn't see that in this field is something inside.
I want to have input for subject/topic and selection for subject/topic. I will be comment one of them if I don't need them. But also I want to have third variant - input for subject/topic with hard setup setup value. But this not working as I except.
Now that is the main problem. Why? And how to resolve this one. It is very important for me. Please advice.
I am post it as a answer because I resolve some of my problems and this message is too long for put it in the main question.
I am wondering why you have to make it like these
$imie == NULL ||
$email == NULL ||
$temat == NULL ||
$wiadomosc == NULL
I'm pretty new to jQuery Mobile and PHP and I'm having an issue where I have a PHP while loop
while ( $row = sasql_fetch_array ( $idresult ) ) {
echo "
<li>
<a href='#' data-rel='popup' data-position-to='window' data-transition='pop'>
<div class='ui-grid-a'>
<div class='ui-block-a'>
<div class='ui-bar ui-bar-a titleRow' style='height:15px'>Identification Type</div>
<div id='idType' class='ui-bar ui-bar-a 'style='height:15px; background-color:transparent; border: none; color: black; font-weight: normal;' >" . $row ['description'] . "</div>
</div>
<div class='ui-block-b'>
<div class='ui-bar ui-bar-a titleRow' style='height:15px'>Details</div>
<div id='idNo' class='ui-bar ui-bar-a ' style='height:15px; background-color:transparent; border: none; color: black; font-weight: normal;'>" . $row ['number'] . "</div>
</div>
</div>
</a>
<a href='#editCustId' data-rel='popup' data-position-to='window' data-transition='pop'>Edit</a>
</li>
";
} // end while
echo "</ul>";
} // end if
When the use clicks on the edit button I need to pass the ID of that particular row. I'm not sure where I should put this in but it could be something like this...? Will this work when there is no form?
<input type="hidden" name="the_id" value='<?php " . $row ['theid'] . " ?>' />
However I can't figure out how to do this. I have tried opening the dialog as a new page ie.
<a href='./editCustId.php?id=" . $row['theid'] . "' data-rel='popup' data-position-to='window' data-transition='pop' class='ui-btn ui-btn-inline ui-icon-edit ui-btn-icon-notext'>Edit</a>
When edit is clicked this popup will open
<div data-role='popup' id='editCustId' data-theme='a' data-overlay-theme='a' data-dismissible='false' style='min-width: 300px;'>
<div data-role='header' data-theme='a'>
<h1>Add ID</h1>
</div>
<div data-role='main' class='ui-content'>
<form id='editId' onsubmit="return false;">
<input type="hidden" name="cust_id" value='<?php echo $custid; ?>' />
<input type="hidden" name="sess_id" value='<?php echo $sid; ?>' />
<!-- <input type="hidden" name="submitted" value="true" /> -->
<div class="ui-field-contain">
<label for="phoneType">Type</label>
<select name="idType" id="idType">
<?php echo $idInnerOptions; ?>
</select>
</div>
<div class="ui-field-contain">
<label for="idDesc">Description</label> <input type="text" name="idDesc" id="idDesc" value="">
</div>
<div class='ui-grid-a'>
<div class='ui-block-a'>
<input type='submit' id="submit" value='Update' class='ui-btn ui-btn-inline' data-transition='pop' />
</div>
<div class='ui-block-b'>
Cancel
</div>
<div id="success" style="color: black;"></div>
</div>
</form>
</div>
</div>
The description and number will contain the relevant info based on which link was clicked.
I've been looking into passing the data through ajax but I'm not really getting what I should be doing?
I Think there are 2 issues here for you to check more:
As i recall, the popup feature of jquery mobile is for code that are inside divs that has the popup data-role. So, what you tried to do is not in the JQM logic. However, JQM also allows you to use iframe in divs with popup data-role so maybe that will be a good solution for you.
Another way to go, could be to dynamicly load the content of the page you want by AJAX to a div that has the popup data-role.
Hope this helps
I have a project for kids cards where the child selects the background from specific backgrounds and write his name and print
But the problem is that I only want to print the card (apDiv14 with background) not the full page Or if there was a way to convert certain content to pictures for print
<div id="apDiv14">
<div id="for1">
<h1 ID="head1"> <br>
<h1 ID="head2"> <br>
<h1 ID="head3"> <br>
<br>
</h1>
</div>
<div id="apDiv17"><form name="form1">
<p>
<br>
<input type="text" name="newtitle" size="25">
</p>
<input type="text" name="newtitle2" size="25">
<br>
<br>
<select name="newtitle3" style="width: 150px;">
<option value="">age</option>
</select>
<br>
</p>
<p> <img src="img/BB.gif" width="80" height="45" onClick="ChangeTitle();"><img src="img/PB.gif" width="80" height="45" onClick="pri();"> </p>
<p>
</form> </div></div>
<script>
function pri() {
window.print(); }
</script>
function pic1(apDiv14)
{
// background 1
document.getElementById("apDiv14").style.backgroundImage="url('img/1st card Jeddah.jpg')";
document.body.style.zIndex='4';
document.getElementById("apDiv14").style.backgroundSize = "527px 307px";
document.getElementById("apDiv14").style.backgroundRepeat='no-repeat';
}
function pic2(apDiv14)
{
//background 2
document.getElementById("apDiv14").style.backgroundImage= "url('img/2nd card Jeddah.jpg')";
document.body.style.zIndex='4';
document.getElementById("apDiv14").style.backgroundSize = "527px 307px";
document.getElementById("apDiv14").style.backgroundRepeat='no-repeat';}
You can use a print media stylesheet to limit which content gets printed (by setting other content to display: none but most browsers are configured to not print background images (since they are rarely important and use a lot of ink).
I'd approach this by using some server side code to generate a PDF version for printing and using a form to submit the options to the server.
javascript code:
var content = document.getElementById("divcontents");
var pri = document.getElementById("ifmcontentstoprint").contentWindow;
pri.document.open();
pri.document.write(content.innerHTML);
pri.document.close();
pri.focus();
pri.print();
html code:
<iframe id="ifmcontentstoprint" style="height: 0px; width: 0px; position: absolute"></iframe>