I have two input forms. I want the second input form to appear when the user focuses on the first input form. I used a simple javascript "onfocus" within the input tags. This worked fine when it was changing the style of another input form. This however left an unwanted gap. I tried making it so the entire div group appeard onfocus but it had no effect.
I want to make the entire "form-group" div to appear when the user focuses on the first input form but for some reason, this is not working at all.
HTML
<div class="form-group<?php if(form_error('con_password') != ''){ echo " has-error"; } ?>">
<div class="col-md-10">
<input type="password" name="con_password" class="form-control input-lg" placeholder="Password Confirmation" onfocus="occupation.style.display='block'">
<span class="help-block"><?php echo form_error('con_password'); ?></span>
</div>
</div>
<div class="form-group<?php if(form_error('occupation') != ''){ echo " has-error"; } ?>" id="occupation">
<div class="col-md-10">
<input type="text" name="occupation" class="form-control input-lg" value="<?php echo set_value('occupation'); ?>" placeholder="Occupation" onfocus="hearus.style.display='block'">
<span class="help-block"><?php echo form_error('occupation'); ?></span>
</div>
</div>
CSS
#occupation{
display: none;
}
onfocus="occupation.style.display='block' should be onfocus="document.getElementById('id').style.display=block"
onfocus="document.getElementById('occupation').style.display='block'"
In your handlers, the code does not know what "occupation" (for ex.) is. You need to get a reference to it, then manipulate its style.
Related
I have a modal and in this modal, I have a checkbox, The checkbox function can only be used on the first line table.
Code is like this, the checkbox function works but only on the first row of the table, henceforth the modal process doesn't work, I've tried adding
<?php echo $data['id_user']; ?>
to the ID but it still doesn't work.
<div class="form-group">
<label for="ubah_password">Ubah Password</label>
<div class="form-group">
<input type="checkbox" id="ubah_password" name="ubah_password" value="1">
<label class="prevent-select" for="ubah_password"> Ya, saya ingin mengubah password</label>
</div>
</div>
<div id="form_password" style="display: none;">
<div class="form-group">
<label for="editPassAdmin">Password Baru</label>
<input type="password" class="form-control form-control-sm" id="editPassAdmin" name="editPassAdmin" placeholder="Masukkan password baru">
</div>
<div class="form-group">
<label for="password_confirm">Konfirmasi Password</label>
<input type="password" class="form-control form-control-sm" id="password_confirm" name="password_confirm" placeholder="Masukkan kembali password baru">
</div>
</div>
<script>
var checkbox = document.getElementById("ubah_password");
var formPassword = document.getElementById("form_password");
checkbox.addEventListener("change", function() {
if (this.checked) {
formPassword.style.display = "block";
} else {
formPassword.style.display = "none";
}
});
</script>
The HTML ID attribute is designed to be unique, so even if you repeat it, you need to select them all, then individually in your JavaScript to load the modal.
Also, the name attributes should probably be unique enough for your form PHP code to tell which password you are changing.
For example, you could change the ID attributes to something like:
id="ubah_password[<?php echo $data['id_user']; ?>]"
I have a modal that pops out and displays a few variables. After displaying these variables, it has a dropdown with a few options. I'm trying to get it so that what value they choose inside the dropdown is able to be converted to a tag so i can use it in an operation after they choose it. After they choose the dropdown, let's say they choose 10x, I need to pull the value of 10 after they choose it, to use it to multiply the $netincome tag i have inside. Here's my code:
<div class="modal-body">
<?php echo form_open(base_url('admin/work/start_working'), 'class="form-container"'); ?>
<div class="form-group has-feedback">
<input type="text" name="basin" id="basin" value="<?= $netincome; ?> <?= $ress; ?>" class="form-control" placeholder="<?= $netincome; ?>" > <center>&</center> <input type="text" name="basin" id="basin" value="<?= $netincome2; ?>" class="form-control" placeholder="Cash: <?= $netincome2; ?>" >
</div>
<br>
<div class="form-group has-feedback">
<select id="times" name="times" class="browser-default custom-select custom-select-lg mb-3">
<option value="1" selected>1x</option>
<option value="2">2x</option>
<option value="5">5x</option>
<option value="10">10x</option>
<option value="20">20x</option>
<option value="40">40x</option>
<option value="42">42x</option>
</select>
</div>
<br>
<?php
$amt = WHERE I'M TRYING TO PULL THE OPTION VALUE ABOVE;
?>
<?php
$finalamt = $netincome * $amt;
?>
<div class="form-group has-feedback">
<input type="text" name="netin" id="netin" value="<?= $finalamt; ?> <?= $ress; ?>" class="form-control" placeholder="<?= $finalamt; ?>" > <center>&</center> <input type="text" name="basin" id="basin" value="<?= $netincome2; ?>" class="form-control" placeholder="Cash: <?= $netincome2; ?>" >
</div>
</div>
Under the dropdown is the $amt tag and under that is where i multiply $netincome * $amt. I just can't seem to capture the option value. I'm not very fluent in Javascript so I'm not sure if that will be a better option here.
write a event listener for select onchange event on submit the form
$(document).ready(function(){
$('#times').change(function(){
// Call submit() method on <form id='myform'>
$('#myform').submit();
});
});
then get date with post method $_POST['times'] on server side
If you are trying to get the value using PHP then you have to submit form in order to get value using
$_POST['times'];
or if you want it without pageload then you can use Jquery
var times = $('#times').val();
and you can multiple it in jquery and show it somewhere the some of that like:
var total = times * 10;
to show this total somewhere like in an element with id abc:
$('#abc').html(total);
Your final code will be:
<div id="abc"></div>
<script>
$(document).ready(function(){
$('#times').change(function(){
var times = $('#times').val();
var total = times * 10;
$('#abc').html(total);
});
});
</script>
Your final code will be:
<div id="abc"></div>
<script>
$(document).ready(function(){
$('#times').change(function(){
var times = $('#times').val();
var total = times * 10;
$('#abc').html(total);
});
});
</script
I have some data being created(generated from database) using a while loop. Each set of data carries some form of id and its corresponding button is added to it. Now, when I click a button, I'd like to pass the id(single php variable) of the data related to this button to a modal window(that has a form) that pops and also make it the value of an input field. Here's my code so far:
The data from database:
<?php while ($data = mysqli_fetch_assoc($data_set)) { ?>
<div class="w3-section w3-row w3-card-2">
<div class="w3-half">
<div class="apartment-image w3-card-4">
<header class="w3-container">
<h4><?php echo $data['data_name']; ?></h4>
</header>
<div class="w3-container">
<img src="<?php echo "images/".$data['Image1']; ?>" class="w3-image" alt="<?php echo $data['dataimgname']; ?>">
</div>
<footer class="w3-contanier w3-border-top">
<div class="w3-border-right">
<button class="w3-btn w3-btn-block" type="button" name="btnBook" id="modalOpener" onclick="document.getElementById('book').style.display='block';">
Book or Request Tour
</button>
</div>
The Modal:
<div id="book" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container">
<span onclick="document.getElementById('book').style.display='none'" class="w3-closebtn">
×
</span>
<h2>Book or Request Tour</h2>
</header>
<div class="w3-container">
<form class="w3-form" action="bookntour-handler.php" method="post">
<div class="w3-group">
<label class="w3-label" for="fullname">Full Name:</label>
<input class="w3-input" type="text" name="fullname" value="">
</div>
<label class="w3-label" for="email">E-mail:</label>
<input class="w3-input" type="email" name="email" value="">
<label class="w3-label" for="telephone">Telephone:</label>
<input class="w3-input" type="text" name="telephone" value="">
<label class="w3-label" for="dataname">Data Name:</label>
<input class="w3-input" type="text" name="dataname" value="">
<div class="w3-group">
<input class="w3-btn" type="submit" name="btnSubmit" value="Submit">
</div>
</form>
</div>
<footer>
</footer>
</div>
Like I said earlier, I want to pass the id associated with the button but from my code there is nothing that mentions about "id" so let's use.
<?php echo $data["data_name"]; ?>
When I open the modal window, I'd like this variable to be made as the value for input:
<label class="w3-label" for="dataname">Data Name:</label>
<input class="w3-input" type="text" name="dataname" value="">
I have looked at a couple of options so far but most of them seem unnecessary in my case or I simply don't understand them. Like this and this and this. This seems like a workable solution but it requires me to fetch the whole data again, from the database(using AJAX) which I do not want. I just want that one value.
I am using W3CSS for my layouts and creating the modal. A solution in jQuery/JavaScript or PHP(or both) will be appreciated. Thank you!
Update
So, I somehow managed to solve part of the problem. I added this function to my external JavaScript file:
function showModal() {
document.forms["bookntourForm"]["apartmentno"].value = document.getElementsByClassName("modalOpener")[0].getAttribute("value");
document.getElementById('book').style.display='block';
}
Then the code for the button that calls the above function looks like this:
<button class="w3-btn w3-btn-block modalOpener" type="button" name="btnBook" onclick="showModal()" value="<?php echo $data['data_name']; ?>">
Book or Request Tour
</button>
This brings up a new problem. Whenever I open the modal, the value for <input class="w3-input" type="text" name="dataname" value=""> on the modal is the same for all modals although they are different when each button is generated.
You can pass your id through ajax to the backend and retrieve necessary data regarding that ID by using a query,
Then set values to the necessary place inside the success method.
As you say, I don't think as a good suggestion to use data_name instead of id.
you can set your id in hidden field and use it. because "data_name" will not be good solution to retrieve data by unique field.
I don't know if I have done this in a proper manner, but it was as simple as this. I changed the value of onclick attribute of the button to:
<button class="w3-btn w3-btn-block modalOpener" type="button" name="btnBook" onclick="showModal('<?php echo $apartment["ApartmentNo"]; ?>')">
Book or Request Tour
</button>
The showModal() function in the external JS now looks like this:
var aptNo;
function showModal(aptNo) {
document.forms["bookntourForm"]["apartmentno"].value = aptNo;
document.getElementById('book').style.display='block';
}
It now works the way I wanted.
I am trying to update query using php and database and display the textarea in a page. Here is my code,problem is i get the text area with some whitespace. Please help.
if (isset($_POST["events"])&&isset($_POST["description"]))
{
$id=$_POST["id"];
$title=$_POST["events"];
$description=$_POST["description"];
}
HTML
<form action="hotel1_galery_eventedit.php" method="post" class="col-sm-4" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?php echo $val->event_id;?>">
<div class="form-group has-info">
<label class="control-label" for="inputSuccess">Event title</label>
<input type="text" class="form-control" name="events" value="<?php echo $val->event_title;?>">
</div>
<div class="form-group has-info">
<label class="control-label" >Event Description</label>
<textarea name="description" class="form-control text-left" rows="3">
<?php echo $val->event_description;?>
</textarea>
</div>
</form>
Have you tried trim() function. use like this
<textarea name="description" class="form-control text-left" rows="3">
<?php echo trim($val->event_description);?>
</textarea>
hope this will help you.
use trim();
if (isset($_POST["events"])&&isset($_POST["description"]))
{
$id=$_POST["id"];
$title=trim($_POST["events"]);
$description= trim($_POST["description"]);
}
if (isset($_POST["events"])&&isset($_POST["description"]))
{
$id=mysql_real_escape_string(trim($_POST["id"]));
$title=mysql_real_escape_string(trim($_POST["events"]));
$description=mysql_real_escape_string(trim($_POST["description"]));
}
It's a secure method to protect our db from unexpected problems and you can also show data without any extra space...
Keep your textarea code in same line, the enter inside text area is causing this issue.
<textarea name="description" class="form-control text-left" rows="3"><?php echo $val->event_description;?></textarea>
The enter which you have added before echoing the value is the reason for this.
Use trim() with conditions, if value will be blank in text area then it will be treated as NULL or you can use ''
if(isset($_POST["events"])&&isset($_POST["description"])){
$id=$_POST["id"];
$title=$_POST["events"];
$description= ($_POST["description"] == '') ? NULL : trim($_POST["description"]);
}
What I'm trying to do
On the user click, I wish to focus on the first input in the (only) form inside the child div with the class detailEdit.
The jQuery code I have works - but it seems like a fairly long way round. Is there a shorthand version?
My Code
HTML/PHP
<div class="detailEdit">
<form id="frm_contact">
<span>Office:</span><br/>
<input type="text" placeholder="Company Telephone" id="frm_tel2" name="tel2" maxlength="11" value="<?php echo $userData['tel1']; ?>" />
<span>Mobile:</span><br/>
<input type="text" placeholder="Mobile Number" id="frm_tel1" name="tel1" maxlength="11" value="<?php echo $userData['tel2']; ?>" />
<input type="submit" value="Submit" name="submit" />
</form>
</div>
jQuery
$(this).children('div.detailEdit').first().children('form').first().children('input').first().focus();
Try something like this :
$('.detailEdit').find('input:first').focus();
You have input id, why not use it
$('#frm_tel2').focus();
you can also use
$('.detailEdit input:first').focus();
try this:
$('#frm_contact').find('input:first').focus();
or this if you don't want to use id of the form:
$('.detailEdit').find('form').find('input:first').focus();