I have looked throughout the site and nothing has quite matched what I'm after. I have a form which starts of asking the client to choose the company name from a dropdown. The dropdown is populated from a query as such:
<select name='company_name' id='dropdown'><?php
$result = mysqli_query($con,"SELECT ID, TITLE FROM b_crm_company");
while($row = mysqli_fetch_array($result))
{
$companyName = $row['TITLE'];
$companyID = $row['ID'];
print "<option value='$companyID'>$companyName</option>";
}
?></select>
I then have 3 forms text fields that I need pre-populating based on what is selected from the above and I'm not sure how to do it. So my next three form fields:
<input type="text" value="$contactName" name="contactName">
<input type="text" value="$contactTelephone" name="contactTelephone">
<input type="text" value="$contactEmail" name="contactEmail">
The select statement I'd need to get these three values:
SELECT COMPANY_ID, NAME, TELEPHONE, EMAIL FROM b_crm_contact
WHERE COMPANY_ID = $companyID
The $companyID obviously being pulled from the dropdown at the start. How can I pull the information to the next fields? I'm assuming javascript but not sure how to write it.
Thanks in advance
you need to call ajax on click of your drop down select item
and then need to return string or json from that php file and then parse and put values in appropriate fields
something like this:
$("button").click(function(){
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
Related
I know there are many questions like this one on Stack Overflow, but I am really needing something more related towards what I am doing...so that is why I am posting this question.
I have an HTML form with PHP that pulls data from an MSSQL database in order to populate a dropdown box. I want to be able to populate the contact information text boxes once I select a name from my dropdown box. So far, I have it to where, if I select a specific vendor, the vendor name gets entered automatically into the Name, Email, and Phone Number fields. However, I want to have different attributes entered into the text fields and not the vendor name itself. How could I do this?
The fields from my database with the name, email, and phone number that I want imported are named MR_POC_N, MR_POC_E, and MR_POC_P
Also the "MR_Name" that you see is the field with all names of the vendors FYI
Here is my code for the HTML dropdown:
<select name="vendor_dropdown" id="ven" onChange="updateinput();">
<option value="">Choose a Vendor</option>
<?php foreach($users->fetchAll() as $user): ?>
<option><?php echo $user['MR_Name'];?></option>
<?php endforeach; ?>
</select>
Here is my Contact Info code:
<table align="center">
<tr>
<td align="right">Name:</td>
<td><input class="textbox" type="text" id="name" name="name"></td>
</tr>
<tr>
<td align="right">Email:</td>
<td><input class="textbox" type="email" id="email" name="email"></td>
</tr>
<tr>
<td align="right">Phone Number:</td>
<td><input class="textbox" type="tel" id="tel" name="number"></td>
</tr>
</table>
Here is the update input function I have in JS. I know this is off but looking for some sort of direction as I am not the best in JS:
function updateinput() {
var e = document.getElementById("ven");
var venSelected = e.options[e.selectedIndex].value;
document.getElementById("name").value=venSelected;
document.getElementById("email").value=venSelected;
document.getElementById("tel").value=venSelected;
}
Keep your script the same as it currently is but change your JavaScript and the dropdown. In your dropdown try doing
<option value = "<?=$user['MR_Name'];?>"><?php echo $user['MR_Name'];?></option>
You want to make what's called an AJAX request. This will allow you to go off to another page get some data in your case you would be getting some user information, and return it to the page, without the user physically changing page!
Check this link out for more information on AJAX.
Your AJAX call will look something like this.
function updateinput() {
var e = $("#ven").val();
$.ajax({
url: "get-user-info.php",
type: "POST",
data: {e: e},
success: function(data){
data = JSON.parse(data);
var email = data[0];
var tel = data[1];
$("#email").val(email);
$("#tel").val(tel);
}
});
}
This script first gets the selected value of the dropdown. Then it starts the make the AJAX call, it's like submitting a form, we are POSTING the values across to the next page. So the page the AJAX will talk to is get-user-info.php it's posting the values from data. The data is sending across e which is what the dropdown value is. On success it will then do the code underneath which is saying parse data from a PHP array to JavaScript and then it is saying email is the first value of the array and tel is the second value from the array. Then we are saying the input with ID 'email' now equals email from the array and the input with ID 'tel' now equals tel from the array.
You will now need to create a php script in the same directory called get-user-info.php
In this script make a call to your database where the user is the same as the selected value e and return a PHP array that looks like this:
array(email, telephone)
This is pseudo-code for your PHP script get-user-info.php:
<?php
$e = $_POST["e"];
//Do your SQL
//In the loop
$array[] = $user["email"];
$array[] = $user["tel"];
echo json_encode($array);
?>
I've searched through the site for this but am coming up empty handed. Here is what I am trying to do:
User selects one of a series of options from a drop list
Two input fields change to reflect this selection, filling the input boxes with data pulled from my database
See the image below for a visual representation of what I mean:
I know that I am going to need JavaScript for this solution, but my JS skills are not so hot (and I think I am having a momentary lapse of brain power today)!
Here's the code that I have so far (don't worry about the outdated PHP):
<select name="item" id="item">
<?php
while($row = mysql_fetch_array($result)) {
$item_id = $row['item_id'];
$item_category = $row['item_category'];
$item_title = $row['item_title'];
$item_price = $row['item_price'];
$item_description = $row['item_description'];
echo "<option value=\"".$item_id."\">".$item_title."</option>";
}
?>
</select>
<script>
function update_txt() {
price = document.getElementById('item').selectedIndex.value;
document.getElementById('item_details').value = price;
document.getElementById('item_price').value = price;
}
</script>
<input id="item_details" type="text" class="validate">
<input id="item_price" type="text" class="validate" value="$">
Any help is greatly appreciated! Let me know if you need any clarification. :)
I would json encode the row and store it as a data-attribute on the option, then read the attribute on the selects change event:
<select name="item" id="item">
<?php
while($row = mysql_fetch_array($result)) {
$item_id = $row['item_id'];
$item_title = $row['item_title'];
echo "<option value=\"".$item_id."\" data-json='" . json_encode($row) . "'>".$item_title."</option>";
}
?>
</select>
<input id="item_details" type="text" class="validate">
<input id="item_price" type="text" class="validate" value="$">
<script>
$('#item').on('change', function() {
var selected = $(this).find('option[value="' + $(this).val() + '"]').data('json');
$('#item_details').val(selected.item_description);
$('#item_price').val(selected.item_price);
});
</script>
You can use a combination of PHP, AJAX and JavaScript (or jQuery).
The general idea is as follows:
User selects an option(s)
JavaScript is used to detect the selection and the option(s)
selected
AJAX gets the options selected, formats it and passes it to a PHP "page"
PHP does the SQL queries and passes the values back
AJAX gets those values and populates the current page using standard JavaScript methods
There's a good tutorial here which shows how it fits together: http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php. I would use prepared statements instead of the SQL queries shown in this example though.
I'm currently coding a sports website with an editor of teams and players. My concerns are about the editor of teams.
I have a HTML input with a datalist which is built with an array.
I want to let the user choose between an exiting team (ID + Name), or write a new one. I chose to use the datalist, but the datalist doesn't work as a select object. For the datalist, for each option I put the ID in the attribute "data-value" and the name in the attribute value.
My problem is to get the data-value when I chose an option. When I choose an option it doesn't update the data-value of my input text.
<input name="Equipe" list="EquipeTest" type="text" id="Equipe" value="<?php echo $NomEquipe ?>" data-value=<?php echo $IDEquipeJoueur?>" >
<datalist id="EquipeTest">
<?php
for($k1 = 0; $k1<=$Compteur; ++$k1){
echo "<option data-value='".$ListeEquipe[$k1]['ID']."' value='".$ListeEquipe[$k1]['Equipe']."' >".$ListeEquipe[$k1]['ID']."</option>";
}
?>
My goal is to get the ID in the $_POST instead of the value.
I try with javascript, but there is no possibility to add an event on an option.
I can also get the value of the field and find the ID in the array... but it's not a good solution.
Thanks in advance,
J-E
I have code that queries an SQL database and displays all of the users in a table, that all works fine, from there you are able to click any user and it displays another table that contains all of their information, that also works fine.
The problem I am running into here is on the page that displays the table of the selected users information. On that page I have a button that allows the user information to be edited and update the DB.
Here is the code for the button:
print "<form method='post' action='adminedituser.php'>
<input type='hidden' name='id' value='$id' />
<input type='submit' value='Click here to edit this user' />
</form>";
When I click this it takes me to a page with an input box that needs to display the current username and allow the user to put in a new value and submit.
I'm trying to call a php variable inside of the HTML form I have:
<?php
$id = filter_input(INPUT_POST, "id");
//Make db connection
$conn=mysql_connect("localhost","root","")or die(mysql_error());
//Step 2: select your db to use
mysql_select_db("final",$conn);
//Step 3: Write the sql that we want to run against the database
$result = mysql_query("select id, firstname, lastname, email, phone, username, password, favchar, bio from user where id=$id");
$username = $result["username"];
?>
<form method='post' id='myForm' name='input' action='adduser.php'>
Username: <input type='text' value="<?php echo ($username); ?>" id='uName' name='uName'>
<input type='submit'>
</form>
The problem is that the variable $username is not being displayed as the text box value.
What am I doing wrong?
Firstly, if I don't say it someone else is: Use mysqli instead of mysql. You can still use the procedural style, if you want (although I can say firsthand it is VERY easy to learn the object style), you just need to do a quick brush up on mysqli. Mysql is deprecated, so it is sort of useless to use. You'll have to learn it eventually, so when you're building a new program, it might be easiest.
Moving on to what you are doing wrong, is that you have not actually fetched anything. MySQL will give you an object, and then you need to sort the rows.
So, what you need to do is pull mysql_fetch_array.
You can do so like this:
while($row = mysql_fetch_array($result)) {
$username = $row["username"];
}
The form code shuld be changed to:
<input type='hidden' name='id' value='<?= $id ?>' />
You forgot to "print" the $id value.
and the code of adminedituser.php:
$id = filter_input(INPUT_POST, "id");
Get the "id" field from POST request of your form.
First of, I'm new to ajax and Java Script.. I have spend days solving this problem, but I still haven't figured it out. I have read through threads with similar problems but I still can't get it right. So here goes;
Quite simple I want post the checked value from from one of three radio buttons. All I get though is only the value of the first radio button..
I have tried several things, but I stripped down the code so it might be easier see where the problem is :-)
The ajax
<script type"text="" javascript"="">
$(document).ready(function(){
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var svar = $('#svar').attr('value');
var date = $('#date').attr('value');
var email = $('#email').attr('value');
$.ajax({
type: "POST",
url: "ajax.php",
data: "svar="+ svar + "&email=" + email + "&date=" + date,
success: function(){
$('form#submit').hide();
//$('form#submit :input').val("");
$('div.success').fadeIn();
}
});
return false;
});
});
</script>
The form
<form id="submit" method="post" name="submit" action="">
<fieldset>
<legend>Dagens spørgsmål: <? echo $row['question'];?></legend>
<br>
<input type="radio" name="svar" id="svar" value="1"><? echo $row['opt1'];?>
<br>
<input type="radio" name="svar" id="svar" value="2"><? echo $row['opt2'];?>
<br>
<input type="radio" name="svar" id="svar" value="3"><? echo $row['opt3'];?>
<br>
<input name="email" id="email" type="hidden" value="<? echo $email ?>" />
<input name="date" id="date" type="hidden" value="<? echo $date ?>" />
<br><br>
<button type="submit" class="button positive"> <img src="img/tick.png" alt=""> Svar på dagens spørgsmål </button>
</fieldset>
</form>
Ajax.php
<?php
include ("dbc.php");
// CLIENT INFORMATION
$email = htmlspecialchars(trim($_POST['email']));
$date = htmlspecialchars(trim($_POST['date']));
$svar = htmlspecialchars(trim($_POST['svar']));
//stuff from answers
mysql_query("INSERT INTO answers
(`email`,`day`,`answer`)
VALUES
('$email','$date','$svar')") or die(mysql_error());
?>
Hope one you of you smart guys have a solution.. because this thing i driving me crazy
You have several problems.
First, your HTML is invalid. An ID must be unique, so each radio button must have its own ID. You associate a group of radio buttons by giving them the same NAME. (Having a unique ID then lets you associate a LABEL with each one using the FOR attribute which increases accessibility by making it easier for screen readers and providing bigger click targets).
Second, the value of a radio button is fixed. The question is "Is it successful or not?" and that is determined by seeing if it is checked or not. If you were doing this manually, you would have to loop over each radio button in the group until you found one that was checked (or use a selector that matched only the checked ratio button (:checked)).
Third, you are building your form data by mashing together strings without making sure the data is URL safe (with encodeURIComponent).
The solution is to forget about doing all this manually and just use the jQuery serialize method on the form.
First: you use the same id for several elements. ID-s should be unique, and you should address your elements with class name or other means. So instead of
$('#svar')
yous should use
$('input[name=svar]')
to reference the group of checkboxes.
Second: There is a slight mistake here:
$('#svar').attr('value');
is the value of the first radio button's value attribute, while
$('input[name=svar]:checked').val();
would give you the value of the checked radio button in the group you are selecting with input[name=svar].
Edit: thx #Quentin for pointing out my error.
First thing to know is id should be unique in a html document.
What makes attributes of type ID special is that no two such
attributes can have the same value;
[Quoted from css2 selector docs]
You have assigend same id to three radio buttons.
Now when you use var svar = $('#svar').attr('value');, only the first radio button will get selected. So, irrespective of radio button selected, only the first radio buttons value you will get.
Now, if you want to get the radio button selected you have to use jQuerys :checked selector.