Script for date
<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#ui-datepicker').datepicker();
});
</script>
View
<form method="post" action="">
<select class='form-control' name='route_to' id='member' onchange='selectPackage()'>
<option value='packageSelect'>SELECT PACKAGE OPTION ....</option>
<option value='manakamanaPackage'>Mana</option>
</select>
<div id="displayForm3">
</div>
<script type="text/javascript">
function selectPackage() {
if (document.getElementById("member").value == "manakamanaPackage") {
document.getElementById("displayForm3").innerHTML = "<input type='text' id='ui-datepicker' class='form-control' />";
}
}
</script>
Explanation
If we use type="date" in the input field then it works only in google chrome browsers.
That's why to display calendar for all browsers we defined the script with id='ui-datepicker' , it works fine if we use for input field which will be normal input tag (such as :: < input type="date" />.
But it does not work for input field which is displayed inside of javascript function {selectPackage() as displayForm3}
The issue is because you're appending the element after the DOM loads. You need to instantiate the datepicker library on the new element, right after you create it. Try this:
<form method="post" action="">
<select class="form-control" name="route_to" id="member">
<option value="packageSelect">SELECT PACKAGE OPTION ....</option>
<option value="manakamanaPackage">Mana</option>
</select>
<div id="displayForm3"></div>
</form>
<script type="text/javascript">
$(function() {
$('#member').change(function() {
if (this.value == 'manakamanaPackage') {
$('#displayForm3').html('<input type="text" id="ui-datepicker" class="form-control" />');
$('#ui-datepicker').datepicker();
}
});
});
</script>
Note that I also amended your code to use an unobtrusive event handler as the on* event attributes are now considered outdated.
Related
I have a dropdown list where users can select multiple options. I stored the selected options in a String variable in this format : [value of first selected option],[value of second selected option]...
Now i want to pass the value of this variable from my Javascript in file 1 to PHP variable in file 2 using Ajax. Here is my code
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="displayData.php" id="multiple_select_form">
<select name="columns" id="columns" class="form-control selectpicker" multiple>
<option value="Country">Country</option>
<option value="Customer Name">Customer Name</option>
<option value="Order Date">Order Date</option>
<option value="Address">Address</option>
</select>
</form>
<br>
<button class="btn btn-info center-block" id="btn-get">Submit</button>
</div>
</body>
</html>
<script>
$('#btn-get').on('click', function() {
var selectedOptions = [];
$.each($(".selectpicker option:selected"), function(){
selectedOptions.push("[" + $(this).val() + "]");
});
var myVar = selectedOptions.join(",");
$.ajax({
type: "POST",
url: 'displayData.php',
data: { testVariable : myVar },
success: function(data)
{alert(data);}
});
$("#multiple_select_form").submit();
});
</script>
I added alert(data) on success in my Ajax to see if the variable got the correct value. It's working but when form is submited and the displayData.php is loaded I get error Undefined index: testVariable
displayData.php is a simple test file
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$variable = $_POST['testVariable'];
print_r($variable);
?>
Can anyone explain me what can be the issue ? I believe that the Ajax is written correctly. Thank you for your help.
Try this
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="displayData.php" id="multiple_select_form">
<select name="columns" id="columns" class="form-control selectpicker" multiple>
<option value="Country">Country</option>
<option value="Customer Name">Customer Name</option>
<option value="Order Date">Order Date</option>
<option value="Address">Address</option>
</select>
<input type="hidden" name="testVariable" id="testVariable">
</form>
<br>
<button class="btn btn-info center-block" id="btn-get">Submit</button>
</div>
</body>
</html>
<script>
$('#btn-get').on('click', function() {
var selectedOptions = [];
$.each($(".selectpicker option:selected"), function(){
selectedOptions.push("[" + $(this).val() + "]");
});
$("#testVariable").val(selectedOptions.join(","));
$("#multiple_select_form").submit();
});
</script>
You're making two requests to displayData.php. One is an AJAX request, with the value set in a field called testVariable, and one is a normal form submit with the value set in a field called columns. The error is happening on the second request.
If your intent is to use AJAX, then remove the following code:
$("#multiple_select_form").submit();
You might even remove the <form> wrapper entirely, since you're identifying the elements directly and not really using the form itself for serialization or anything. (If you ever put a button inside the form it will automatically submit unless you explicitly handle the event to cancel that behavior.)
Conversely, if you do want to submit the form, then you can remove the JavaScript code entirely and move the submit button to be inside the <form> wrapper. And, of course, rename the form element to what your server-side code expects:
<select name="testVariable" ...
I have a select tag in my html form. In that, if you select 'Other' option you will get a new text box below which is generated through java script. Now I am able to get the value of select tag since it is in the html form itself. But unable to get the data from other text field as it is in javascript. Here is my full sample code.
<?php
if(isset($_POST["sub"])) {
$optionChosen=$_POST["options"];
}
//insert query will go here
?>
<html>
</head>
<script type="text/javascript">
function showfield(name){
if(name=='Other') {
document.getElementById('div1').innerHTML='Other: <input id="othr" type="text" name="other" />';
}
else {
document.getElementById('div1').innerHTML='';
}
}
</script>
</head>
<body>
<form action="form.php" method="post">
<select name="options" id="select" onchange="showfield(this.options[this.selectedIndex].value)" style="width: 200px; height:30px;">
<option selected="true" style="display:none;">Please select</option>
<option>School</option>
<option>Consultant</option>
<option>WhatsApp</option>
<option>Brochure / Poster</option>
<option>Internet</option>
<option>Other</option>
</select>
<input type="submit" name="sub">
</form>
</body>
</html>
A simple way is to add <input type="hidden" name="other" value=test /> and update it with js and then it will be a part of the form
I have my code with a form.
I validate this with a javascript function sub().
When validation successful inside the javascript function i post to a php file by $.POST.
I can fetch the name field by its id name.
But I cant fetch the Cities as it has multiple value.
I am using jquery asmselect for multiple selection.
Can any one help me to fetch the multiple values of cities.
I tried by its id but failed to do.
Plz help me.............
My javascript code
<link rel="stylesheet" type="text/css" href="../jquery.asmselect.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<script type="text/javascript" src="jquery.asmselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select[multiple]").asmSelect({
addItemTarget: 'bottom',
animate: true,
highlight: true,
sortable: true
});
});
</script>
<script type="text/javascript">
function sub(){
var udt;
var name = document.getElementById('name').value;
var cities = document.getElementById('cities').value;
if(name!=""&&cities!=""){
udt ="name="+name+"&cities="+cities;
$.post( "submit.php", udt, function( data ) {
window.location.href = "/";
});
return false;
} else {
alert("Please, Complete the Registration Form...");
return false;
}
}
</script>
My html code is below
<form action="" onsubmit="return sub()" method="post">
<input type="text" id="name" name="name"/>
<select id="cities" multiple="multiple" name="cities[]" title="Select City">
<option>Paris</option>
<option>San Diego</option>
<option>San Francisco</option>
<option>Vancouver</option>
</select>
<input type="submit" name="submit" value="submit" />
</form>
Plz help me to solve my problem.
I can not find any solution. So I post this question here, thanks.
Try this (add whatever delimiter you want):
cities = '';
$("select[multiple] option:selected").each(function(){
cities += $(this).val() + '|';
});
I'm trying to import Jquery into codeigniter 2.X without exit. I put the link to the library and I saw in the debugger that it load it without errors, but , when I use the Docuemtn ready function it doesn't work. Can anybody help me?
This is the code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
<title>Hardware Deal</title>
</head>
<body>
<div id='header'>
<h1> Hardware deal </h1>
</div>
<div id='body'>
<form action='' method = 'post'>
Customer Name:<input type='text' name='Cname' id='CName'/><br>
Adress:<input type='text' name='CAddress'/><br>
Existing Customer? yes<input type='radio' name='existing' value='yes'> no<input type='radio' name='existing' value='no'><br>
Printer Contition: <select name='PCondition'/>
<option value=''></option>
<option value='New Press'>New Press</option>
<option value='Second Hand'>Second Hand</option>
</select>
</form>
Link
</div>
</body>
You're missing the http: from the source of the first script. Change the first script tag to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
The type of the second script tag is wrong. Change the second script to:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
I cannot figure out why this isn't working. It's a JQuery search box that uses the Freebase API to find games. When I POST, the gameID and gameName are blank.
<link type="text/css" rel="stylesheet" href="http://freebaselibs.com/static/suggest/1.3/suggest.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://freebaselibs.com/static/suggest/1.3/suggest.min.js"></script>
<script type="text/javascript">
$(function() {
$("#game-search").suggest({type:'/games/game'}).bind("fbSelect", function(e, data) {
$("#game-id").val(data.id);
$("#game-name").val(data.name);
});
});
</script>
<form name="input" action="/game-profile" method="post">
<input class="search-box" name="fbSelect" type="text" id="game-search"/>
<input type="hidden" name="gameID" id="game-id" />
<input type="hidden" name="gameName" id="game-name" />
<input class="button" value="Go" type="submit"/>
</form>
I grabbed your code and changed the hidden fields to type="text" just so I could see the data when a selection was made from the auto-complete. The fields weren't being populated on select, so I took a quick peek at the API.
It looks like the event you should be binding to is fb-select rather than fbSelect a la:
$(function() {
$("#game-search").suggest({type:'/games/game'}).bind("fb-select", function(e, data) {
$("#game-id").val(data.id);
$("#game-name").val(data.name);
});
});
It doesn't look like the fbSelect event you're binding to, ever gets fired. Have you included all required code parts for this to work?
(Answered retrospectively via comment on original question. #borkweb is more correct.)