I have 3 select boxes that load dynamical based on the selection in each box. These work correctly before I try and style the page using the jqtransform plugin. I have tried to figure this out and have searched this site and the web with out finding a solution as to why the select menus do not populate at all if I use the jqtransform plugin. Any help would be greatly appreciated.
Original working code:
`<script language="JavaScript" src="myminiAJAX.js"></script>
<script language="JavaScript" src="functions.js"></script>
<script language="JavaScript">
function init() {
doAjax('man_list.php', '', 'populateComp', 'post', '1');
}
function showOutput(){
alert("This Is Your Model Id: "+getValue('manufacturer'));
}
$(function(){
$('form').jqTransform({imgPath:'jqtransformplugin/img/'});
});
</script>
<style>
#loading{
background:url('loader64.gif') no-repeat;
height: 63px;
}
</style>
</head>
<body onLoad="init();">
<p>
<form method="post" action="<?php echo $PHP_SELF;?>">
<b>System Type:</b> <select name="manufacturer" id="manufacturer" onChange="resetValues();doAjax('type_list.php', 'man='+getValue('manufacturer'), 'populateType', 'post', '1')">
<option value="">Please select:</option></select>
<br /><b>Type of Equipment: </b> <select name="printertype" id="printertype" disabled="disabled" onChange="doAjax('model_list.php', 'man='+getValue('manufacturer')+'&typ='+getValue('printertype'), 'populateModel', 'post', '1')">
<option value="">Please select:</option></select>
<br /><b>Equipment to be depoted out:</b> <select name="printermodel" id="printermodel" disabled="disabled" onChange="showOutput();">
<option value="">Please select:</option></select>
<br /><br /><input type="submit" name="action" value="Submit" />
Code After adding Jqtransform plugin:
<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<link rel="stylesheet" href="demo.css" type="text/css" media="all" />
<script language="JavaScript" src="myminiAJAX.js"></script>
<script language="JavaScript" src="functions.js"></script>
<script type="text/javascript" src="requiered/jquery.js" ></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" > </script>
Removed functions to shorten this post since they didn't change from the original code.
<body onLoad="init();">
<p>
<form method="post" action="<?php echo $PHP_SELF;?>">
<div class="rowElem"><b>System Type:</b> <select name="manufacturer" id="manufacturer" onChange="resetValues();doAjax('type_list.php', 'man='+getValue('manufacturer'), 'populateType', 'post', '1')">
<option value="">Please select:</option></select>
</div>
<div class="rowElem"><br /><b>Type of Equipment: </b> <select name="printertype" id="printertype" disabled="disabled" onChange="doAjax('model_list.php', 'man='+getValue('manufacturer')+'&typ='+getValue('printertype'), 'populateModel', 'post', '1')">
<option value="">Please select:</option></select>
</div>
<div class="rowElem"><br /><b>Equipment to be depoted out:</b> <select name="printermodel" id="printermodel" disabled="disabled" onChange="showOutput();">
<option value="">Please select:</option></select>
</div>
<div class="rowElem"><br /><br /><input type="submit" name="action" value="Submit" /> </div>
</p>
<div id="loading" style="display: none;"></div>
<div id="output"></div>
Related
I am using php, MySQL, and Ajax. When I submit the form data is not stored in the database table. But when put action="insert.php" data is submitted to the database table but the page gets refreshed. I am badly stuck here. Can anyone please advice me that how can I solve this problem?? Thanks in advance guys. codes are given below :
index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll"><br>
<label>Name : </label>
<input type="text" name="name" id="name"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" name="submit" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#cForm').on('submit', function(e){
e.preventDefault();
$.ajax({
url:"insert.php",
method:"POST",
data:$('#cForm').serialize(),
success:function(data)
{
if(data == 'ok')
{
document.getElementById("cForm").reset();
}
}
});
});
});
</script>
</div>
</body>
</html>
insert.php
<?php
$con=mysqli_connect("localhost","root","","test");
if(isset($_POST['submit'])){
$roll=$_POST['roll'];
$name=$_POST['name'];
$stream=$_POST['stream'];
$age=$_POST['age'];
$sql="INSERT INTO `student`(`name`, `stream`, `age`) VALUES ('$name','$stream','$age')";
$result=mysqli_query($con,$sql);
if(isset($result))
{
echo 'ok';
}
}
?>
If you want your page doest not refresh. you need to remove form submission form jQuery because you have called on submit and it called the whole form and send it to next page and do it like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll"><br>
<label>Name : </label>
<input type="text" name="name" id="name"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="button" class="btn-submit" value="Submit">
</form>
</div>
<script>
jQuery(document).ready(function() {
$('.btn-submit').click(function() {
$.ajax({
url:"insert.php",
method:"POST",
dataType: "json",
data:$('#cForm').serialize(),
success:function(data)
{
if(data.status == 200)
{
document.getElementById("cForm").reset();
}
}
});
});
});
</script>
</body>
</html>
And your insert.php page replace
echo "ok";
by
echo json_encode(['status'=>200,'message'=>'success']);
I need a multiple select form, like this:
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<form action="" method="get">
<p>
<select class="multiple normal-selectbox" id="RW" name="RW" multiple="multiple">
<option value="N" ><span class="input-group"><strong>Region Nord</strong></span></option>
<option value="HAM" ><span class="input-group">Hamburg</span></option>
<option value="HAJ" ><span class="input-group">Hannover</span></option>
<option value="BRE" ><span class="input-group">Bremen</span></option>
</select>
<div class="form-group submit f0 " data-fid="f0" style="position: relative;">
<div class="progress" style="display: none; z-index: -1; position: absolute;">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg" style="z-index: 1;">
GO
</button>
</form>
</body>
</html>
After submit it hast to get Values as String in URL it get it so:
...?RW=N&RW=HAM&RW=HAJ&RW=BRE
But I need it so:
Rw=HAMxHAJxBRE ...
i find this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("form").serializeArray();
$.each(x, function(i, field){
$("#results").append(field.name + "x" + field.value + " ");
});
});
});
</script>
</head>
<body>
<form action="" method="get">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
</form>
<button>Serialize form values</button>
<div id="results"></div>
</body>
</html>
But it doesn't Get Values to URL
Do you have any idea to solve my problem?
Regards
Hello friends thank you for your help, I made some code the result is what I want to string in to URL i don't know why
hier is the Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("form").serializeArray();
$.each(x, function(i, field){
$("#results").append("" + field.value+"x");
});
});
});
</script>
</head>
<body>
<form action="" method="get">
<label>
<select name="RW" multiple class="multiple normal-selectbox" id="RW">
<!--<option value="-" selected="selected" >alle Abflughäfen</option>-->
<optgroup label="Norden">
<option value="N" ><span class="input-group">Region Nord</span></option>
<option value="HAM" ><span class="input-group">Hamburg</span></option>
<option value="HAJ" selected ><span class="input-group">Hannover</span></option>
<option value="BRE" ><span class="input-group">Bremen</span></option>
</select>
</label>
</form>
<button>Serialize form values</button>
<div id="results"></div>
</body>
</html>
also the string should be RW="results"
Assuming that you are using PHP on the server-side - as implied by the PHP tag on this post, PHP should show this as an Array automatically. For an ordinary field, $_REQUEST['RW'] would be a single value (e.g., "HAM") for a multiple select it will be an array (e.g., ["HAM","HAJ"]). Just let PHP do the work for you and don't try to decode the URL yourself.
I need to "link" the two input forms so if i select a certain time, the second input will not display times before the choosen one.
ex: I select 16:30, the second input displays: 17:00, 17:30, 18:00, etc...
sorry for my bad english. here's the code. I think i need to use JS to hide other objects but i don't know how to do it.
Thanks for help
<div class="input-group">
<!--start time-->
<span class="input-group-addon"><div class="ciao">Inizio</div></span>
<select class="form-control" name="start">
<?php $orari=h oursRange(12 * 3600, 20 * 3600, 30 * 60);
foreach ($orari as $key=>$value) {
echo "<option>$value</option>";
} ?>
</select>
</div>
<!--end time-->
<div class="input-group">
<span class="input-group-addon"><div class="ciao">Fine</div></span>
<select class="form-control" name="end">
<?php foreach ($orari as $key=>$value)
{
echo "<option>$value</option>";
} ?>
</select>
</div>
I would suggest you look at jQuery Timepicker: http://jonthornton.github.io/jquery-timepicker/
Here is an example you can use with your code after downloading timepicker:
<div id="timepicker">
Inizio: <input type="text" class="time start" name="start" />
Fine: <input type="text" class="time end" name="end" />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.timepicker.css" />
<script type="text/javascript" src="lib/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-datepicker.css" />
<script type="text/javascript" src="lib/site.js"></script>
<link rel="stylesheet" type="text/css" href="lib/site.css" />
<script src="http://jonthornton.github.io/Datepair.js/dist/datepair.js"></script>
<script src="http://jonthornton.github.io/Datepair.js/dist/jquery.datepair.js"></script>
<script>
$('#timepicker .time').timepicker({
'showDuration': true,
'timeFormat': 'g:ia'
});
$('#timepicker').datepair();
</script>
Hope this helps!
I downloaded the Jquery Validation Engine from https://github.com/posabsolute/jQuery-Validation-Engine, it is working perfectly in IE and Firefox but it is not working on Chrome and Safari, the problem is that it does not matter if the fields are empty or invalid characters are entered, the form will always be submitted and since I'm using php to enter the data to a database obvioulsy the fields are entered as empty.
I am sure I included all needed scripts; have you read about any other member having issues with chrome and Safari using the plug in? I will really appreciate your help Pals.
Adding the code in edit (sorry friends):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
<script src="js/jquery-1.8.2.min.js" type="text/javascript">
</script>
<script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
</script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#collect").validationEngine('attach');
});
</script>
</head>
<body onLoad="formReset()" onUnload="formReset()">
<script>
function formReset()
{
document.getElementById("collect").reset();
}
</script>
<div class="formholder">
<form id="collect" class="formular" method="post" action="insert.php">
<fieldset>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required,custom[onlyLetterSp]] text-input" type="text" name="nombre" />
</label>
<br/>
<label>
<input value="" class="validate[required,custom[email]] text-input" data-prompt-position="topRight:0,20" type="text" name="email" />
</label>
<br/>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required,custom[phone]] text-input" type="text" name="telefono" />
</label>
<br/>
<label>
<select style="height:35px; width:200px;" name="informacion" class="select" form="contact-form" type= "select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</label>
<input class="submit" type="submit" value= ""/>
</fieldset>
<hr/>
</form>
</div>
</body>
</html>
see this code
It is working now ...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#collect").validationEngine('attach');
});
</script>
</head>
<body onLoad="formReset()" onUnload="formReset()">
<script>
function formReset()
{
document.getElementById("collect").reset();
}
</script>
<div class="formholder">
<form id="collect" class="formular" method="post" action="insert.php">
<fieldset>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required] text-input" type="text" name="nombre" />
</label>
<br/>
<label>
<input value="" class="validate[required] text-input" data-prompt-position="topRight:0,20" type="text" name="email" />
</label>
<br/>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required] text-input" type="text" name="telefono" />
</label>
<br/>
<label>
<select style="height:35px; width:200px;" name="informacion" class="select" form="contact-form" type= "select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</label>
<input class="submit" type="submit" value= "test"/>
</fieldset>
<hr/>
</form>
</div>
</body>
</html>
I have some PHP code in which is using codeigniter. How can I check validation on the filed that are marked check? My code is below.
Can you please let me know how can I check if item is checked and force the validation accordingly?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>/site.css"></link>
</head>
<body>
<script type="text/Javascript">
$(function () {
$('.checkall').click(function () {
$(this).parents('fieldset:eq(0)').
find(':checkbox').attr('checked', this.checked);
});
});
</script>
<? $attributes = array('class' => '', 'id' => ''); ?>
<? echo form_open('ShoppingListController', $attributes); ?>
<div class="divTable">
<fieldset>
<!-- these will be affected by check all -->
<div class="divRow">Product Name | Quantity | Packages</div>
<div class="divRow"><input type="checkbox" size="100" class="checkall"> Check all</div>
<br>
<?php foreach ($records as $rec) {
?>
<div class="divRow"><input type="checkbox">
<input size="5" type="hidden" value="<? echo $rec->id; ?>" name="id"></input>
<input size="20" type="text" value="<? echo $rec->name; ?>" name="name"></input>
<label for="quantity">Value <span class="required">*</span></label>
<span class="required"><?php echo form_error('quantity'); ?></span>
<input size="5" type="text" value="" name="quantity"></input>
<select name="package">
<option name="case">Case</option>
<option name="box">Box</option>
<option name="box">Single Bottle</option>
</select>
</div>
<br>
<?
}
?>
</fieldset>
</div>
<div><input type="submit" name="submit"/></div>
</form>
</body>
you can use code below:
var divRows = $('.divRow');
var count = divRows.length;
divRows.each(function() {
if ($(this).find('input[type=checkbox]').is(':checked')) {
count--;
}
});
if (count != 0) {
alert(count + ' checkboxes not checked');
}
http://jsfiddle.net/SKgA8/