I want to pass values from a select form to a URL in order to connect to an external website using iframe solutions.
I'm very to new to .PHP & JavaScript. Please help me out.
This is the form I created to get data from users to pass into a specific URL.
<form action="selectcourier.php" method="GET">
<h1>Select courier service</h1>
<select>
<option value="Select">Select Courier Service</option>
<option value="1">DTDC</option>
<option value="2">AFL</option>
<option value="3">BlueDart</option>
</select>
Consignment Number: <input type="text" name="cNum"><br>
<center><input type="submit"></center>
</form>
selectcourier.php
<body>
<form><center><h3> CONFIRM <h3></center>
<iframe id="ifrm" width=300 height=300 seamless src="http://example.com/">
</body>
My question:
Hope you have understood that I'm trying to give all courier tracking service right from my website using an iframe. But here I'm unable to differentiate the appropriate URLs for different types of Courier Service to pass the value (cNum) and open that web link in an iframe.
I have all the URLs of all courier services.
Now how can I differentiate them to pick up the appropriate URL when a Courier Service is selected by the User?
Kindly help me, please. Thanks.
Since you simply want to load a url to an iframe based on the selection, I would go with this. Basic explanation can be found in the comments:
<html lang="en">
<head>
<script type="text/javascript">
// Set global variables
var serviceSelect;
var ConNumberElement;
// Wait for the page to be loaded
document.addEventListener('DOMContentLoaded', function() {
// Get required elements
serviceSelect = document.getElementById("CourierService");
ConNumberElement = document.getElementById("cNum");
});
function loadWebsite(){
// Get the iframe
var ifrm = document.getElementById("ifrm");
// Get Consignment Number
var ConNumber = ConNumberElement.value;
// Get Courier Service
var serviceValue = serviceSelect.value;
// Make sure a correct service is selected
if(serviceValue == "1"){ // DTDC is selected
ifrm.src = "http://dtdc.com/tracking/tracking_results.asp?action=track&sec=tr&ctlActiveVal=1&Ttype=awb_no&strCnno=" + ConNumber + "&GES=N&TrkType2=awb_no&strCnno2=" + ConNumber;
} else if(serviceValue == "2"){ // AFL is selected
ifrm.src = ""; // Add the correct url here. Take the example above on how to do it.
} else if(serviceValue == "3"){ // BlueDart is selected
ifrm.src = ""; // Add the correct url here. Take the example above on how to do it.
} else {
alert("You have to select a correct Courier Service");
}
}
</script>
</head>
<body>
<h1>Select courier service</h1>
<select id="CourierService">
<option value="Select">Select Courier Service</option>
<option value="1">DTDC</option>
<option value="2">AFL</option>
<option value="3">BlueDart</option>
</select>
Consignment Number: <input type="text" id="cNum"><br>
<input type="button" onclick="loadWebsite();" value="CONFIRM" />
<iframe id="ifrm" width=300 height=300 seamless src="http://example.com/">
</body>
</html>
Related
I have created a list with 6 options and users can only select one. I want that whenever a user selects an option from the list after they submit the form it directs them to a specific page depending on which selection.
Eg. I have 3 options
Facebook
Youtube
Twitter
If the user selects option 1 after submission it will direct them to the Facebook page, if they select option 2 it will direct them to a youtube page .. etc
This is quite simple. You just have to get the value from the selector & use JS to open that link. Check my solution for reference -
solution on JS Fiddle
function myFunction() {
let link =
document.getElementById("social").value
let fb = "https://facebook.com"
let tw = "https://twitter.com"
if(link == 'fb') {
window.open(fb);
} else if (link == 'tw') {
window.open(tw);
}
}
<select id="social">
<option value="fb">Facebook</option>
<option value="tw">Twitter</option>
</select>
<button onclick="myFunction()">
go to site
</button>
This somehow doesn't work here, working on JS Fiddle
<body>
<form>
<select name="" id="target">
<option value="facebook">Facebook</option>
<option value="youtube">Youtube</option>
<option value="twitter">Twitter</option>
</select>
<button type="button" id="sub_button">submit</button>
</form>
<script>
const data = {
facebook: 'https://facebook.com',
youtube: 'https://youtube.com',
twitter: 'https://twitter.com',
}
document.querySelector('#sub_button').onclick = function() {
let target = document.querySelector('#target').value;
window.location.href = data[target];
}
</script>
</body>
I am making a chrome extension/app creator and I have a drop down menu that lets you choose if the thing for chrome it makes will be a extension or app. based on that, it makes the inner html change. The only problem is that the innerHTML doesn't want to accept attributes, probably because of the quotations. I could make the drop down onchange clear the rest of the contend and create lots of elements and scripts, but is the scripts part possible? I guess I could make it show/hide the divs, but is there a way to do that with simple/no jQuery? I just wand it to look like this start and end image. This is the not working code I have
<!DOCTYPE html>
<html>
<body>
<h1>Google extension/app maker</h1>
<form>
Type:
<select id="type" onchange="selectType()">
<option value="1">Extension</option>
<option value="2">App</option>
</select>
<p id="inputs"></p>
</form>
<script>
function selectType() {
var typevalue = document.getElementById("type").value;
if (typevalue == 1) {
document.getElementById("inputs").innerHTML = "Extension name: <input id=" + name + "> Version: <input id=" + version + "> ";
} else {
document.getElementById("inputs").innerHTML = "bye";
}
}
</script>
</body>
</html>
All help appreciated!
You have to escape the double quotes of the attribute value.
document.getElementById("inputs").innerHTML = "Extension name: <input id=\"name\"> Version: <input id=\"version\"> ";
I have a web form where i disable a dropdown on page load in C#.
The drop down is to be disabled at all times, only when users make a certain selection is when I would like to change the value in my drop down. Either Yes or No.
This is my Javascript code:
var drpModeNeed = document.getElementById("drpAssessID"); //This dropdown is
//where I'm looking to change the value (it is disabled)
var drp4Val = (document.getElementById('<%=drp4ID.ClientID %>').value);
var drp14Val = (document.getElementById('<%=drp14ID.ClientID %>').value);
var drp15Val = (document.getElementById('<%=drp15ID.ClientID %>').value);
if (drp4Val == 1 || (drp14Val == 1 && drp15Val == 1))
{
//trying to change the value here of dropdown
}
This is what I've tried in the if statement
drpModeNeed.options[drpModeNeed.selectedIndex].value == 1;
but nothing happens. I know for sure that it definitely recognizes the statements, becase I've placed an alert inside the IF statement and each time it would show that the values were definitely selected.
I guess I'm wondering if I'm able to change the value of a disabled dropdown? if I am, then why isn't the code working?
To update the effective value of a <select> element, you don't set the .value of an <option>, you set the .selected property to true (or any truthy value):
drpModeNeed.options[1].selected = true;
Keep in mind that if the <select> element has the .disabled property set, posting the enclosing <form> will not send that value to the server. The browser assumes that disabled elements are supposed to be ignored.
it works for me:
function changeValue(newValue){
var drpModeNeed = document.getElementById("drpAssessID");
drpModeNeed.value=newValue;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="drpAssessID" disabled="disabled" class="aspNetDisabled">
<option value="1">one</option>
<option selected="selected" value="2">two</option>
</select>
<br /><br />
<button type="button" onclick="changeValue(1);">Set 1</button>
<br /><br />
<button type="button" onclick="changeValue(2);">Set 2</button>
</body>
</html>
I have a tabs with select option in each tab and I want it to be submitted in a specific URL assigned to them when I hit submit button. I'm doing this in javascipt. I'm really a newbie in javascript that's why I need your generous help.
I divided my select option according to their category using tabs, so my code is like this:
HTML
<ul class="ut-nav-tabs clearfix">
<li class="active">Corporate Services
</li>
<li class="">
Digital Marketing
</li>
</ul>
<div id="t1Tab" class="tab-pane clearfix active">
<form method="post" action="/trendstatic15/#wpcf7-f3409-o1">
<select id="id_corporateservices">
<option value="Can a foreign investors open his own company in the Philippines?">Can a foreign investors open his own company in the Philippines?</option>
<option value="What are the business regulations currently used in the Philippines?">What are the business regulations currently used in the Philippines?</option>
</select>
</div>
<input class="wpcf7-form-control wpcf7-submit" type="submit" value="Submit">
</form>
</div>
<div id="t2Tab" class="">
<form method="post" action="/trendstatic15/#wpcf7-f3409-o1">
<select id="id_digitalservices">
<option value="Should I add online video to my web sites?">Should I add online video to my web sites?</option>
<option value="What works best in Internet marketing?">What works best in Internet marketing?">What works best in Internet marketing?">What works best in Internet marketing?</option>
</select>
</div>
<input class="wpcf7-form-control wpcf7-submit" type="submit" value="Submit">
</form>
</div>
JAVASCRIPT
<script type="text/javascript">
function redirect() {
var filename_corporate = document.getElementById('id_corporateservices').value;
var filename_digital = document.getElementById('id_digitalservices').value;
var url ='';
if (filename_digital == 'What works best in Internet marketing?')
{
url= 'http://localhost/testsite/digital-page';
}
else if(filename_corporate == 'Can a foreign investors open his own company in the Philippines?')
{
url= 'http://localhost/testsite/corporate-page';
}
else
{
url= 'http://anyurlpage.com';
}
window.location = url;
}
</script>
Why is that when I selected any in the option and then submitted it always direct to the first url condition http://localhost/testsite/digital-page?
Because you are always referring to the one element with id "id_digitalservices" that never changes? It does not matter if you change tabs visibility it still remains in DOM.
You can get the actually changed option value by using the following code:
<script type="text/javascript">
function selectmenuOnchange(selectMenuId) {
//Get the selectmenu element by Id
var selectmenuID = document.getElementById(selectMenuId);
//Get selected options value
var optionValue = selectmenuID.options[selectmenuID.selectedIndex].value;
//this should return the selectmenu's id
alert(this.id);
redirect(optionValue);
}
function redirect(optionValue) {
var url ='';
if (optionValue === 'What works best in Internet marketing?')
{
url= 'http://localhost/testsite/digital-page';
}
else if(optionValue === 'Can a foreign investors open his own company in the Philippines?')
{
url= 'http://localhost/testsite/corporate-page';
}
else
{
url= 'http://anyurlpage.com';
}
window.location = url;
}
</script>
You need to edit both of your selectmenus to include my onchange function like this:
HTML
<select onchange="selectmenuOnchange(this.id);">
First time poster, long time forager. I have a system I am developing, cleaning up the process I would like to use pikaday.js to help users select the date insted of typing it in by hand.
The process:
From a dropdown (HTML) element, call to handleSelection(choice). handleSelection then looks at the option selected and either creates an input or a second select element with options. For two of the options I would like to create an input and add an onclick to kick pikadate...All I am getting is a input field with no call to the function on click, I can type in the date in the correct format and get a result so the post portion is working.
See code as follows:
JavaScript protion:
<script src='moment.js></script> <----used for date format only
<script src='pikaday.js></script>
<script>
function handleSelection(choice)
{
if(choice=='ordnum' || choice=='po' || choice=='serial' || choice=='asset') <----Works as intended
{
var a=document.getElementById('input');
var input=document.createElement('input');
input.type='text';
input.name='value';
a.appendChild(input);
}
if(choice=='varified')<----Works as intended
{
var a=document.getElementById('valid');
var valid=document.createElement('select');
valid.name='value';
valid.innerHTML="<option value='y'>Validated</option><option value='n'>Not Validated</option>";
a.appendChild(valid);
}
if(choice=='loc')<----Works as intended
{
var a=document.getElementById('valid');
var valid=document.createElement('select');
valid.name='value';
valid.innerHTML="<option value='loc0'>loc0</option><option value='loc1'>loc1</option><option value='loc2'>loc2</options><option value='loc3'>loc3</option><option value='loc4'>loc4</option><option value=';loc5'>loc5</option>";
a.appendChild(valid);
}
if(choice=='drcv' || choice=='disrv') <---Isn't working as intended!
{
var a=document.getElementById('input');
var input=document.createElement('input');
input.type='text';
input.name='value';
input.id='pkr';
input.onclick='getDate()'; <----Tried with quotes and with out, will not call out to getDate()
a.appendChild(input);
}
}
<script>
function getDate()
{
var picker = new Pikaday({field:docuemnt.getElementById('pkr'),format:'YYYYMMDD'});
</script>
}
}
</script>
HTML portion:
<body>
<form class='container' name='report' action='somepage' method='post'>
<select id='select' onChange='handleSelection(value)' name='opt'>
<option value="ordnum">Order Number</option>
<option value="po">Po Number</option>
<option value="drecv">Date Received</option>
<option value="disrv">Date In Service</option>
<option value='serial'>Serial Number</option>
<option value='asset'>Asset Tag</option>
<option value='loc'>Location</option>
<option value='varified'>Verified</option>
<option value='*' selected>All Systems</option>
</select>
<input type="submit" name="submit" value="Fetch..">
</p>
<p id='input'>
</p>
<p id='valid'>
</p>
</form>
</body>
</div>
</html>
Replace
input.onclick='getDate()';
with
input.addEventListener('click', getDate, false);
you could also use input.onclick = getDate;, but addEventListener is the preferred way of adding event listeners.
And make sure the getDate function is in scope, that means that it's either inside the same script tag as the event listener, or a script tag above the one containing the event listener.
Hoisting doesn't help across script tags.
So playing around a bit, seems style was the issue. I had a div style set in my original CSS and it seems that the div in the pikaday.css was going off of that position causing the stretched effect. I adjusted the percentage of the div in pickaday.css to 55% and now have the full effect that was wanted.