I have textboxes created with DB fields and a "E" for Edit link next to it. Initially the text fields are disabled. If the user wants to modify the value from DB they would click the link and the textbox next to it will be enable. The problem is that it is modifying the first text box of the same code number. This is probably because the id attribute on text field is the same and I would like to properly identified text but have failed.
Here is my code
<input type="text" name="form_line[code]" size="10"
value='<?php echo bucks($tmp['adj_amount']); ?>' disabled="true" id="editable"/>
<a id="myedit" title="Click to Edit Adjustment Value" href="#" onclick="edit_adj();return false;">E</a>
<script type="text/javascript">
function edit_adj() {
document.getElementById("editable").disabled = false;
}
</script>
An example of output is shown below and if I click on "E" the first textbox gets enabled :(
I think this will work for you:
<?php
for ($x=0; $x<=10; $x++) {
?>
<input type="text" name="somename" size="10"
value='<?php echo "hello" ?>' disabled="true" id="editable<?php echo $x ?>"/>
<a id="myedit" title="Click to Edit Adjustment Value" href="#" onclick="edit_adj(<?php echo $x ?>);return false;">Edit</a>
<br/>
<?php
}
?>
<script type="text/javascript">
function edit_adj(id) {
document.getElementById("editable"+id).disabled = false;
}
</script>
Hope this helps!
Essentially, this is giving a unique id to each text field and passing the id into the javascript that enables the text field in question. I created a test page locally and it worked.
Related
I am displaying online users. When I click one of the user, corresponding user should be displayed in the text box below. I am using javascript for this, but it is taking only the first user. When I click the second user, first user is displayed in the below text box. Why is it taking only the first array?
<?php
foreach($query as $row)
{
?>
<input type="text" name="user" id="user" value="<?php echo $row->users;?> onclick="select_online()">
<?php
}
?>
<script>
function select_online()
{
var user=document.getElementById("user").value;
document.getElementById("usersonline").value=user;
}
</script>
Name:<input type="text" name="usersonline" id="usersonline">
First of all, using the same id for many elements is a mistake. You should make diverse id attribute for generated inputs.
Second, you should use this to get the value of the current element:
function select_online()
{
var user=this.value;
document.getElementById("usersonline").value=user;
}
document.getElementById("user") statement will always select the element which id attribute is equal to "user" and it will always be the same. Most probably, that is not what you want. If I understood you correctly, you want to get value of the clicked element, so as I mentioned before, you can achieve it using this expression, which points to the currently clicked element.
You should give a unique name to your inputs. You cannot reuse id="user" multiple times or javascript will not be able to find each input element.
The following would be better:
<?php
$id = 0;
foreach($query as $row) {
$id += 1;
?>
<input type="text" name="user" id="user-<?php echo "$i"; ?>" value="<?php echo $row->users;?> onclick="select_online(<?php echo "$i"; ?>)">
<?php
}
?>
<script>
// Move script outside loop
function select_online(i) {
var user = document.getElementById("user-" + i).value;
document.getElementById("usersonline").value = user;
}
</script>
Name:<input type="text" name="usersonline"id="usersonline">
As per the HTML standard, there should be unique id in a document. But in your case you are generating multiple input tags with id = user. Javascript's document.getElementById is able to get only element with id = user.
For this you can change your code like this:
<?php foreach($query as $row) { ?>
<input type="text" name="user" id="user" value="<?php echo $row->users;?>" onclick="select_online(this)">
<?php } ?>
<script>
function select_online(elm) {
var user=elm.value;
document.getElementById("usersonline").value=user;
}
</script>
Name:<input type="text" name="usersonline"id="usersonline">
Here onclick, we are passing the refferance of the input tag. So we can get the refferance of the clicked input.
<input type="text" name="user" id="user" value="<?php echo $row->users;?> onclick="select_online()">
You are setting id as user for all the users so when you use selector document.getElementById("user"), it always fetches the first row.
Never use same id for more than one element. It will always cause bugs.
I am creating HTML text at runtime like my following code.
<?php
session_start();
for(var i=1;i<=10;i++)
{
?>
<div id="mainDiv<?php echo $i; ?>">
<input type="text" id="myText<?php echo $i; ?>">
<button type="button" id="myButton<?php echo $i; ?>" onclick="myButtonClicked()">Click Me</button>
</div>
<?php
}
?>
It is working fine. Problem is now in retaining the values of these textboxes. When I refresh the page, all the values previously entered are gone. Do I need to create 10 sessions to retain the values of these 10 texts? Or, is there any other way of doing this?
You can use the locaStorage api for retain the user input by store/get to/from localStorage after page refresh.
setItem() and getItem() are used for store and get item from localStorage respectively.
Example
This html will be created by php
<input type="text" id="text1" value="" />
<button type="button" id="myButton1" onclick="myButtonClicked('text1')">Click Me</button>
<input type="text" id="text2" value="" />
<button type="button" id="myButton1" onclick="myButtonClicked('text2')">Click Me</button>
//like this other input and button will be created.
JS
if(localStorage.getItem('resArr') == null){
var resultArr = [];
}else{
resultArr = JSON.parse(localStorage.getItem('resArr'));
//---- get stored item from localStorage by json parsing
}
alert('the last item you entered is ' + resultArr[resultArr.length-1]);
function myButtonClicked(id){
var userVal = document.getElementById(id).value;
resultArr.push(userVal);
localStorage.setItem('resArr', JSON.stringify(resultArr));
//stored the entered value in localStorage by doing stringify
}
DEMO
I don't know if this will help you exactly
but you can achieve what you want through a form that submits to php_self..
<?php
//create blank array for storing text box values
for($i=1;$i<=10;$i++){
$textValue[$i]='';}
//if page reached via submission of button, store posted text box values in array
if(isset($_POST['myButton'])){
for($i=1;$i<=count($textValue);$i++){
$textValue[$i]=$_POST['myText'.$i];}}
?>
<!--create form that submits to same page-->
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" enctype="multipart/form-data" name="main">
<?php
//loop creates text boxes and buttons while getting text box default values from $textValue Array
for ($i=1;$i<=count($textValue);$i++){
echo '<div id="mainDiv'.$i.'">
<input type="text" id="myText'.$i.'" name="myText'.$i.'" value="'.$textValue[$i].'"/>
<button id="myButton'.$i.'" name="myButton" value="myButton'.$i.'">Click Me</button>
</div>
';}
?>
</form>
There are at most 15 text boxes in my page which is created on the click of a button.
What I want is to change the text color of only the text-box which is "SELECTED"; the color of all the other text boxes should not change.
Currently, I have a text color changer slider which changes the color of all the text boxes.
Click here to download the source code.
Please try this:
Include jscolor.js in your index file. You can see more demo and download also from this link http://jscolor.com/try.php
<div>
<?php
or($i=0;$i<15;$i++){?>
<div id="txt_add<?php echo $i; ?>" onclick="get_current_text(<?php echo $i; ?>);">
<div id="f<?php echo $i+1; ?>" class="bring_front"><span style="cursor:move"><input type="text" **class="box color"** placeholder="Sample text <?php echo $i+1; ?>" style="border:none; background:none; width:87px; margin-left:6px;" maxlength="10" onchange="set_color(<?php echo $i; ?>);"/></span></div>
</div>
<?php }?>
</div>
and put this code in javascript:
function set_color(txtid)
{
$("#txt_add"+txtid+" input").css('color','#'+this.color);
//document.getElementsByTagName('BODY')[0].style.backgroundColor = '#'+this.color
}
function get_current_text(id)
{
$("#prod div input").css("background-color","white");
$("#txt_add"+id+" input").css('background-color',"green"); $("#txt_add"+id+" input").css('color',"red");
}
Edit: 1)Change input class from box to box color
2) put this in input onchange="set_color();"
3) Put set_color function in your script
Im pulling out table information from a mysql db:
I need the buttons to select the information shown into a textfield, the below code works perfectly for the mobile_number but does not work for serial_number. both field types are varchars.
php to pull out info and html button
<?php while ($row = mysql_fetch_array($query)) { ?>
<td><?php echo $row['serial_number']; ?><input type="button" value="select" onclick="button(<?php echo $row['serial_number']; ?>)" /></td>
<td><?php echo $row['mobile_number']; ?><input type="button" value="select" onclick="button1(<?php echo $row['mobile_number']; ?>)" /></td>
text fields
<input type="text" id="textfield"/>
<input type="text" id="textfield2"/>
JS for the buttons
function button(text) {
$("#textfield").val(text);
}
function button1(number) {
$("#textfield2").val(number);
}
Thank you for your help in advance.
You should wrap text inside quotes, e.g.
onclick="button('<?php echo $row['serial_number']; ?>')"
Same for mobile (it works probably only because it's a number)
I would check if the column names being returned are the same as the ones you are referencing. Apart from that, use quotes, like #sebapalus suggested, and use the improved functions sqli
I have created an input fields populated by ids that I will use later to make a query in my database via javascript. Using foreach loop, the fields were populated correctly by their respective ids. Using javascript I want to be able to access this ids, however, using the onclick function that is based on their class name, the values for the first and second input fields are the only fields that returns the correct id value and the rest input field values were taken from the second input field having the id value of 2 instead of returning the right id value. What is the wrong with this? How could I retrieve right id values from this input fields? Thanks a lot. Here is my code
View:
<?php
foreach($data_currencies as $row){
?>
<div class="row-fluid">
<div class="span2"><input type='checkbox' class="currency_check_box" id='chk' name='currency_id[]' value="<?php echo $row->id; ?>" /></div>
<div class="span4" style="text-color:black;"><?php echo anchor("currencies/edit_currency/$row->id/$tennant_id",$row->pretty_name);?></div>
<div class="span4" style="text-color:black;"><?php echo $row->currency_code;?></div>
<div class="btn-group span1" id="condition" data-toggle="buttons-radio" >
<?php if($row->status==1) { ?>
<input type="text" value="<?php echo $row->id; ?>" class="btn active first" id="enable"/>
<input type="text" value="<?php echo $row->id; ?>" class="btn passive" id="disable"/>
<?php }
else{ ?>
<input type="text" value="<?php echo $row->id; ?>" class="btn off" id="enable"/>
<input type="text" value="<?php echo $row->id; ?>" class="btn active on" id="disable"/>
<?php } ?>
</div>
</div>
</address>
<address>
<?php
}
?>
Javascript
<script type="text/javascript">
$(".first").click(function(){
alert($(".first").val());
});
$(".passive ").click(function(){
alert($(".passive").val());
});
$(".off").click(function(){
alert($(".off").val());
});
$(".on ").click(function(){
alert($(".on").val());
});
</script>
Output:
Clicking the input field with id value 1
Clicking the input field with id value 2
Clicking the remaining input fields gives the same outputs
The problem is that you need to use the this keyword in your js. Otherwise you will just be getting the element with the first occurence of that class. Also considering all of your input fields have the 'btn' class why don't you change your js to
$(".btn").click(function(){
//Use 'this' to get the value of the element you clicked on
alert($(this).val());
});
Note You are looping through your rows in your PHP code but each time giving the elements the same id (id="enable" and id="disabled"). This will cause multiple elements to have the same id, which will invalidate your HTML and could cause you problems later on.
Try this
$(".first").click(function(){
alert($(this).val());
});
$(".passive ").click(function(){
alert($(this).val());
});
$(".off").click(function(){
alert($(this).val());
});
$(".on ").click(function(){
alert($(this).val());
});