I am trying to setup a page where the users can select 1 criteria from a select menu and then select the second from another.
I would then like these variables to pass through my auto updating div using ajax so that they are used in the .php that is refreshed.
The select menu is working fine but how would I pass the values through ajax and then make sure it remembered them for the refresh.
FORM
<select id="employee_user">
<option value="">--</option>
<option value="333">Test User</option>
<option value="111">Testing Testing</option>
</select>
<select id="they" onchange="showUser(this.value, employee_user.value)">
<option value="">--</option>
<option value="20120801" class="333" title="Test User">20120801</option>
<option value="20110801" class="333" title="Test User">20110801</option>
<option value="20100801" class="333" title="Test User">20100801</option>
<option value="20120801" class="111" title="Testing Testing">20120801</option>
<option value="20110801" class="111" title="Testing Testing">20110801</option>
</select>
</form>
AUTO REFRESHING DIV
<script>
(function($)
{
$(document).ready(function()
{
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('#updatingdiv').hide();
$('#loading').show();
},
complete: function() {
$('#loading').hide();
$('#updatingdiv').show();
},
success: function() {
$('#loading').hide();
$('#updatingdiv').show();
}
});
var $container = $("#updatingdiv");
$container.load("getholidaylog.php");
var refreshId = setInterval(function()
{
$container.load('getholidaylog.php');
}, 9000);
});
})(jQuery);
</script>
<div id="updatingdiv"></div>
<img src="loading.gif" id="loading" alt="loading" style="display:none;" />
and then getholidaylog.php would:
$year = $_GET["year"];
$username = $_GET["username"];
and use for the database query.
EDIT
$j(document).ready(function() {
$j("#year_select").change(function (){
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('#updatingdiv').hide();
$('#loading').show();
},
complete: function() {
$('#loading').hide();
$('#updatingdiv').show();
},
success: function() {
$('#loading').hide();
$('#updatingdiv').show();
}
});
var $container = $("#updatingdiv");
var user_select= $j('#user_select').val();
var year_select= $j('#year_select').val();
$container.load('getholidaylog.php',{username:user_select,year:year_select});
var refreshId = setInterval(function()
{
$container.load('getholidaylog.php');
}, 9000);
});
})(jQuery);
**
Following code passing the values to php page successfully
<script type="text/javascript">
$(document).ready(function(){
$("#they").change(function () {
var firstVal = $("#employee_user").val();
var secVal = $("#they").val();
$.ajax({
type: "POST",
data: "year="+ firstVal +"&username="+ secVal,
url: "getholidaylog.php",
success: function(msg){
$("#updatingdiv").html(msg);
}
});
});
});
</script>
but instead of loading the getholidaylog.php into div load the content of respective page into the div
DO Something like this..
Add two hidden fields in your html like this:
-------
<input type="hidden" id="userselect" />
<input type="hidden" id="yearselect" />
</form>
Now Change your jQuery code like this..
Modify your onchange function of year_select like this and put it separately . Dont include ajax setup in this.
$j("#year_select").change(function (){
$('#userselect').val($('#employee_user').val());
$('#yearselect').val($('#they').val());
});
Now take the value from hidden field.change these lines.
var user_select= $j('#userselect').val();
var year_select= $j('#yearselect').val();
So your Final hmtl markup would look like this:
<select id="employee_user">
<option value="">--</option>
<option value="333">Test User</option>
<option value="111">Testing Testing</option>
</select>
<select id="they" onchange="showUser(this.value, employee_user.value)">
<option value="">--</option>
<option value="20120801" class="333" title="Test User">20120801</option>
<option value="20110801" class="333" title="Test User">20110801</option>
<option value="20100801" class="333" title="Test User">20100801</option>
<option value="20120801" class="111" title="Testing Testing">20120801</option>
<option value="20110801" class="111" title="Testing Testing">20110801</option>
</select>
<select id="employee_user">
<option value="">--</option>
<option value="333">Test User</option>
<option value="111">Testing Testing</option>
</select>
<select id="they" onchange="showUser(this.value, employee_user.value)">
<option value="">--</option>
<option value="20120801" class="333" title="Test User">20120801</option>
<option value="20110801" class="333" title="Test User">20110801</option>
<option value="20100801" class="333" title="Test User">20100801</option>
<option value="20120801" class="111" title="Testing Testing">20120801</option>
<option value="20110801" class="111" title="Testing Testing">20110801</option>
</select>
<input type="hidden" id="userselect" />
<input type="hidden" id="yearselect" />
</form>
and your code will look like this:
$(function(){
$("#year_select").change(function (){
$('#userselect').val($('#employee_user').val());
$('#yearselect').val($('#they').val());
});
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('#updatingdiv').hide();
$('#loading').show();
var user_select= $j('#userselect').val();
var year_select= $j('#yearselect').val();
},
complete: function() {
$('#loading').hide();
$('#updatingdiv').show();
},
success: function() {
$('#loading').hide();
$('#updatingdiv').show();
}
});
$container.load('getholidaylog.php',{username:user_select,year:year_select});
var refreshId = setInterval(function()
{
$container.load('getholidaylog.php');
}, 9000);
})
The low level $.ajax() method contains a variable called data through which you can pass data to the server. So if you want the send data in this case, you can do something like:
$.ajax({
data: {year:1999,username:'Codded'}
});
Same goes for load, the second parameter there is for passing data, so you can do
$("#divId").load('foo.php',{username:'Codded',year:1999});
u can use the data attribute of the ajax function to pass the selected value like this example :
$.ajax({
data: {'name': 'Dan'} // name is the name of the variable and Dan is the value in your case if the selected value
});
Check out your id of select is same as given below because it does not matches with the select box you have coded
var user_select= $j('#user_select').val();
var year_select= $j('#year_select').val();
Related
The dating application is built with MeteorJS and the page refreshes whenever I attempt to submit this form to register a user. Also, Meteor.user().services.twitter.profile_image_url doesn't seem to get Twitter image. Please help
imports/ui/components/partials/register-user.html
<template name="registerUser">
<div class="user-card">
<form id="user-form">
<div class="row">
<label for="gender">gender</label>
<select id="gender">
<option value="cis man">cis man</option>
<option value="cis woman">cis woman</option>
<option value="non binary" selected>non binary</option>
<option value="trans man">trans man</option>
<option value="trans woman">trans woman</option>
</select>
</div>
<div class="row">
<label for="prefer">seeking</label>
<select id="prefer">
<option value="cis men">cis men</option>
<option value="cis women">cis women</option>
<option value="everyone" selected>everyone</option>
<option value="non binary">non binary</option>
<option value="trans women">trans women</option>
<option value="trans men">trans men</option>
</select>
</div>
<div class="row">
<button class="button-primary register-user" type="submit" form="user-form">register</button>
</div>
</form>
</div>
</template>
imports/ui/components/partials/register-user.js
import { Meteor } from 'meteor/meteor';
import { Session } from 'meteor/session';
import './register-user.html';
Template.registerUser.onCreated(function () {
this.register_name = Meteor.user().profile.name;
this.register_img = Meteor.user().services.twitter.profile_image_url;
});
Template.registerUser.events({
'submit .register-user' (event) {
event.preventDefault();
var gender = event.target.gender.value;
var prefer = event.target.prefer.value;
if (confirm("by continuing you verify you are a minimum of 21 years old")) {
Meteor.call('register.user', this.register_name, "", gender, prefer, (error) => {
if (error) {
Flash.danger(error.error, 3000);
} else {
Session.set({'complete': true});
}
});
}
},
});
imports/api/methods.js
...
'register.user': function(name, img, gender, prefer) {
RegisteredUsers.insert({ _id: this.userId, complete: true, role: false });
Profiles.insert({
_id: this.userId, name: name, img: img, gender: gender, prefer: prefer, address: "", right: [], matches: [],
});
// redisCollection.hset(this.userId, { "name": name, "img": img, "gender": gender });
},
...
Your example show an error on event mapping:
'submit .register-user' (event) {
You used a class mapping of the button, but the submit event is from the form. Then change it to:
'submit #user-form' (event) {
I think that the issue is because you are mapping the submit event to the button which has the class register-user. Try changing your code to refer to the form from which the submit event comes. You can use its id (user-form) for doing that.
It'd be something like this:
'submit #user-form'(event) {
event.preventDefault();
...
}
Using Ember, I am trying to build a form, with <select> droplists populated from stores. I don't know how to recover a value from here to use in a "save" function.
What am I doing wrong?
Here is a simplified version of what I have :
The route accesses to differents models. This works fine :
import Ember from 'ember';
export default Ember.Route.extend({
model() {
var store = this.store;
return Ember.RSVP.hash({
fighters: store.findAll('fighter'),
duels:store.findAll('duel')
});
},
setupController(controller, models) {
var fighters = models.fighters;
var duels = models.duels;
controller.set('fighters', fighters);
controller.set('duels', duels);
}
});
The Controller should save a new duel using the form's values. Here "formdata" is null when the form is submitted
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
save(formdata) {
var newduel = this.store.createRecord('duel', {
fighter1:formdata.fighter1,
fighter2:formdata.fighter2,
});
}
}
});
The template displays droplists OK, but I cannot "connect" to the value in the controller, whatever ##FIGHTERn## I try !
<form {{action "save" formdata on "submit"}}>
<dl>
<dt>
<select value='##FIGHTER1##'>
{{#each fighters as |fighter|}}
<option value={{fighter.id}}>{{fighter.name}}</option>
{{/each}}
</select>
</dt>
<dt>
<select value=##FIGHTER2##>
{{#each fighters as |fighter|}}
<option value={{fighter.id}}>{{fighter.name}}</option>
{{/each}}
</select>
</dt>
</dl>
<button type="submit">Add</button>
<form {{action "save" formdata on "submit"}}>
<dl>
<dt>
<select onchange={{action (mut fighter1) value="target.value"}}>
{{#each fighters as |fighter|}}
<option value={{fighter.id}} selected={{is-equal fighter1 fighter.id}}>{{fighter.name}}</option>
{{/each}}
</select>
</dt>
<dt>
<select onchange={{action (mut fighter2) value="target.value"}}>
{{#each fighters as |fighter|}}
<option value={{fighter.id}} selected={{is-equal fighter2 fighter.id}}>{{fighter.name}}</option>
{{/each}}
</select>
</dt>
</dl>
<button type="submit">Add</button>
Controller:
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
save() {
this.store.createRecord('duel', {
fighter1: scope.get("fighter1"),
fighter2: scope.("fighter2"),
});
}
}
});
This can help you out
I'm making a form at the moment and I was wondering how I could get the script to show a textbox after I have selected options "other" or "option 3".
HTML:
<select name="choice" onchange="if(this.selectedIndex==5)
{this.form['other'].style.visibility='visible'}else
{this.form['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden; margin-left:3px"/>
Javascript:
window.addEvent('domready', function() {
$('hearabout').addEvent('change', function() {
if ($('hearabout').value == 'Rekening' ) {
$('other_input').setStyle('display', 'block');
} else {
$('other_input').setStyle('display', 'none');
}
});
if ($('hearabout').value == 'Rekening' ) {
$('other_input').setStyle('display', 'block');
} else {
$('other_input').setStyle('display', 'none');
}
});
How do I change "this.selectedIndex==5" so that it takes both option 3 and 5?
Thanks
Add ID for ur select <select id='someth'>
Add an event for changing the selected value:
$('#someth').on('change', function(){
if (('#someth').val() == "other")
{
$('#YourInputID').css('display','block');
}
});
Dont miss to add display:none; in the input style
I have an HTML page with a department selectbox. when end user selects any department I have no show him the no of employs in that department. The employee collect
<select multiple="" class="chosen-select choice" id="form-field-select-4" data-placeholder="Choose a Department..." onchange="show_employee_count(this.value)">
<option value="Management">Senior Management</option>
<option value="Legal">Legal</option>
<option value="Operations">Operations</option>
<option value="Administration">Administration</option>
<option value="R&D">R&D</option>
<option value="Sales & Marketing">Sales & Marketing</option>
<option value="Finance">Finance</option>
<option value="Technology">Technology</option>
<option value="Customer Service">Customer Service</option>
<option value="Pro Services">Pro Services</option>
<option value="HR">HR</option>
</select>
The count of employee to show in this container div
<div id="emp_count"></div>
I have tried this as :
HTML
<select name='department' id='department'>
<option value="Management">Senior Management</option>
<option value="Legal">Legal</option>
<option value="Operations">Operations</option>
<option value="Administration">Administration</option>
<option value="R&D">R&D</option>
<option value="Sales & Marketing">Sales & Marketing</option>
<option value="Finance">Finance</option>
<option value="Technology">Technology</option>
<option value="Customer Service">Customer Service</option>
<option value="Pro Services">Pro Services</option>
<option value="HR">HR</option>
</select>
<div id="leads_coount"></div>
JS Code
<script type="text/javascript">
$(function(){
$("#department").change(function(){
var selectedDepartment = $(this).find(":selected").val();
console.log("the department you selected: " + selectedDepartment);
$.ajax({
type: "POST",
url: "ajax.php",
cache: false,
data: { method: "get_lead_count", department: selectedDepartment }
})
.done(function( leads ) {
$( "#leads_coount" ).html(leads);
}).fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
ajax.php
<?php require_once('DataAccessBean.class.php');
if($_POST['method'] == 'get_lead_count') {
// select a collection
$collection = new MongoCollection($db, 'employs');
// find the collections with department
$clause = array('Department' => $_POST['department']);
$cursor = $collection->find($clause)->count();
echo 'There are '.$cursor.' employees available in this department';
//echo $_POST['department'];
}
Is there a better way to do?
<select name="cmbpgCategory" id="cmbpgCategory">
<option value="" label="Select" selected="selected">Select</option>
<option value="CreditCards" label="Credit Cards">Credit Cards</option>
<option value="DebitCards" label="Debit Cards">Debit Cards</option>
<option value="NetBanking" label="Net Banking">Net Banking</option>
</select>
in above code if user selects option like creditcards then page should redirect to the creditcard page and other field in that form should be posted to nxt page like name email etc this should after cliking button<button value='seatselect' type="submit" >Confirm Booking</button>
Your HTML page with Script Code:
<html>
<body>
<select name="cmbpgCategory" id="cmbpgCategory">
<option value="" label="Select" selected="selected">Select</option>
<option value="CreditCards" label="Credit Cards">Credit Cards</option>
<option value="DebitCards" label="Debit Cards">Debit Cards</option>
<option value="NetBanking" label="Net Banking">Net Banking</option>
</select>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('#cmbpgCategory').bind('change', function () {
var cardType = $('#cmbpgCategory').val();//you will get CreditCard, debitcards values here
switch(cardType)
{
case 'CreditCards': window.location.href = 'creditcard.php';
//more cases to follow?, put break
}
});
});
</script>
</body>
</html>