How can I retrieve a value from HTML hidden field then its value is changed (all time value ischanged by other javascript), without a button. Every time the value changes (value is changed without page refresh), I want to grab it with javascript/ajax/JQuery without any button press.
UPDATE
How I change the hidden fields
<?php
echo '<select name="d2" onchange="checkTextbox12(this)">';
for($i=0; $i<=$d2; $i++){
echo
'<option value='.$i.'>'.$i.'</option>';
}
echo '</select>';
?>
</td>
<td id="kiek250decaffeinatoTest">
<script>
function checkTextbox12(element){
var kiek = element.value * 14;
document.getElementById('kiek250decaffeinatoTest').innerHTML = kiek + " LT";
document.getElementById('kiek250decaffeinatoKaina').value = kiek;
kiekis(kiek);
}
</script>
</td>
<input type="hidden" name="kiek250decaffeinatoKaina" onchange="" id="kiek250decaffeinatoKaina" >
With jQuery you would need to wire-up a change event to your hidden field.
$(function() {
$("#hiddenfield").change(function() {
alert($(this).val());
});
});
http://api.jquery.com/change/
Use a javascript onChange function:
<input type="text" onchange="myFunction()">
Put this in your html and link to whatever javascript function you want to execute.
Since hidden fields do not trigger change events when their values are changed by javascript you will have to manually fire the event after your code has changed the hidden fields value.
<input type="hidden" id="myhiddenfield" value="0" />
then in javascript
$("#myhiddenfield").change(function(){
alert("field changed");
});
function changeField(){
$("#myhiddenfield").val(55);
//Manually trigger the change event.
$("#myhiddenfield").change();
}
changeField();
JSfiddle demo
If you the code changing the field is not your code (like changed from some library) you will have to setup a timer(setTimeout,setInterval etc) to constantly watch the field for changes.
Related
I am trying to make the input type text field editable on click with button but it is not working properly. tried all possible thing any suggestion please
<html><body>
<script>
$(document).ready(function()
{
$('#btnEdit').click(function()
{
$("input[name='name']").removeAttr("readonly");
});
});
</script>
<?php
require_once ('connectdb.php');
$sql = "SELECT * FROM general_information";
$result = $dbhandle->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
?>
<form>
<input type = "text" name = "name" value = <?php echo $row["email"];?> readonly>
<button class="btn btn-primary" id="btnEdit" > edit </button>
<?php } } ?>
</form>
</body></html>
There are two problems I see in the code,
Button is submitting the form and reloading the page. Use preventDefault() to override form submit.
Use prop instead of removeAttr.
$(document).ready(function(){
$('#btnEdit').click(function(e){
e.preventDefault();
$("input[name='name']").prop("readonly", false);
});
});
UPDATE from #cmorrissey comment.
In textbox, quotes are missing in the value attribute
<input type = "text" name = "name" value = "<?php echo $row["email"];?>" readonly>
Your button is posting the form thus reloading the page so Change your button and give it an onclick event function like onclick="editInputField()":
Edit
Give the input and id:
<input type = "text" id = "name" name = "name" value = <?php echo $row["email"];?> readonly>
Then your javascript function to make the input editable:
<script type="text/javascript">
function editInputField(){
document.getElementById("name").readOnly = false;
}
</script>
EDIT
I noticed you using jquery even though the question is tagged with javascript.
The reason why your code is not working has to do with:
1: The button as mentioned earlier so change it to:
Edit
2: How your targeting the input field, use the field id like this:
$("#fieldID").removeAttr("readonly");
You can use disable or readOnly attributes. Here you have two examples.
<input type="text" id="name" disabled="disabled" value="Example"/>
<input type="text" id="name2" readonly="readonly" value="Example2"/>
<button onclick="myFunction()">Click me</button>
function myFunction() {
document.getElementById("name").disabled = false;
document.getElementById("name2").readOnly = false;
}
I have a form with text boxes and drop down menus. One of the drop down menus is Dependant on the value of another, e.g. InventoryUsage is dependent on the value in InventoryID.
So far I have done the entire site using PHP since I do not know JavaScript, though I found a JavaScript function that can get the value entered in InventoryID, but I cannot use that value in the PHP since PHP is server-side.
What I need to do is change the second dropdown options depending on that of the first dropdown. Then submit the data as I would with a normal form.
Edit:
I used ob_start and included the tpl page and sent all the variables to the page which were pulled from the database prior. All the variables have the same index meaning that InventoryID['0']=ID3456 corresponds to InventoryUsage['0']=60. Therefore when InventoryID is ID3456 i would like to display the Number located at InventoryUsage['0']. I hope this adds some context to the problem.
The index is determined by the php variable $i in my code snippet. The $i would be changed to match the index of the InventoryID field. Say the value of InventoryUsage is 20 then I want to display numbers 1 to 20.
Snippet of code below:
<label>TypeOfSurgery</label> <input type="text" name="TypeOfSurgery" size="35" value="" />
<label>CauseOfSurgery</label> <input type="text" name="CauseOfSurgery" size="35" value="" />
<label>AnaesthesiaUsage</label> <input type="text" name="AnaesthesiaUsage" size="35" value="" />
<label>SurgeryOutcome </label> <input type="text" name="SurgeryOutcome" size="35" value="" />
<label>RecoveryTime</label> <input type="text" name="RecoveryTime" size="35" value="" />
<label>Stages </label> <input type="text" name="Stages" size="35" value="" />
<label>EmployeeName </label> <p>
<select name="EmployeeName">
<option value=""></option>
<?php
for($i=0;!empty($EmployeeName[$i]);$i++)
echo '<option value="">'.$EmployeeName[$i].'</option>';
?>
</select><p>
<label>Cost</label> <input type="text" name="Cost" size="35" value="" />
<label>InventoryID</label> <p>
<select name="InventoryID">
<option value=""></option>
<?php
for($i=0;!empty($InventoryID[$i]);$i++)
echo '<option value="">'.$InventoryID[$i].'</option>';
?>
</select><p>
<label>InventoryUsage </label> <p>
<select name="InventoryUsage">
<option value=""></option>
<script type="text/javascript">
var model= document.getElementById('InventoryUsage');
</script>
<?php
//if inventory in
for($i=0;!empty($InventoryUsage[$i]);$i++)
echo '<option value="">'.$InventoryUsage[$i].'</option>';
?>
</select><p>
In order to populate the InventoryUsage dropdown you need to use JavaScript.
You can use the onChange event for the dropdown InventoryID then fetch the corresponding values via Ajax.
$('#InventoryID').change(function () {
var value =$(this).val(); // selected InventoryID option
//get InventoryUsage values
$.ajax({
method: "POST",
url: "myfile.php",
data: { data: value },
success: function(data){
// Populate new dropdown $("#InventoryUsage")
// this is an example without knowing what is the returned data
var Newoptions = [];
for (var i = 0; i < data.length; i++) {
Newoptions.push('<option value="',
data[i].someValue, '">',
data[i].someName, '</option>');
}
$("#InventoryUsage").html(Newoptions .join(''));
}
});
});
});
then in your PHP file you need to handle the $_POST['data'] , then query your database and return the drop-down options( Arrays ) that will be populated above...
edit :
If you are sure that this index matches the Inventory_Usage and that the InventoryUsage dropdown has previously been populated then
you could try to select the InventoryUsage option using the index of the InventoryID dropdown on change and load events...
try adding this function to you select :
<select name="InventoryID" onChange="set_inventory_usage()"></select>
then add this script to your page's HEAD section..
<head>
<script type="text/javascript">
function set_inventory_usage(){
// Change to getElementById if it is the ID not the name
var Inventory_ID = document.getElementsByName('InventoryID')[0];
var Inventory_Usage = document.getElementsByName('InventoryUsage')[0];
// returns the index of the selected option in the InventoryID dropdown
var InventorySelected = Inventory_ID.selectedIndex ;
// Sets the Usage dropdown to the same index as the Inventory selected option
Inventory_Usage.selectedIndex = InventorySelected ;
}
window.onload = set_inventory_usage ;
</script>
</head>
Option 1: Without JavaScript, the best option is to add an onchange to your first dropdwon list, and when a value is selected submit the form. Since the form is not complete, and only the dropdown value and elements before that are passed, you can set a condition to query the database, get values based on first drop down and reload the form with those options. IThere is nothing wrong with this solution if done properly but to be honest I perfer to do such things with Ajax, hence option 2 below.
Option 2: Learn some JavaScript and use Ajax (Use caution when using other people's scripts in your system)
Edit: Perhaps instead of wring Ajax code from scratch, use jQuery where most things are already done for you. Learning jQuery is very useful if you are going to do web development
I am trying to remove parent div if the input value is empty and show parent div if the input value is not empty?
the value of the input field is dynamic which means the value of it is the value of another input filed and I do this using javascript.
so far I haven't been able to show/hide the parent div for some reason. and I suspect the reason is because the value of the input field is dynamic which means the users are not typing anything in that input field. they are typing in another input filed and the value of the dynamic input field gets updated accordingly.
Here is what i have so far for show/hide the parent div:
HTML:
<div id="BOTTEXT2" class="secTxt">
<input type="text" class="sect2" id="sect2" style="border:none; background:none; " value="" size="12" readonly="readonly"/>
</div>
JAVASCRIPT:
<script type="text/javascript">
if(document.getElementById("sect2").value == ""){
document.getElementById("BOTTEXT2").style.display="block";
}
</script>
could someone please help me out with this?
Wrap your code in an event handler:
window.onload = function() {
var input = document.getElementById('sect2');
input.addEventListener('change', function() {
document.getElementById('BOTTEXT2').style.display = (input.value ? 'block' : 'none');
}, false);
};
This way, whenever you update the input, the div state changes accordingly.
I don't know if it will work for you, but follow the solution.
I created another input type out of main div to simulate the situation.
I used jQuery. After that, you can set your css of your way.
HTML
<div id="BOTTEXT2" class="secTxt">
<input type="text" class="sect2" id="sect2" style="border:none; background:none; " value="BSAU145D" size="12" readonly="readonly"/>
</div>
<input type="text" id="sect1">
Javascript (jQuery)
$(document).ready(function(){
$('#sect1').keyup(function(){
if($('#sect1').val() == 'test') {
$('#BOTTEXT2').css({'display':'none'});
} else {
$('#BOTTEXT2').css({'display':'block'});
}
});
});
Here is the fiddle
I am currently using jquery ui datepicker for two input fields. In order to call the calendar the inputfield must have a class of datepicker. I am using a for loop in the javascript to generate the input fields. I have added the class datepicker to each input field that can be possibly generated. But no calendar appears. In the firebug console the html does show that the input fields have class datepicker. Now if do this with a static input field it works fine. How can I display calendar when the field is click? Example
In the jquery this is the line where i set the class:
content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>';
Full Jquery code
<script>
$(document).ready(function () {
$('select').change(function() {
var option = $(this).val();
showFields(option);
return false;
});
function showFields(option) {
var content = '';
for (var i = 1; i <= option; i++) {
content += '<div id="course_'+i+'"><label>Course # '+i+'</label><br /><label>Course Name:</label> <select id="coursename_'+i+'" name="coursename_'+i+'"><option value="">--- Select ---</option>"'
<?php
$course_query = $db_con->prepare("SELECT course_id, course_name FROM courses_selection_list ");
$course_query->execute();
$data = $course_query->fetchAll();
foreach ($data as $row) {
//dropdown values pulled from database
echo 'content += \'<option value="' . $row['course_id'] . ':'.$row['course_name'].'">' . $row['course_name'] . '</option>\';';
}
?>
'"';
content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>';
}
$('#course_catalog').html(content);
}
});
$(function() {
$( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" }).val();
});
</script>
HTML
<form action="courses.php" method="POST">
<b>Select the course</b>
Academy<input id="academy_id" name="acad_id" placeholder="Academy ID" type="text" />
Courses being offered?
<select name="courses_offered">
<option value="default">---Select---</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="course_catalog"></div>
Static input: <input type="text" id="last_contacted_date" name="last_contacted_date" class="datepicker" />
<input value="SAVE" name="submit" type="submit">
</form>
What you want to do is make sure that the datepicker code runs after the content has been created and added to the DOM. The easiest way to do this would be to move the datepicker code inside your showFields method, right at the end. Like this:
function showFields(option) {
. . . rest of method . . .
$('#course_catalog').html(content);
$('#course_catalog').find(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
}
The $('#course_catalog').find(".datepicker") part will make sure that only the dynamically added datepicker fields will be initialized (you don't want to run it again against the static ones).
Include jQuery UI to your page.
http://jqueryui.com/download/
In the <head>:
<script type=text/javascript src="your_jquery_ui.js"></script>
Ok, you included the jQuery UI, now check your class is not hasDatepicker instead of datepicker ?
As you see here: http://jqueryui.com/datepicker/
Since you're adding inputs (datepickers) dynamically, the easiest solution is to add this:
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});
jsFiddle example
BTW, you really only need one document ready call in your page.
I am trying to submit a form using jQuery. My code so far
JQuery:
$(document).ready(function () {
$("#display").on("change", "input:checkbox", function () {
$("#display").submit();
});
});
PHP:
<form id="display">
<input type="checkbox" name="hd" value="1"
<?php
if ($_SESSION['hd'] == 1) {
echo "checked=\"checked\"";
}
?>>HD
<input type="checkbox" name="sd" value="1"
<?php
if ($_SESSION['sd'] == 1) {
echo "checked=\"checked\"";
}
?>>SD
</form>
The submit functions works fine but it does not retain the values in the form, it seems the submit is fired before values are assigned. What can be done?
it seems the submit is fired before values are assigned
Are checking $_SESSION[] for your value? This simply won't get set from a form submission. You likely mean $_POST['hd'].