I have an input declaration (within a bootstrap modal) as follows:
<input type="range" id="seek-bar_<?php echo $i+1;?>" value="0" >
where i could be a large number. I need the width of this bar to be 30px, so I added a class to the above to allow the width to be defined within the style class, i.e.
<input type="range" id="seek-bar_<?php echo $i+1;?>" value="0" class ="seek-bars" >
and then declared in my css file,
.seek-bars {
width: 30px;
}
And no matter what this does not work, but declaring
#seek-bar_1 {
width: 30px;
}
does work? So, I don't think there is anything wrong with my class definitions and declarations so it this will not work is there a way of declaring a wildcard id match? For example #seek-bar_*.
I could just put the style declaration within the tag but this will cause other problems for me and would like to have it resolved within my CSS file if possible.
Any help would be much appreciated.
Thanks
You can use CSS [attribute^=value] selector. This selector matches every element whose attribute value begins with a specified value. In our case its seek-bar_. Like:
input[id^='seek-bar_'] {
width: 30px;
border: 1px solid red;
}
Have a look at the example snippet below:
input[id^='seek-bar_'] {
width: 30px;
border: 1px solid red;
}
<input type="text" id="seek-bar_one" />
<input type="text" id="seek-bar_two" />
<input type="text" id="seek-bar_three" />
<input type="text" id="seek-bar_four" />
Hope this helps!
I am making a form that will save to an xml file using php. I have gotten everything to work great, but I want to automatically add a $ to the input field so the user does not have to. How can I start out with a $ as the first character? (Only dealing with whole dollars so I don't need to worry about decimals). This is the simple text input I have made.
<label>Price:</label><br />
<input type="text" name="txtPrice" />
Use ::before in CSS
label::before {
content:"$";
color: blue;
}
<label><input type="text" name="txtPrice" id='input' /></labl>.
Working Demo
Try this:
<label>Price:</label><br />
<input type="text" name="txtPrice" value="$" />
Or this:
<label>Price:</label><br />
$<input type="text" name="txtPrice" value="$" />
I was just having fun with this one, but it puts the $ in the box.
http://jsfiddle.net/NGH7d/3/
Not sure if this will work in IE6-8, also you probably need to adjust the numbers around.
<label class="money">$</label><input type="text" id="txtprice" name="txtPrice" id='input' />
label.money{
color: blue;
float:left;
position:relative;
left:12px;
top:3px;
}
#txtprice {
padding-left:12px;
}
Hi I'm trying to get a dinamically input added with Jquery, but when I try to get the code it's not working
The code in codeigniter catch all POST but less the one added by jquery
here is the code:
<script type="text/javascript">
$(document).ready(function(){
var value = parseFloat($("#subtotal").val());
$('.subtotal').html(value);
$('#subtotal').val(value);
$('input[name="phprop"]').change(function(event){
if($('input[name="phprop"]:checked').val() == 'Yes'){
$('#sections').show();
}else if($('input[name="phprop"]:checked').val() == 'No'){ $('#sections').hide();}
});
$('input[name="xsst"]').change(function(event){
if($('input[name="xsst"]:checked').val() == 'Yes'){
$('#xtraphotos').show();
$('<input type="text" name="extraid'+i+'" id="extraid'+ i +'" style="width:80px;margin-left:4px;"/>').appendTo('#xtrabox');
var num = value + 9.95;
value = parseFloat(num.toFixed(2));
$('.subtotal').html(value);
$('#subtotal').val(value);
$('#extrass').val(i); i++;
}else if($('input[name="xsst"]:checked').val() == 'No'){
$('#xtraphotos').hide();
$('#xtraphotos input[type="text"]').remove();
var num = value - 9.95 * (i - 1);
value = parseFloat(num.toFixed(2));
$('.subtotal').html(value);
$('#subtotal').val(value);
$('#extrass').val(0);
i = 1;
}
});
var scntDiv = $('#xtrabox');
var i = 1;
$('#addScnt').live('click', function() {
$('<input type="text" name="extraid'+i+'" id="extraid'+ i +'" style="width:80px;margin-left:4px;"/>').appendTo(scntDiv);
num = value + 9.95;
value = parseFloat(num.toFixed(2));
$('.subtotal').html(value);
$('#subtotal').val(value);
$('#extrass').val(i);
i++;
return false;
});
});
</script>
Here is the HTML
<div style="margin-left: 50px;">
<label><b>Do you need more photos for your web?</b> </label>Yes<input type="radio" name="xsst" id="xsst" value="Yes"/>No<input type="radio" name="xsst" id="xsst" value="No"/> (Each aditional photo has a cost of <b>$9.95</b>)
<div id="xtraphotos" style="display:none;">Add another picture box<div id="xtrabox"></div></div></div>
Here is the Codeigniter code:
if($_POST['extrass'] !=0){
for($i=1;$i<=$_POST['extrass'];$i++){
$names = "extraid".$i;
$extras .= $_POST[$names];
if($i!=$_POST['extrass']){
$extras .= "-";
}
}
Here is the complete HTML (Just the form Section):
<?php echo form_open_multipart(base_url() . 'purchase/confirmation')?>
<p style="float:left">Image ID of the Photos for your Website</p><div style="float:left;margin: 13px 0 0 110px;width: 450px;"><?php
if($idtype == 4){$x=3;}elseif($idtype == 1){$x=5;}elseif($idtype == 2){$x=10;}elseif($idtype == 3){$x=13;}
for($i=1;$i<=$x;$i++){?><input type="text" name="ssid[]" id="ssid_<?=$i?>" value="" style="width:80px; margin-left:4px;"/><?php }?></div>
</div>
<div style="margin-left: 50px;">
<label><b>Do you need more photos for your web?</b> </label>Yes<input type="radio" name="xsst" id="xsst" value="Yes"/>No<input type="radio" name="xsst" id="xsst" value="No"/> (Each aditional photo has a cost of <b>$9.95</b>)
<div id="xtraphotos" style="display:none;">Add another picture box<div id="xtrabox"></div></div></div>
<br />
<div id="choose_your_template" style="background-image:url(<?=base_url()?>images/step_4.png)"><div style="padding-left:5px; float:left">
<span style=" position: relative; top: 14px; left: 210px; font-size: 18px; color: gray; ">Step 4: Do you have Photos? Upload the pictures for your website.</span></div>
</div>
<div style="margin-left: 50px;">
<label>Do you have photos of your property? </label>Yes<input type="radio" name="phprop" id="phprop" value="Yes"/>No<input type="radio" name="phprop" id="phprop" value="No"/><br />
<div id="sections" style="display:none;">
<p>Upload the photos in the theme that they should be used. The photos should be in jpge.format. Otherwise the system will not accept. them.</p><br/>
<?php
if($idtype == 4){$x=1;}elseif($idtype == 1){$x=3;}elseif($idtype == 2){$x=4;}elseif($idtype == 3){$x=5;}
for($i=1;$i<=$x;$i++){?>
<label>Section</label><select name="section[]" id="section"><option value="">Choose Section</option><option value="home">Home</option><option value="about-us">About Us</option><option value="contact-us">Contact Us</option></select><?php for($j=1;$j<=4;$j++){?><input type="file" name="userphoto<?=$i?><?=$j?>" /><?php }?><br /> <br />
<?php }?>
<p>I certify that the photos that i am uploading for the website development are of my entire property and that I have all the copyrights.</p></div>
</div><br />
<input type="hidden" id="domain" name="domain" value="<?=$domain?>" />
<input type="hidden" id="payment_plan" name="payment_plan" value="<?=$poption?>" />
<?php if($ownamedomain){?>
<input type="hidden" name="ownamedomain" id="ownamedomain" value="<?=$ownamedomain?>" />
<?php }?>
<input type="hidden" name="idtype" id="idtype" value="<?=$idtype?>" />
<input type="hidden" name="templateid" id="templateid" value="<?=$templateid?>" />
<input type="hidden" name="extrass" id="extrass" value="0" />
<input type="hidden" name="subtotal" id="subtotal" value="<?=$subtotal?>" />
<div style="padding-left:45px; padding-top:15px;">
<hr style=" width: 868px; margin: 0 0 16px; "/>
<div align="center">
<p>Subtotal: USD$<span class="subtotal"><?=$subtotal?></span> </p></div>
</div>
<div style="background:url(<?=base_url()?>images/bottombar.png) no-repeat;display: block;height: 16px;margin: 0 36px 10px;width: 902px;"></div>
<input type="submit" name="continue" id="continue"/><input type="button" value="Back" onClick="history.back();" class="back">
</div>
Your HTML have a tag form?
When.you not put forms elements inside a form, onload, some brownser add a form to correct code syntax... But when you add nes elements using DOM, maybe this elements not include inside this form...
First of all, im quite new to PHP and coding, but here goes.
I have a web form, that has to get some info from a txt file (located in a folder on the server)
I got how to make it get the info from the file and how to make the dropdown list, show all files in the folder.
How ever what i cant figure out is how to make them work together, so the file name it reads from, is taken from the selected value of the dropdown list.
the code for the dropdown list:
<?
$currentdir = 'files'; //change to your directory
$dir = opendir($currentdir);
echo 'Files are as follows:<br>';
echo '<select name="select">';
while($file = readdir($dir))
{
echo '<option value="'.$file.'">'.$file.'</option>';
}
echo '</select>';
closedir($dir); ?>
and the code to read from the file:
<input type="text" value="<?php $myFile = ""; $lines = file($myFile); echo $lines[2]; ?>" name="refnr" id="refnr" class="input" />
lets say the drop down shows 2 files, test.txt and test2.txt, if i select test2.txt from the dropdown, i wanted it to put "test2.txt" in between the "" at <?php $myFile = "";
but no matter how i try to put the code in there to get the selected value, it just fails...
The full code of my Form as it is right now:
<?php
if (!empty($_POST)) {
// Used for later to determine result
$success = $error = false;
// Object syntax looks better and is easier to use than arrays to me
$post = new stdClass;
// Usually there would be much more validation and filtering, but this
// will work for now.
foreach ($_POST as $key => $val)
$post->$key = trim(strip_tags($_POST[$key]));
// Check for blank fields
if (empty($post->refnr))
$error = true;
else {
// Get this directory, to include other files from
$dir = dirname(__FILE__);
// Get the contents of the pdf into a variable for later
ob_start();
require_once($dir.'/pdf.php');
$pdf_html = ob_get_contents();
ob_end_clean();
// Load the dompdf files
require_once($dir.'/dompdf/dompdf_config.inc.php');
$dompdf = new DOMPDF(); // Create new instance of dompdf
$dompdf->load_html($pdf_html); // Load the html
$dompdf->render(); // Parse the html, convert to PDF
$pdf_content = $dompdf->output(); // Put contents of pdf into variable for later
// Get the contents of the HTML email into a variable for later
ob_start();
require_once($dir.'/html.php');
$html_message = ob_get_contents();
ob_end_clean();
// Load the SwiftMailer files
require_once($dir.'/swift/swift_required.php');
$mailer = new Swift_Mailer(new Swift_MailTransport()); // Create new instance of SwiftMailer
$message = Swift_Message::newInstance()
->setSubject('Felanmalan') // Message subject
->setTo(array('mymail#hidden' => 'Fel')) // Array of people to send to
->setFrom(array('mymail#hidden' => 'Fel')) // From:
->setBody($html_message, 'text/html') // Attach that HTML message from earlier
->attach(Swift_Attachment::newInstance($pdf_content, 'Felanmalan.pdf', 'application/pdf')); // Attach the generated PDF from earlier
// Send the email, and show user message
if ($mailer->send($message))
$success = true;
else
$error = true;
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Felanmälan från IKEA</title>
<style type="text/css">
html, body, h1, h2, h3, h4, h5, h6, p, span, ul, li, div, form, input, select, textarea, button {margin:0; padding:0;}
ul {list-style:none;}
a, a:hover {text-decoration:none; outline:0;}
a img {border:0;}
body {font:12px/16px Verdana, Arial, sans-serif; background:#ffffff;}
#container {width:450px; margin:10px auto; padding:10px; overflow:hidden; border:1px solid #000; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; background:#F9F9F9;}
#container h1 {margin-bottom:20px; font-size:40px; line-height:40px; font-family:'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal;}
.message {margin-bottom:10px; padding:5px;}
.success {color:#4F8A10; border:1px solid #4F8A10; background:#DFF2BF;}
.error {color:#D8000C; border:1px solid #D8000C; background:#FFBABA;}
label {display:block; margin-bottom:3px; cursor:pointer;}
.input, textarea, select, button {display:block; width:440px; margin-bottom:10px; padding:3px; font:22px/22px 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; border:1px solid #CCC; border-top-width:2px;}
textarea {font-size:13px; line-height:16px;}
select {width:396px;}
button {float:right; width:auto; margin-bottom:0; padding:3px 30px; cursor:pointer; font-size:16px; border:1px solid #999; border-bottom-width:2px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background:#EEE;}
button:active {border-bottom-width:1px; padding:4px 30px 3px; background:#E9E9E9;}
</style>
</head>
<body>
<?
$currentdir = 'files'; //change to your directory
$dir = opendir($currentdir);
echo 'Files are as follows:<br>';
echo '<select name="select">';
while($file = readdir($dir))
{
echo '<option value="'.$file.'">'.$file.'</option>';
}
echo '</select>';
closedir($dir); ?>
<div id="container">
<h1><img src="felimg.png" /> Felanmälan</h1>
<?php if ($success) { ?>
<div class="message success">
<h4>Congratulations! It worked! Now check your email.</h4>
</div>
<?php } elseif ($error) { ?>
<div class="message error">
<h4>Sorry, an error occurred. Try again!</h4>
</div>
<?php } ?>
<form method="post" action="">
<label for="date"><b>Date:</b></label>
<input type="text" readonly name="date" id="date" class="input" value="<? print(Date("Y-m-d")); ?>"/>
<label for="refnr"><b>Referensnummer:</b></label>
<input type="text" value="<?php $myFile = ""; $lines = file($myFile); echo $lines[2]; ?>" name="refnr" id="refnr" class="input" />
<label for="bestav"><b>Beställd av:</b></label>
<input type="text" name="bestav" id="bestav" class="input" />
<label for="tel"><b>Tel:</b></label>
<input type="text" name="tel" id="tel" class="input" />
<label for="email"><b>Email:</b></label>
<input type="text" name="email" id="email" class="input" />
<label for="kund"><b>Kund:</b></label>
<textarea name="kund" id="kund" rows="4" cols="40"></textarea>
<label for="ktel"><b>Tel:</b></label>
<input type="text" name="ktel" id="ktel" class="input" />
<label for="art"><b>Berörd Artikel:</b></label>
<textarea name="art" id="art" rows="3" cols="40"></textarea>
<label for="fel"><b>Fel på varan: </b></label>
<textarea name="fel" id="fel" rows="2" cols="40"></textarea>
<label for="q1"><b>Installation gjord av fackman:</b></label>
<select name="q1" id="q1">
<option value="Ja">Ja</option>
<option value="Nej">Nej</option>
</select>
<label for="q2"><b>Serviceverkstad:</b></label>
<input type="text" name="q2" id="q2" class="input" />
<label for="q3"><b>Servicenr:</b></label>
<input type="text" name="q3" id="q3" class="input" />
<label for="q4"><b>Serienr:</b></label>
<input type="text" name="q4" id="q4" class="input" />
<label for="q5"><b>Inom garanti eller reklamation:</b></label>
<select name="q5" id="q5">
<option value="Garanti">Garanti</option>
<option value="Reklamation">Reklamation</option>
</select>
<label for="q6"><b>Informerat om punkt 8:</b></label>
<select name="q6" id="q6">
<option value="Ja">Ja</option>
<option value="Nej">Nej</option>
</select>
<label for="q7"><b>Har kund själv gått igenom manual för felsökning:</b></label>
<select name="q7" id="q7">
<option value="Ja">Ja</option>
<option value="Nej">Nej</option>
</select>
<label for="q8"><b>Ordernr:</b></label>
<input type="text" name="q8" id="q8" class="input" />
<label for="q9"><b>Inköpsdatum:</b></label>
<input type="date" name="q9" id="q9" class="input" /><br>
<p><button type="submit">Submit!</button></p>
</form>
</div>
</body>
</html>
hope it makes sense and again, sorry if it turns out to be a noob question :) i have used 2 days googling and testing and i have simply come to a point where i need a little push in the right direction again.
Thanks in advance.
p.s to explain short what my goal is, then i have 1 webform that generates a txt file and saves it on a server, then another form, where the "admin" can choose the file from the drop down, get the info in that the client filled out in the txt version and then fill out what he needs to fill out and then have it saved and sent as a PDF to a technician.
You could use
echo '<select id="select" name="select">';
while($file = readdir($dir))
{
echo '<option value="'.$file.'">'.$file.'</option>';
}
echo '</select>';
And after it has been loaded to the DOM, use
document.getElementById('select').onchange=changeSelect;
function changeSelect(){
document.getElementById('refnr').value=document.getElementById('select').value;
}
changeSelect();
See it here: http://jsfiddle.net/7nzBS/
I wanted it to put "test2.txt" in between the "" at `<?php $myFile = ""`
You can't do such a thing, because the "text2.txt" is at the client side and the $myfile, php variable, is at the server side. If you want to access data of a client side from server side, you need to send data via HTTP. So you have two choices:
Send the selected value via HTTP post or get.
Send the selected value via AJAX.
Thank you Oriol, that worked :)
the code now looks like this and is working as i needed it to.
Also thanks for all other suggestions, lovely with quick and helpful replies :)
<label for="refnr"><b>Referensnummer:</b></label>
<input type="text" value="<?php $selectedfile = #$_POST['file2']; $myFile = "files/$selectedfile"; $lines = file($myFile); echo $lines[0]; ?>" name="refnr" id="refnr" class="input" />
I'm not sure how to ask what I'm looking for to search how-tos. I am building a form and one of the entries requires users to list an appliance, its voltage, watts, amps, phase, etc.
I'd like a simple row with "X" columns providing the text areas for one appliance and then the ability to click a link to 'add another appliance' using jquery/html.
I like using placeholder text to save space on the page. I can get all this set up just fine for a single entry like 'name' however I don't know how to implement an 'add entry' row. All of the data is stored via PHP in MySQL.
So A: What is the name of this type of form section. B: What is it called when we want to let the user add a row to this section?
I love making things harder than they really are. It's my specialty. I guess :)
EDIT: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit
Using this format with 5 columns per entry (though it will all be on one line/row) I'd like to have an "add entry" link which generates a new blank entry option.
#elecNeeds input[type=text], textarea {
font-size: 12px;
font-style: italic;
width: 15%;
height: 20px;
padding: 10px;
color: #212323;
background: #E3E3E3;
background: rgba(255, 255, 255, 0.5);
border: 2px #000 solid;
margin-bottom: 10px;
position: relative;
behavior: url(/js/PIE.htc);
}
<div id="elecNeeds">
<input type="text" name="appliance" placeholder="Type of Equipment">
<input type="text" name="voltage" placeholder="Voltage">
<input type="text" name="watts" placeholder="Watts">
<input type="text" name="amps" placeholder="Phase">
<input type="text" name="notes" placeholder="Notes">
<br /> Add an appliance
</div>
I don't know what's it called, but you probably want this - http://jsfiddle.net/uPWkf/1/
<form method="post" action="#" id="myForm">
<div id="nameFields">
<label>Watt <input type="text" name="watt0" /></label>
<label>Volt <input type="text" name="volt0" /></label>
<label>Amp <input type="text" name="amp0" /></label><br/><br />
</div>
<input type="submit" value="submit" id="submit" />
</form>
Add New Row
and the JS
var i = 1;
$("#addRow").click(function() {
$("#nameFields").append('<label>Watt <input type="text" name="watt' + i + '" /></label><label>Volt <input type="text" name="volt' + i + '" /></label><label>Amp <input type="text" name="amp' + i + '" /></label><br/><br />');
i++;
});
$('#myForm').submit(function() {
var values = $('#myForm').serialize();
alert(values);
});
I think You need to use $(selector).append('<code>'); function. For example:
Add
<table class="my_fuits">
<tr>
<td>Fruit</td>
<td><input type="text" name="fuits[]" /></td>
</tr>
</table>
and js(jQuery) code:
$(document).ready(function(){
// add one more row
$(".add").live('click',function(){
$(".my_fuits").append('<tr><td>Fruit '+$(".my_fruits input").length+'</td><td><input type="text" name="fuits[]" />[X]</td></tr>');
return false;
});
// remove row
$(".remove").live('click',function(){
$(this).parent().parent().remove();
return false;
});
});