How to fill textboxes based from combobox - javascript

I'm still learning Web programming and I'm having a problem on how I'm going to fill my 3 textBoxes based from chosen option in combobox.
I tried using php inside javascript but it seems I'm not doing it right. What I'm trying to do is to load the name, age and address of of a user based from the chosen option combobox so that I can update their data.
<?php
include("myconnection.php");
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script>
function listUpdate()
{
var ddl=document.getElementById("userlist");
var selectedOption=ddl.options[ddl.selectedIndex];
var nameNya=selectedOption.getAttribute("value");
console.log(nameNya);
var tb1=document.getElementById("nameid");
var tb2=document.getElementById("ageid");
var tb3=document.getElementById("addressid");
tb1.value="gago";
<?php
/*
$sql="SELECT * from users WHERE fullname='nameNya'";
mysqli_query($db,$sql);
$nameNyaa=$_POST['nameNya'];
echo $nameNyaa;*/
?>
}
</script>
</head>
<body>
<form action="updateuserprocess.php" method="POST">
<h1>UPDATE USER</h1>
<?php
$sql="SELECT * from users";
$result=mysqli_query($db,$sql);
echo '<select id="userlist" onChange="return listUpdate()">';
while($row=mysqli_fetch_array($result))
{
echo "<option value='".$row[3]."'>".$row[3]."</option>";
}
echo '</select>';
?>
<br>
<label>Name: </label>
<input type="text" name="name" placeholder="" id="nameid"><br>
<label>Age: </label>
<input type="text" name="age" placeholder="" id="ageid"/><br>
<label>Address: </label>
<input type="text" name="address" placeholder="" id="addressid"/><br>
<br>
<input type="submit" name="submit" value="OK"/>
<button type="submit" formaction="/myhome.php">Back</button>
</form>
</body>
</html>
<?php
if(isset($_POST["submit"]))
{
include("updateuserprocess.php");
}
?>

Try doing it like this
$('#mycomboboxID').change(function() {
var combobox_value = $('#mycomboboxID').val();
$('#myInput1').val('First');
$('#myInput2').val('Second');
$('#myInput3').val('Third');
}
You can do if statement inside as well,
and remember you need a jquery extension for this to work

Related

Form is auto submitting but the data is not getting passed/received

I have a problem in automating a form with hidden inputs in PHP. Basically I'm doing an input for a barcode scanner where the user will input the barcode and it will auto-submit, just like in a cash registry.
The conflict which I think is the cause of the problem is because of a conditional form. Here is a snippet:
<form method="post" id="form1">
<div class="products">
<input type="text" name="code" class="form-control" autofocus required onchange="submit()" />
</div>
</form>
<?php
$query = 'SELECT * FROM product WHERE PRODUCT_CODE='.$code.' GROUP BY PRODUCT_CODE ORDER by PRODUCT_CODE ASC';
$result = mysqli_query($db, $query);
if ($result):
if(mysqli_num_rows($result)>0):
while($product = mysqli_fetch_assoc($result)):
?>
<form id="form2" method="post" action="pos.php?action=add&id=<?php echo $product['PRODUCT_CODE']; ?>" >
<input type="hidden" name="quantity" class="form-control" value="1" />
<input type="hidden" name="name" value="<?php echo $product['NAME']; ?>" />
<input type="hidden" name="price" value="<?php echo $product['PRICE']; ?>" />
<input type="submit" name="addpos" style="margin-top:5px;width: 462px" class="btn btn-info" value="Add"/>
</form>
<?php
endwhile;
endif;
endif;
?>
<script>
function submit() {
document.getElementById("form1").submit();
}
document.getElementById("form2").submit();
</script>
The data from form1 has no trouble auto-submitting, then the form2 will auto-submit but nothing happens. I need help on how can I make form2 auto-submit correctly too. I have tried different event handling for form2 but nothing happens. I only know a little bit of javascript so that's just how my script turned out.
Thank you, Programming kings!
Because the second form is inside the while loop, if there are multiple results there will be multiple forms with the same id = "form2".
You need an increment variable $incrm = 2 inside the loop,
form id='form<?php echo $incrm;?>',
with $incrm++ before ending it. I also recommend to add ann onchange event to the last input 'price' ; onchange = submit(this).
function submit(inp) {
inp.parentElement.submit();
}

Get the values of while loop using button with js

How can I get the values in the while loop using button with js?
<?php
while ($row = mysqli_fetch_array($query))
{
echo '<input type="text" name="sample" value="'.$row['sample'].'">';
}
?>
Thanks
You can get the value of textbox when you click on a button.
<input type="text" name="sample[]" value="abc" class="valueInput">
<input type="text" name="sample[]" value="xyz" class="valueInput">
<input type="text" name="sample[]" value="pqr" class="valueInput">
<input type="button" class="getValue" value="Get Value">
Note: I have set the static input box you can make it dynamic but make sure please add the class as valueInput.
Jquery Code.
$(document).on('click','.getValue',function(){
var valArr = [];
$(".valueInput").each(function(){
valArr.push($(this).val());
});
console.log(valArr);
})
The name of the input field should indicate an array with [].
<form action="action.php" method="POST">
<?php
while ($row = mysqli_fetch_array($query)){
echo '<input type="text" name="sample[]" value="'.$row['sample'].'">';
}
?><input type="submit">
</form>
action.php: (Processes the data on submit)
<?php
echo "<pre>";
print_r($_POST['sample']);
echo "</pre>";

not insert into particular field and parrticular name

i want to insert picture in particular name but there is no insert and some facing error
my table like this
how can insert pic in front of particular name
config.php file is
<?php
session_start();
$db = new mysqli('localhost','root','','dharmesh');
?>
and code is here :
<?php
include_once('config.php');
if(isset($_POST['family_member_btn'])) {
$family_member = $_POST['family_member'];
}
if(isset($_POST["submit4"])) {
for($i=0;$i<$_POST['num'];$i++) {
$insert = $db->query("INSERT into `multiple_insert` (`f_name`,`m_name`,`l_name`,`birth_date`) values ('".$_POST['f_name'][$i]."','".$_POST['m_name'][$i]."','".$_POST['l_name'][$i]."','".$_POST['b_date'][$i]."')");
if($insert) {
echo "<script>alert('insert successfully');</script>";
} else {
echo "<script>alert('!!!insert unsuccessfully');</script>";
}
}
}
if(isset($_POST["upload"])) {
for($i=0; $i<$_POST['img'];$i++) {
$imag = $_FILES['f_name_pic']['name'][$i];
$tmp = $_FILES['f_name_pic']['tmp_name'][$i];
$dir = "images/".$imag;
move_uploaded_file($tmp,$dir);
$query = $db->query("UPDATE `multiple_insert` SET `picture`='$dir' WHERE f_name='".$_POST['f_name'][$i]."' where user_id='1'");
}
}
?>
<html>
<head>
<title>
</title>
</head>
<body>
<form method="post" action="">
<?php
$select = $db->query("SELECT * from multiple_insert where user_id='1'");
while($select_f_name = $select->fetch_assoc()){
echo "<input type='hidden' value='1' name='img' />";
echo "<p style='background-color:red;color:yellow;width:5%;'>".$select_f_name['f_name']."</p>";
echo "<span><input type='file' name='f_name_pic[]' /></span><br><br>";
}
echo "<button name='upload'>Uplaod</button><br><br>";
?>
<label><font size="2">HOW MANY MEMBER IN YOUR FAMILY ?</font></label><br><br>
<input type="text" name="family_member" class="form-control" />
<button type="submit" name="family_member_btn" class="btn btn-lg btn-info" /><span>SUBMIT</span></button><br><br>
<?php
for($i=1;$i<=$family_member;$i++) {
?>
<input type="hidden" value="<?php echo $family_member;?>" name="num" />
<label><b><?php echo "RECORED # ".$i;?></b></label><br>
<label><font size="2">First Name</font></label>
<input type="text" name="f_name[]" class="form-control" /><br>
<label><font size="2">Middle Name</font></label>
<input type="text" name="m_name[]" class="form-control" ><br>
<label><font size="2">Last name</font></label>
<input type="text" name="l_name[]" class="form-control" /><br>
<label><font size="2">birthdate</font></label>
<input id="datepicker3" class="form-control" name="b_date[]" type="text" />
<hr style="border:solid 2px rgba(0,0,0,0.2);">
<?php } ?>
<button class="btn btn-info btn-cons from-left pull-right" type="submit" name="submit4">
<span>SUBMIT</span>
</button>
</form>
</body>
</html>
how can i done this please send me updated code for this...
You cannot do that! The interface you are looking at, is phpMyAdmin---unless you are willing to hack the core code (HIGHLY NOT RECOMMENDED TO MODIFY CORE CODE OF ANY PROJECT!).

Disabling Submit button on form in Chrome

How can I disable the Submit button on a form after its clicked? The goal is prevent users from hitting the browser's back button and resubmitting the same details twice, as well as clicking it twice in quick succession if the POST method is slower than expected. I found some ideas here which seem to work fine in Safari, but in Chrome it looks like my onSubmit form function doesn't fire as the button's caption doesn't change and the button stays enabled. I need a simple JS/php method for achieving this.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<title>Entry Form</title>
<body>
<h2 align="center">Entry Form - <?php echo date("Y");?></h2>
<form id="entryForm" method="post" action="formSubmit.php" onsubmit="return checkForm(this);">
<h3>Entrant Info</h3>
<div><input name="fName" type="text" size="80" placeholder="Given name(s)" required> <strong>*</strong></div>
<br>
<div><input name="lName" type="text" size="80" placeholder="Last name" required> <strong>*</strong></div>
<br>
<div><input type="tel" name="phone" size="25" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="Phone number (123-456-7890)"></div>
<br>
<div><input type="email" name="email" size="80" placeholder="Email"></div>
<br>
<h3>Model Info</h3>
<div><input type="text" name="modelName" size="80" placeholder="Title or name of entry" required> <strong>*</strong></div>
<br>
<div><textarea name="remarks" rows="10" cols="80" placeholder="Remarks"></textarea></div>
<br>
<select name="category" size="1" required>
<!--<option value="0">--Please Select --</option>-->
<option disabled selected value> -- Select a category -- </option>
<?php
// Use mySQL Procedurel
// mySQL server connection info
$servername = "localhost";
$username = "xxxx";
$password = "yyyy";
$dbname = "zzzz";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT ID, Category FROM category WHERE Year = YEAR(CURDATE()) ORDER BY Category";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = $result->fetch_assoc()) { ?>
<option value="<?php echo $row['ID']; ?>"><?php echo $row['Category']; ?></option>
<?php
}
}
else {
echo "No results";
}
mysqli_close($conn);
?>
</select> <strong>*</strong>
<br>
<br>
<div>SECURED to base?
<input id="securedRadioYes" type="radio" name="securedToBase" value="Yes">Yes
<input id="securedRadioNo" type="radio" name="securedToBase" value="No" checked>No</div>
<div>
<h4>Terms and Conditions</h4>
I understand that the terms.</div>
<br>
<br>
<div>I accept the Terms and Conditions:
<input id="acceptAgrmt" name="acceptAgrmt" type="checkbox" value="" required> <strong>*</strong></div>
<br>
<br>
<div>
<input type="submit" name="mysubmit" value="Submit Entry">
<input type="button" value="Reset Form" onclick="resetForm(this.form);">
</div>
</form>
<script type="text/javascript">
function checkForm(form) // Submit button clicked
{
//
// check form input values
//
// User has to check Terms and Conditions
if(!form.acceptAgrmt.checked) {
alert("Please indicate that you accept the Terms and Conditions");
form.acceptAgrmt.focus();
return false;
}
else {
// do other field validations here?
form.mysubmit.disabled = true;
form.mysubmit.value = "Please wait...";
return true;
}
}
function resetForm(form) // Reset button clicked
{
form.mysubmit.disabled = false;
form.mysubmit.value = "Submit Entry";
// Clear out all user entries
form.acceptAgrmt.checked=false;
document.getElementById('securedRadioNo').checked = true;
form.category.value="";
form.remarks.value="";
form.modelName.value="";
//form.email.value="";
//form.phone.value="";
//form.lName.value="";
//form.fName.value="";
}
</script>
</body>
</html>
One way you could deal with this is just to hide or disable pointer-actions on the form after it's clicked -- modify the hidden attribute of the form element, or set form.style.pointerActions = "none".

How to set readonly all input beside input that user try to fill data?

How to set readonly all input except input that user try to fill data ?
When user loads page index.php and tries to fill data into EG: <input id="edValue2" ...>, I want to set readonly all input except <input id="edValue2" ...>
But my code not work, how can i do ?
index.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<body>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<?PHP
for ($i=1;$i<=5;$i++)
{
?>
<input id="edValue<?PHP echo $i; ?>" type="text" onKeyUp="send_it_register_to_hidden_input<?PHP echo $i; ?>()" onKeyPress="send_it_register_to_hidden_input<?PHP echo $i; ?>()"><br>
<?PHP
}
?>
<br>
<br>
<br>
<input type="text" id="lblValue" value="">
<input type="text" id="lblValue_number" value="">
</form>
</body>
<?PHP
for ($i=1;$i<=5;$i++)
{
?>
<script>
function send_it_register_to_hidden_input<?PHP echo $i; ?>()
{
lblValue.value = $("#edValue<?PHP echo $i; ?>").val();
lblValue_number.value = <?PHP echo $i; ?>;
Check_register_it();
}
</script>
<?PHP
}
?>
<script>
function Check_register_it()
{
$('#form-id input').attr('disabled','disabled'); //disable all
$(this).removeAttr('disabled'); //enable the one that triggers the event
}
</script>
</html>
I strongly suggest don't create functions like that. It just makes your codes complicated. Use classes in this case so that you don't need to setup functions for each id that you want to manipulate:
<body>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<?PHP for ($i=1;$i<=5;$i++) { ?>
<input class="input_boxes" type="text" data-i="<?php echo $i; ?>"><br/>
<?PHP } ?>
<br>
<br>
<br>
<input type="text" id="lblValue" value="">
<input type="text" id="lblValue_number" value="">
</form>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.input_boxes').on('keyup', function(e){
var value = $(this).val();
var i_val = $(this).attr('data-i');
$('#lblValue').val(i_val);
$('#lblValue_number').val(value);
$('input').prop('readonly', true);
$(this).prop('readonly', false);
});
</script>
Assuming all inputs are children of the same element (i.e. siblings), you can use jQuery to do this easily:
$('input').on('focus', function(){
$('input').removeAttr('readonly');
$(this).siblings().attr('readonly', 'readonly');
});
JSBin:
http://jsbin.com/qukohosafuje/1/edit
Try this :-
$("input").on('keyup', function () {
$('input').not(this).attr('readonly', 'readonly');
});
DEMO
You have to put all JQuery statement within:
$(function(){
//put your JQuery code here
});
Try and let me know if now works.
You can simply use the html attribute of readonly for the inputs you don't want users to fill.
e.g
<input type="text" id="lblValue" value="" readonly>
if you would required the readonly inputs to be accessible after the necessary input has been filled, you can use jquery to trigger the event.
e.g
$('input').keyUp(function(){
if($('#edValue2').val()!=""){
$('input:not("#edValue2")').removeAttr('readonly');
})

Categories