Why onchange event taking me to new page? - javascript

I am trying to populate a text field with the value of the select field.
So based on the selection the text field should change.
In this case, I am selecting First Name and Last name of the person and in the
option value="I have person email here"
Now, I am using onchange event on select element which calls the findemail() function.
Problem is I am getting the correct emails return but
it redirect me to another page and show me the value there.
Can anyone please help me?
CODE
function findemail(e)
{
document.getElementById('man-email-add').innerHTML=document.write(e.value);
}
HTML (I am using PHP to get all the values)
<select id="manager_detail" onchange="findemail(this.options[this.selectedIndex]);">
<?php
foreach ($data['display']['userMangers'] as $manager){
echo $manEmail = $manager['Email'];
echo "<option value='$manEmail'>".$manager['First_Name'].' '.$manager['Last_Name'].' ('.$manager['Position'].')'.'</option>';
}
?>
</select>
Redirect to new page to show the value:

It's because you're using document.write() after the page has loaded, which doesn't look necessary here anyway:
document.getElementById('man-email-add').innerHTML= e.value;

Does it redirect to new page or reloads the same page showing the email? I believe it's doing the later as document.write(e.value); writes that value to the page. So replace document.write(e.value); with e.value;
If man-email-add is an input field, use document.getElementById('man-email-add').value=e.value;

Related

Automatically fill out textarea field from my database when selecting dropdown menu item

How can I automatically fill a textarea field with the text from the database and automatically display the associated text when selecting an item from the dropdown menu.
Textarea field were I want to post the data in:
<textarea
class="dropDown" Name="dropdownItem" Type="Text" id="dropdownItem" placeholder="New Option"
></textarea>
Thats only a quick try that prints out the same input as the dropdownItem from my database.
<script>
var select = document.getElementById('select');
var input = document.getElementById('TextAreaTemplate');
select.onchange = function(){
input.value = select.value;
}
</script>
I already connect to the database, but I just don't know how to do this.
Do I need more JavaScript?
What you are doing here is only putting the value from your input to your textarea.
You need to make a query to your database with the value you get from your input.
I guess your connection is made via PHP (since you put the PHP tag), so I would recommend you to use AJAX request to create your query with the value from your input.
Then, your response should contain the associated text to display in the textarea.
I found this resource which show the basis of AJAX and PHP if you need, but you probably can find better.

Get currently selected value in editable select box

I have used editable select Jquery plugin ,now the problem is i want the currently selected value of editable select control with out on change or other event
link to Editable select
I have tried following till now but no success
$('#customer_name').find('li.selected').value()
$('#customer_name').siblings('.es-list').find('li.selected').value()
$("#customer_name").val();
HTML
<select id="customer_name" name="customer_name" class="form-control">
<?php
foreach($customers as $customer){
echo "<option value='".$customer['cust_id']."'>".$customer['cust_name']." </option>";
}//foreach
?>
</select>
$('#customer_name').editableSelect();
I have dome some R&D regarding this question and I have found something which helps me to achieve the goal. So, I am sharing the Jquery code with the Link so that you can get more information.
Jquery code for getting the selected value:
$('#onselect')
.editableSelect()
.on('select.editable-select', function (e, li) {
console.log('Seletced Value: ');
console.log(li.val() + '. ' + li.text());
});
Ref. Website Jquery Editable Select Example
Thanks.
Try this
const x = $('#customer_name').attr('value')
this should work.
if this doesn't work, then your HTML element doesn't have an attribute called value, try adding a value & id to any HTML element then do $(id).attr('value') and you'll get the value attribute
I have read the docs but i could't find any solution so what i have done is stored the value of editable select in hidden filed for the first time and when user change the value then i have jquery to update the value .
if any one has solution please mention

Hold input=date value in HTML after submited button in table

I searched a lot but maybe because I am quite new here i couldn't fine a result that's works for my challenge.
Project view
What's is going on:
I have made page where users could click on a date-picker, after the user selected a date or a date range and they click on the submit button "Verzenden"the table that is positioned under the selection area shows all data from that specific date or date range that is available in the database.
In this table the user is able to adjust some data from a specific table row.
After clicking on the submit "Ok" button the changes the user made is pushed to the database.
Now my challenge:
After the user has changed some data from a row an they click on submit button "Ok" i want to achieve that the user is getting back to it's last date selection that he made before adjusting some data in a row table. What is the best way to handle this ?? I hope someone could help me, thanks already for participating and reading.
The term you're looking for is "pre-populating a form". You can pre-populate the form with PHP by generating HTML that has the value written directly in the HTML
<input type="text" value="<?php echo htmlspecialchars($someValue, UTF8, ENT_BOTH);?>">
Your homework probably wants you to save the input into the user's SESSION, and then check the SESSION every time you render the page. If a previous value is in the session, then pre-populate the form (i.e. render the HTML with the hard-coded values).
Try this:
<form autocomplete="on">...</form>
the "autocomplete" attribute allows you to save your selection that you've submit after reload the site.
If you don't want this feature take effect for some special tag,you should write your code like this:
<form autocomplete="on">
...
<input type="date" autocomplete="off" /> // this tag won't save the choice
</form>
check this fiddle : https://jsfiddle.net/9nfz311z/
html part:
<input type="date" name="test"/>
js part :
var dateInput = document.querySelector('input[name="test"]');
var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}
// on change save in localStorage the value
dateInput.addEventListener('change', function(e) {
localStorage.setItem(dateInput.name, dateInput.value);
});
// on dom ready if localStorage has date value apply it to the input
DOMReady(setDateValue);
function setDateValue() {
var date = localStorage.getItem(dateInput.name);
if (date) {
dateInput.value = date;
}
}

Pass Selected Radio Value to PHP using onclick, then opening php file to use value in SQL query

I am pretty new to coding php and javascript but have manged to scrape my way through so far. However, I have hit a wall. I'm not 100% sure that what I'm trying to do can be done, or that I'm even attempting it in an effective way.
I have a dynamically filled table, made of rows from a SQL statement using php. On each row is a radio button, each one given a unique value based on the row number (a unique value in one of the database columns). I am attempting to program a button that enables the user to pass a selected radio button value to a separate php enabled page that will allow the user to edit the row information using the unique row value. Also, i used the confirm option, because I would also like to add an if else statement that allows the user to cancel, if the wrong row was selected (I haven't attempted that yet because I haven't been able to get the value to pass).
Page button
<input type="button" id="edit_order_button" value="Edit Order"></input>
JQuery page
$(document).ready(function(){
$("#edit_order_button").click(function(){
var selected = $("input[name ='order_edit_select']:checked").val();
var r = confirm("Confirm Order Number to edit: " + selected);
$.post("php/editOrder.php", {
selected1: selected
}, function(data,status) {
//alert("Data: " + data + "\nStatus: " + status);
window.open("php/editOrder.php","Edit Order","menubar=1,resizable=1,width=750,height=600, left=250, top=50");
});
});
});
PHP end destination
<?php
//Login to database (usually this is stored in a separate php file and included in each file where required)
require('config.php');
$selected2= isset($_POST['selected1']) ? $_POST['selected1'] : ''; // Fetching Values from URL
echo "Selected Row number is ".$selected2.".";
mysqli_close($connection); // Connection Closed.
?>
I have tried a few things but have so far been unsuccessful in getting the new window to load with the value of the radio button passed. Currently, the window loads, but the new window only displays the echo text, no variable. When I run with the alert popup, the data shows me the value of the selected row but it does not seem to be posting to the new page prior to the window.open command. Any tips would be appreciated, or if i'm approaching the problem from a wrong angle, any insights would also be great. I have also tried debugging, thinking I was missing a parentheses or semicolon but I wasn't able to find anything. Thanks
Looks to me like you can get rid of the post statement altogether and just pass the selection to the newly opened window.
$(document).ready(function(){
$("#edit_order_button").click(function(){
var selected = $("input[name ='order_edit_select']:checked").val();
// only open window if order okayed
if ( confirm("Confirm Order Number to edit: " + selected) ) {
window.open("php/editOrder.php?selected1=" + selected,"Edit Order","menubar=1,resizable=1,width=750,height=600, left=250, top=50");
}
});
});
php/editOrder.php:
$selected2 = $_GET['selected1'];
echo "Selected Row number is $selected2.";

Why the JavaScript result always return first value?

here is my problem. I'm currently trying to customize joomla article content with some module. As i'm trying out hide some div before the user had click on the input. Lets say user click Test1 which is a radio button , then another field which i hide with div will shown up the content of Test1. All the detail is load from mysql database.
Here is my javascript code that i trying to show the value. But it alway show me first value although i click other value suck as Test2 or Test3.
Example:
<script type="text/javascript">
function showBox1(){
document.getElementById('hideBox1').style.display ="";
var test = document.getElementById('123').value;
confirm (test);
</script>
Here is my php code:
<?php
// Get default database object
$db =JFactory::getDBO();
// Get a new JDatabaseQuery object
$query = $db->getQuery(true);
// Build the query
$query->select($db->quoteName('campusid'));
$query->from($db->quoteName('campus'));
$query->where($db->quoteName('collegeid').'='. $db->quote('1'));
// Set the query for the DB oject to execute
$db->setQuery($query);
// Get the DB object to load the results as a list of objects
$results = $db->loadObjectList();
if($results){
foreach($results as $result)
{
echo "<label class='option block spacer-t10'>";
echo "<input type='radio' name='$result->campusid' id='123' value='$result->campusid' onClick='return showBox1()'><span class='radio'></span>";
echo $result->campusid;
echo '</label>';
}
}
else{ echo 'Error';}
?>
As an example the output for first div is 3 radio button, each radio button had it own value. When user click on either 1 of the radio button then it should pass the correct value to be shown up so that i can bring the value to the next div to select my database data. Is there any mistake i had made on my code that make me alway getting the first value although i click other radio button?
Each radio button is an element in its own right. The radio group is not a single element.
Every radio button has the same id, which is invalid and not allowed in HTML.
When you getElementById, the browser attempts to perform error recovery and gets the first element with that id (ignoring the others).
If you want to deal with a group of elements, then:
make them members of a class
getElementsByClassName
Loop over the result and test the checked property
When you find a true checked take the value of that element
Your radiobuttons have the same id 123. You are selecting the element from the DOM using this id. Make sure every radiobutton has a unique id.
You don't even need the Id if you pass the element to the function.
HTML:
onClick='return showBox1(this)'
JavaScript
function showBox1(element){
confirm (element.value);
}
First of all, all the radio buttons have the same id attributes: "123".
The document.getElementById() function expects, that a certain id is only present once on a page.
If you want to get the selected value for the elements with id "123", then you should select like this:
var test = document.querySelector("#123:checked")[0].value;
If this doesn't work, then try:
var test = document.querySelector("[id=\"123\"]:checked")[0].value;

Categories