I didn’t want to post my issues in the wrong topic and pollute the other forum, so I post it in the general forum. Please tell me if I did wrong.
There are two issues I must deal with :
1. Changing an hidden post value via JS;
2. Getting things from a form to align properly via CSS.
=======================================
1. Here is my HTML (generated via CI) :
<div id="mainbody"> <h2>Stocks</h2>
<form id="stock_search_form" method="post" action="***/index.php/stocks/stocksearch">
<div>
<label for="stock_site">Site</label>
<select name="stock_site" id="stock_site" />
<option value="ALL"><b>ALL</b> - ALL SITES</option>
<option value="OTH"><b>OTH</b> - Other option</option>
</select>
<img id="report_button" src="../img/Consultation.png" alt="Consultation" />
<br />
<label for="stock_product">Produit</label>
<input type="text" name="stock_product" id="stock_product" />
<input type="hidden" name="report" id="report" value="false">
<input type="image" id="search_button" src="../img/Rechercher.png" />
<div id="autocomplete_choices" class="autocomplete"></div>
</div>
</form>
<div id="stock_values" style="display:none;">
<p>Quantities in stock</p>
</div>
<hr />
</div>
Here is my not working JS :
$('report_button').onclick = function() {
button_check();
}
function button_check() {
alert($('report').value);
if ($report.value == "true")
{
$('report').value = "false";
$('report_button').src = "../img/Consultation.png";
}
else if ($F('report').value == "false")
{
$('report').value = "true";
$('report_button').src = "../img/Rapport.png";
}
alert($('report').value);
}
I’ve tried with $F() and $() but it seems that I misunderstood how it actually works.
2. Here is what it looks like :
http://pix.nofrag.com/13/62/6ce9b70d977e82a818f16f67f9a4.jpeg
And my not working CSS :
img {
border: 1px solid white;
}
#stock_values {
background: #444444;
border: 1px solid #EAEAEA;
padding: 10px;
margin-top: 10px;
}
#stock_values ul {
margin: 0;
padding: 0;
list-style:none!important;
list-style-image: none!important;
}
#stock_values ul li {
margin-bottom: 10px;
}
#stock_search_form {
color: white;
background: #000000;
border: 1px solid #EAEAEA;
padding: 10px;
}
#stock_search_form label{
font-size:small;
display: inline;
float: left;
width: 70px;
}
#stock_site {
width: 350px;
}
input {
border: 1px solid #888;
padding: 1px 2px;
font-size: small ;
color:white ;
background-color: black;
}
select {
border: 1px solid #888;
margin: 0;
font-size: small ;
color:white ;
background-color: black;
}
#stock_site option {
background-color:black;
color: white;
margin:0px;
padding:0px;
font-size: small;
display:block;
margin:0;
padding:2px;
cursor:pointer;
}
#stock_site option.selected {
background-color: #666666;
}
#stock_product {
width: 300px;
}
#search_button {
color: black;
background: #FFF url(../img/search.png) no-repeat right center;
padding:0 25px 0 0;
}
I would like a perfect vertical alignement, and an horizontal alignment between the two buttons.
If you need more information, just ask, I’ve been stuck with these results for one day now.