I have a select box and text box like this :
<?php
$receipt="12345";
?>
<form>
<select name="sent" id="sent">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" name="receipt" value="<?=$receipt?>">
</form>
how can I clear the textbox after I choose option No ?
You can achieve it with jQuery change method
create variable receipt
var receipt = "12345"; //replace 12345 with <?php echo $receipt;?>
bind select element with jQuery change method$("#sent").change(function ()
check select element value against var receipt and if true, clear the input.
$(document).ready(function () {
var receipt = "123456";
$("#sent").change(function () {
var sel = $(this).val();
if (sel == 0) {
$("input[name=receipt]").val("");
} else {
$("input[name=receipt]").val(receipt);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="sent" id="sent">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" name="receipt" value="123456">
</form>
Fiddle
try this one
its work
i have try it
<html>
<head>
<script>
function Clear()
{
var sent = document.getElementById('sent').value;
if(sent==0){
document.getElementById("receipt").value="";
}
}
</script>
</head>
<body>
<?php
$receipt="12345";
?>
<form>
<select name="sent" id="sent" onchange="Clear()">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="receipt" name="receipt" value="<?=$receipt?>">
</form>
</body>
</html>
<?php
$receipt="12345";
?>
<script>
function SetField(val)
{
if(val==0)
document.getElementById('input-field').value='';
else
document.getElementById('input-field').value='<?php echo $receipt;?>';
}
</script>
<form>
<select name="sent" id="sent" onchange="SetField(this.value);">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="input-field" name="receipt" value="<?=$receipt?>">
</form>
Much compact
Related
I want to use the dropdown menu on site.google to link different pages, but I don't know what to
write inside the value field in order to make this code functioning well. Could you please assist me to figure out how I can do that!
<!DOCTYPE html>
<html>
<body>
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="what do I have to write here!">Page 1</option>
<option value="#what do I have to write here!">Page 2</option>
<option value="#what do I have to write here!">Page 3</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</script>
</body>
</html>
You can create an anchor element and click it or use the window.open function with the _top parameter. Like so:
<body>
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="https://google.com">Google</option>
<option value="https://developers.google.com/">Developers</option>
<option value="https://developers.google.com/apps-script">Apps Script</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
<script>
const list = document.getElementById('list')
function goToNewPage(){
// Alternative 1 window.open(list.value, '_top')
// Alternative 2
const a = document.createElement('a')
a.href = list.value
a.target = '_blank'
a.click()
}
</script>
</body>
Im trying to create a liste box with each of the item send to a different profile
I have my variable $ru who get all the users it's working .
I tryed this but it's not working:
<select class="chosen form-control" name="User" style="height:28px" >
<option selected="selected"> Rechercher </option>
#foreach($ru as $user)
<option value="/profile/$user->id ">
{{$user->name}}
</option>
#endforeach
</select>
Cant add an href like that just add it to the value and use an event listener:
Add the jquery link to you script tag, replace my url and value with yours.
$(document).ready(function(){
$('#user').change(function(){
window.location = this.value;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="chosen form-control" name="User" id="user">
<option>Select profile</option>
<option value="http://www.google.com"> user name </option>
</select>
source : stackoverflow
href Link is not possible in select / option. You can use jQuery to redirect to the profile selected.
Following is the example:
<select class="chosen form-control" name="User" style="height:28px" >
<option selected="selected">
Rechercher
</option>
#foreach($ru as $user)
<option value="{{ url('/profile/'.$user->id) }}">{{$user->name}}
</option>
#endforeach
</select>
<script>
$(document).ready(function(){
$('[name="User"]').change(function(){
var profile_url = $('[name="User"]').value();
// redirect to user profile
if(profile_url != "")
window.location.href = profile_url;
});
});
</script>
try this
<select required class="form-control" id="user" name="User" onchange="getUser()" required>
<option value="All">--All--</option>
#foreach($ru as $user)
<option value="{{ $user->id }}" {{ (old('user')== $user->id||($user) == $user->id) ? "selected" : "" }}>{{$user->name}}</option>
#endforeach
</select>
//javascript
function getUser()
{
var t= $('#user').val();
if(t!= "" ){
location.href="/profile/"+t;
}
}
I run a joomla site and would like to create an html form within an article that does the following:
<form action="compare.html" method="post">
<select id="select1" name="select1" required="">
<option value="A">OptionA</option>
<option value="B">OptionB</option>
<option value="C">OptionC</option>
</select>
<select id="select2" name="select2" required="">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input id="submit" type="submit" />
</form>
After selecting from the 2 dropdowns and submitting the form, the user should go to a page based on the selected options. E.g.
OptionA + Option1 --> goes to page_97.html
OptionA + Option2 --> goes to page_451.html
OptionA + Option3 --> goes to page_13.html
OptionB + Option1 --> goes to page_77.html
and so on.
I was hoping this could be done in pure html or with some simple JS (I'm a newbie to js,php)?
I came up with the following solution which works, but I am sure this could be optimized.
<select id="select1" name="select1" required="" oninput="join_names();">
<option value="">=== SELECT ===</option>
<option value="A">OptionA</option>
<option value="B">OptionB</option>
<option value="C">OptionC</option>
</select>
<br>
<select id="select2" name="select2" required="" oninput="join_names();">
<option value="">=== SELECT ===</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<br>
<button id="compareButton" class="float-left submit-button">COMPARE</button>
<script type="text/javascript">
var urlMap = {
"default" : "/default.html",
"A1" : "/page_97.html",
"A2" : "/page_451.html",
"A3" : "/page_13.html"
"A3" : "/page_77.html"
}
function join_names() {
var input_select1 = document.getElementsByName('select1')[0].value;
var input_select2 = document.getElementsByName('select2')[0].value;
var var_select12 = concatenate(input_select1, input_select2);
var var_select12_url = getMapValue(urlMap,var_select12);
document.getElementById("compareButton").onclick = function () {
window.location.href = var_select12_url;
};
}
function concatenate(string_one, string_two) {
return string_one+string_two;
}
function getMapValue(obj, key) {
if (obj.hasOwnProperty(key)) {
return obj[key];
} else {
return obj['default'];
}
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<div ng-app="" ng-controller="cntryController">
<input list="testList" type="" ng-model="SelectedDoctor" ng-change="LoadSessionData(SelectedDoctor)" />
<datalist id="testList">
<option value="Dr.Test1" ng-selected="selected"></option>
<option value="Dr.Test2"></option>
<option value="Dr.Test2"></option>
</datalist>
</div>
Controller
function cntryController($scope) {
$scope.LoadSessionData = function(val) {
console.log(val);
};
}
check this Link http://jsbin.com/jifibugeke/1/edit?html,js,console,output
Above mention datalist sample code and URL using angularjs, here my problem is what ever i am typing the text box, in controller add by added every words,in my requirement in datalist selected details only shows in controller,
//here your html
<div ng-app="myapp1" ng-controller="cntryController">
<input list="testList" type="" ng-model="SelectedDoctor" ng-change="LoadSessionData(SelectedDoctor)" />
<datalist id="testList">
<option ng-repeat="x1 in names" value="{{x1.drname}}">
</datalist>
</div>
//here your script
<script>
var app=angular.module('myapp1',[]);
app.controller('cntryController',function ($scope) {
//data for ng-repeat
$scope.names=[{'drname':'Dr.Test1'},{'drname':'Dr.Test2'},{'drname':'Dr.Test3'}]
$scope.LoadSessionData = function(val) {
//console log
console.log(val);
}
});
</script>
This is right way for angular:
<input list="Calle" type="text" ng-model="xCalle" >
<datalist name="Calle" id="Calle" >
<option value="11 DE SEPTIEMBRE DE 1888">
<option value="12 DE OCTUBRE">
</datalist>
Watch type="text" and where the name, id and ng-model are placed.
That will work with angular without any javascript additional function.
I'm having trouble trying to figure out how to append select options after detaching them based on the value of the initial select option of a form.
Here's the HTML for my form:
<form id="booking-form" action="#" method="post">
<legend class="bold">Bookings</legend>
<div class="input clearfix required">
<label for="cinema">Cinema</label>
<select name="cinema" id="cinema">
<option value></option>
<option value="maxima">Cinema Maxima</option>
<option value="rivola">Cinema Rivola</option>
</select>
<div class="error">
<p>Please select a cinema</p>
</div>
</div>
<div class="input clearfix required">
<label for="day">Day</label>
<select name="day" id="day">
<option value></option>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
<div class="error">
<p>Please select a time</p>
</div>
</div>
<div class="input clearfix required">
<label for="time">Time</label>
<select name="time" id="time">
<option value></option>
<option value="12">12pm</option>
<option value="3">3pm</option>
<option value="4">4pm</option>
<option value="6">6pm</option>
<option value="7">7pm</option>
<option value="9">9pm</option>
</select>
<div class="error">
<p>Please select a time</p>
</div>
</div>
<div class="input">
<input type="submit" value="Submit">
</div>
</form>
And here's the jQuery code I've written:
$(document).ready(function(){
// ***** Begin Booking Form Manipulation ***** //
// If Cinema Maxima is selected, remove Cinema Rivola time options
$('#cinema').change(function() {
if( $('#cinema').val() == 'maxima') {
$('#time option[value="12"]').detach();
$('#time option[value="4"]').detach();
$('#time option[value="7"]').detach();
}
// Else, remove Cinema Maxima time options
else {
$('#time option[value="3"]').detach();
$('#time option[value="6"]').detach();
$('#time option[value="9"]').detach();
}
});
// If Cinema Maxima is selected but weekend session is not selected, remove 3pm time option
$('#day').change(function() {
if( $('#cinema').val() == 'maxima' && $('#day').val() != 'saturday' || 'sunday') {
$('#time option[value="3"]').detach();
}
});
});
// ***** End Booking Form Manipulation ***** //
I'm not sure I've I'm approaching this the best way after having spent the last few hours trawling through stackoverflow, but I can't seem to find a solution! Any advice for a beginner would be greatly appreciated!
I've upload my code to jsfiddle here: http://jsfiddle.net/nness/L9v6ejvt/
Wouldn't you know it - .show() and .hide() seem to work perfectly on my PC when using Chrome! Is anyone else using Chrome on Mac?.. If so, any thoughts as to why it's playing up? The saddest part is had I been using the PC from the get-go this would have saved me the best part of a day! Thanks for all your suggestions guys, all very much appreciated!
If you can add the corresponding classes for the select as follows:
<select name="time" id="time">
<option value></option>
<option value="12" class="rivola">12pm</option>
<option value="3" class="maxima">3pm</option>
<option value="4" class="rivola">4pm</option>
<option value="6" class="maxima">6pm</option>
<option value="7" class="rivola">7pm</option>
<option value="9" class="maxima">9pm</option>
</select>
You can simply hide and show them like
$(document).ready(function () {
$('#cinema').on('change', function (ev) {
$('#time option').hide();
$("."+this.value).show();
});
});
Updated Fiddle
Side note: unnecessary DOM manipulation is really bad...
You can set custom HTML attributes and then use jQuery
<option value="maxima" exceptitems="12,9">Cinema Maxima</option>
JQuery
$(document).ready(function(){
$('#cinema').on('change', function(ev) {
$('#time option').show();
var opt=$("option:selected", this);
var exceptItems=opt.attr('exceptitems');
if(exceptItems)
{
var items=exceptItems.split(",");
for (i = 0; i < items.length; i++) {
$('#time option[value="'+items[i]+'"]').hide();
}
}
});
});
DEMO1
Update 1:
I have nice solution
<option value="maxima" data-command="$('#time option[value=12]').hide()">Cinema Maxima</option>
JQuery
$(document).ready(function(){
$('#cinema').on('change', function(ev) {
var opt=$("option:selected", this);
var strCommand=opt.data("command");
eval(strCommand);
});
});
DEMO2
Update 2: For easy management
$.fn.extend({
executeCommand: function() {
return this.on('change', function(ev) {
var opt=$("option:selected", this);
var strCommand=opt.data("command");
eval(strCommand);
});
}
});
$('#cinema').executeCommand();
DEMO3