This question already has an answer here:
javascript waiting php to complete function and refresh page
(1 answer)
Closed 4 years ago.
<div class="form-group" style="text-align: right;">
<label for="city">Select No Rows Per Page</label>
<select class="form-control" name="selectrows" style="width: 70px; text-align: right;">
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
index.php
I want to refresh index.php on select option.
If you really want to do it this way, you somehow need to get the selected option to the "reloaded" page. You could do this as a GET parameter in the URL. So add this:
<script>
document.addEventListener('DOMContentLoaded', () => {
document.getElementsByTagName('select')[0].addEventListener('change', (e) => {
location = 'index.php?selectrows=' + e.target.options[e.target.selectedIndex].value;
});
});
</script>
In the PHP script you can then access the selected value using $_GET['selectrows']
Try the following code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function doReload(catid){
document.location = 'samepage.php?catid=' + catid;
/* But if you want to submit the form just comment above line and uncomment following lines*/
//document.frm1.action = 'samepage.php';
//document.frm1.method = 'post';
//document.frm1.submit();
}
</script>
</head>
<body>
<form name="frm1" id="frm1">
<select name="catid" id="catid" onChange="doReload(this.value);">
<option value="" selected="selected">---All Category---</option>
<option value="1">Category One</option>
<option value="2">Category Two</option>
</select>
</form>
</body>
</html>
Related
My website customer frequently looking tracking details, every time they need to go different types courier website and enter tracking id.
All my courier websites tracking url position same, 1) courier website 2) id
eg: (More than one courier service and their respective tracking URL)
1) www.courier.com?trackingid=12345
2) www.courier.in/track/id=1234&type=0&service=0
How to merge two input fields.
eg:
Code :
<!DOCTYPE HTML>
<html>
<body>
<form action="#" method="post">
Select Courier :
<select name="courier">
<option value="">--Please choose an option--</option>
<option value="professional_courier">Professional Courier</option>
<option value="india_post">India Post</option>
</select>
Trackingid: <input type="text" name="trackingid"><br>
<input type="submit">
</form>
<?php
ini_set('display_startup_errors', 1);
ini_set('display_errors', 1);
error_reporting(-1);
// if (!empty($_POST)): header("Location: https://www.tpcindia.com/Tracking2014.aspx?id=".$_POST["trackingid"]."&type=0&service=0");
// endif;
if (!empty($_POST['courier']) && !empty($_POST['trackingid'])) {
switch ($_POST['courier']) {
case 'professional_courier':
$url = "https://www.tpcindia.com/Tracking2014.aspx?id=".$_POST["trackingid"]."&type=0&service=0";
break;
case 'india_post':
$url = "https://www.indiapost.gov.in/_layouts/15/dop.portal.tracking/trackconsignment.aspx";
break;
default:
throw new RuntimeException(sprintf('Unknown courier "%s"', $_POST['courier']));
header('Location: ' . $url);
};
};
?>
</body>
</html>
Not working. for single url its working(see below working code),
<!DOCTYPE HTML>
<html>
<body>
<form action="#" method="post">
Select Courier :
<select name="courier">
<option value="">--Please choose an option--</option>
<option value="professional_courier">Professional Courier</option>
<option value="india_post">India Post</option>
</select>
Trackingid: <input type="text" name="trackingid"><br>
<input type="submit">
</form>
<?php
if (!empty($_POST)): header("Location: https://www.tpcindia.com/Tracking2014.aspx?id=".$_POST["trackingid"]."&type=0&service=0");
endif;
?>
</body>
</html>
jQuery solution:
$( "#button" ).click(function() {
var x = $('#select1').val();
var y = $('#select2').val();
window.location.href = 'https://www.' + x + '.com?trackingid=' + y;
});
Hey it is very simple can check this example with PHP code user header location and pass your tracking after post
<!DOCTYPE HTML>
<html>
<body>
<form action="#" method="post">
<select name="cm_id">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Trackingid: <input type="text" name="trackingid"><br>
<input type="submit">
</form>
<?php if (!empty($_POST)): header("Location: http://localhost/test.php?trackingid=".$_POST["trackingid"]); endif;?>
</body>
</html>
I assume you using jQuery and this is your html form
<form action="#">
<select name="courier" id="courier">
<option value="www.abc.com">ABC</option>
<option value="www.xyz.com">XYZ</option>
</select>
<input type="text" name="tracknumber" id="tracknumber">
<input type="button" id="submit" value="submit">
</form>
To handle what you expect, use on click event jquery
$('#submit').click(function(){
var courier = $('#courier').val();
var tracknumber = $('#tracknumber').val();
window.open(courier+'?trackingid='+tracknumber, '_blank');
});
This is the complete code with multiple courier.
<html>
<head>
<title>Courier Tracking</title>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
crossorigin="anonymous"></script>
</head>
<body>
<form action="#">
<select name="courier" id="courier" multiple>
<option value="http://example.com">ABC</option>
<option value="http://example2.com">XYZ</option>
</select>
<input type="text" name="tracknumber" id="tracknumber">
<input type="button" id="submit" value="submit">
</form>
</body>
<script type="text/javascript">
$('#submit').click(function()
{
var courier = $('#courier').val();
var tracknumber = $('#tracknumber').val();
$.each(courier, function( index, value ) {
window.open(value+'?id='+tracknumber, '_blank');
});
});
</script>
</html>
Finally working, thanks to everyone.
<!DOCTYPE HTML>
<html>
<body>
<form action="#" method="POST">
Select Courier :
<select name="courier">
<option value="">--Please choose an option--</option>
<option value="professional_courier">Professional Courier</option>
<option value="india_post">India Post</option>
</select>
Trackingid: <input type="text" name="trackingid">
<input type="submit">
</form>
<?php
if (isset($_POST['courier'])) {
if ('professional_courier' === $_POST['courier']) {
header("Location: https://www.tpcindia.com/Tracking2014.aspx?id=" . $_POST["trackingid"] . "&type=0&service=0");
} else if ('india_post' === $_POST['courier']) {
header("Location: https://www.dhl.com/en/express/tracking.html?AWB=" . $_POST["trackingid"] . "&brand=DHL");
}
}
?>
</body>
</html>
i want to set value in bootstrap modal dropdown using jquery, that dropdown is also populated by mysql database, and when i select the any value from data table, model open and that selected value should already placed is modal drop down.picking up the value by jquery closest() function
this is where im getting the value of b_name
<td class="p_brand_name">Apple</td>
here is my Modal Code.
<div class="col-md-6">
<div class="form-group">
<label for="field-2" class="control-label">Brand</label>
<select class="form-control" name="p_brand_name" id="p_brand_name">
<option>Select Brand</option>
<option value="1">Apple</option>
<option value="2">Sony</option>
<option value="3">huawei</option>
<option value="4">Toshiba</option>
<option value="5">Dell</option>
<option value="6">Hp</option>
<option value="7">Samsung</option>
<option value="8">LG</option>
<option value="9">Aspire</option>
<option value="10">Lenovo</option>
<option value="11">Oppo</option>
<option value="14">Vivo</option>
<option value="16">Dawlance</option>
</select>
</div>
</div>
Here is my jquery code
var $row = $(this).closest('tr');
var b_name = $row.find('.p_brand_name').text(); // e.g it has value apple (b_name = apple)
console.log(p_id,b_name);
// $('select option[value='+b_name+']').prop({defaultSelected: true});
// $('#p_brand_name').val(b_name).attr('selected', 'selected');
// $('#p_sct_name').find($row.find('.p_sct_name').text()).attr('selected', 'selected');
// $('#p_color_name select').attr('value',$row.find('.p_color_name').text());
// $("#p_brand_name").val("b_name");
// $("#p_brand_name").get(0).selectedIndex = b_name;
// $("#p_brand_name").val(b_name).change();
// $("#p_brand_name")[b_name].selectedIndex=b_name;
// $('#p_brand_name').val(b_name).attr("selected", "selected");
// $('#p_brand_name').val(b_name).trigger("chosen:updated");
i have tried these all but none of this work
first of all i have demonstrated here how to get the option value and text on the change event of the select box:
$(document).ready( function(){
$('.form-control').on('change', function() {
let option_value = $(this).val();
let option_text = $(this).children("option:selected").text();
console.log(option_value, option_text);
});
});
Now, if i understand you correct, i hope, you want to file the select box like you have selected the option your self, well: in PHP you can do this like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<td class="p_brand_name">Apple</td>
<?php
$select_box_options = ['1' => 'Apple', '2' => 'Sony', '3' => 'huawei'];
?>
<form>
<div class="col-md-6">
<div class="form-group">
<label for="field-2" class="control-label">Brand</label>
<select class="form-control" name="p_brand_name" id="p_brand_name">
<option>Select Brand</option>
<?php
foreach ($select_box_options as $value => $text) {
$selected = ($text === 'Apple') ? 'selected' : '';
?>
<option value="<?=$value?>" <?=$selected?>><?=$text?></option>
<?php } ?>
</select>
</div>
</div>
</form>
</body>
</html>
and in JQuery to fire event:
$('.form-control').val('2').trigger('change');
I have used javascript to dynamically produce form fields in the form i used using addInput() function in javascript... but after i trigger javascript code and submit the form PHP code cannot access form field elements....
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" method="post">
University Name: <input type="text" name="college">
No. of branches:
<div id="dynamicInput">
<select name="branches" id="branches" onchange="if (this.selectedIndex) addInput('dynamicInput');;" ">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<script>
var counter = 0;
var limit = 3;
function addInput(divName)
{ var counter = 0;
var k=parseInt(document.getElementById("branches").value);
var newdiv;
while(k>0)
{
newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + counter + " <br><input type='text' name='branch["+counter+"]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
k--;
}
}
</script>
<input type="submit" value="submit" />
</form>
</body>
</html>
and the php code lets assume like this:
<?php
$name=$_POST["college"];
$text=$_POST["branch[0]"];
echo $name." ".$text"
?>
I am using jquery mobile's multiple select: custom to try and help filter data based on the user's selection(s).
I can see that jquery mobile already updates text ON SELECT because selecting an option automatically changes the text in the select menu.
Is there a way to tap into that, so that I can send the value of the selected options to a php page through AJAX and return results via JSON?
<form id="target" method="post">
<div data-role="fieldcontain">
<label for="select-choice-attunement" class="select ui-hidden-accessible">Filter Attunement</label>
<select data-mini="true" name="select-choice-attunement" id="select-choice-attunement" multiple="multiple" data-native-menu="false">
<option>Filter by Element</option>
<option value='1'>fire</option>
<option value='2'>water</option>
<option value='3'>earth</option>
<option value='4'>light</option>
<option value='5'>darkness</option>
</select>
</div>
</form>
To make it a bit more clear.
From the list above, you can see there are only 5 choices. The user might finish after 1, or all 5. The results need to mirror what they chose, preferably as fast as possible (which is why I would like to hook to jquery mobiles update). So if the choose 'fire' it will immediately filter via the called php function and returned json list, the necessary list items.
Lets imagine that I wanted to update the following with a new array of list items:
View:
<div id='change_with_ajax'>
<ul>
<?php
foreach ($ajaxretrievedarray as $array)
{
echo "<li>".$array['name']."</li>";
} ?>
</ul>
</div>
You may check the below example.
When the change event is triggered, the selected values are displayed inside an alert box.
<!DOCTYPE html>
<html>
<head>
<title>Select Choice</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('change', '#select-choice-attunement', function(e){
alert($(this).val());
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Select Choice</h1>
</div>
<!-- /content -->
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-choice-attunement" class="select ui-hidden-accessible">Filter Attunement</label>
<select data-mini="true" name="select-choice-attunement" id="select-choice-attunement" multiple="multiple" data-native-menu="false">
<option>Filter by Element</option>
<option value='1'>fire</option>
<option value='2'>water</option>
<option value='3'>earth</option>
<option value='4'>light</option>
<option value='5'>darkness</option>
</select>
</div>
</div>
</div>
</body>
</html>
I hope this helps.
I want to make a form where I can input a domain name and then click the submit button and have the domain name incorporated into part of a search result URL from places like Google, Bing, Yahoo, etc. After clicking the submit button I would like the results to be shown on the bottom of the page using iframe.
EDIT: Instead of opening new tabs, I would like the results to be shown on the bottom of the page using iframe. Is this possible? Here is the updated code so far:
<!DOCTYPE html>
<html>
<head>
<title>Domain Checker</title>
<meta name="description" content="Get useful information about a domain name." />
</head>
<body>
<h1>Domain Checker</h1>
<p>Use the domain checker to get useful information about a domain name. Type the domain name you want to check and hit enter.</p>
<script type='text/javascript'>
function openWindow(url)
{
var domain2 = document.getElementById('domain2').value;
window.open(url + domain2);
}
</script>
<form method='post'>
<label>Domain</label><input type='text' name='domain2' id='domain2'>
<select name="select" onChange="openWindow(this.options[this.selectedIndex].value)">
<option>Choose Below</option>
<option value="http://www.dmoz.org/search?q=">DMOZ</option>
<option value="https://flippa.com/valuation/">Flippa</option>
<option value="http://web.archive.org/web/*/">WayBack</option>
<option value="http://www.alexa.com/siteinfo/">Alexa</option>
<option value="https://www.google.com/search?&q=site:">Google Index</option>
<option value="https://www.google.com/search?&q=link:">Google Backlinks</option>
<option value="http://search.yahoo.com/search?p=site:">Yahoo Index</option>
<option value="http://search.yahoo.com/search?p=link:">Yahoo Backlinks</option>
<option value="http://www.bing.com/search?q=site:">Bing Index</option>
<option value="http://www.bing.com/search?q=site:">Bing Backlinks</option>
<option value="http://whois.domaintools.com/">Whois Info</option>
</select>
</form>
<hr>
<p>Results show here in iframe.</p>
</body>
</html>
<script type='text/javascript'>
function openWindows(domain)
{
if (domain) {
window.open('http://www.dmoz.org/search?q=' + domain);
window.open('https://flippa.com/valuation/' + domain);
window.open('http://web.archive.org/web/*/' + domain);
window.open('http://www.alexa.com/search?q=' + domain);
window.open('https://www.google.com/search?&q=site:' + domain);
}
}
</script>
<form action='your_form_processor.html' method='post' onsubmit="openWindows(document.getElementById('domain').value)">
<label>Domain</label><input type='text' name='domain' id='domain'>
</form>
For the other question in the comment.
<script type='text/javascript'>
function openWindow(url)
{
var domain = document.getElementById('domain').value;
//window.open(url + domain);
document.getElementById('frame').src=url+domain;
}
</script>
<form method='post'>
<label>Domain</label><input type='text' name='domain' id='domain'>
<select name="select" onChange="openWindow(this.options[this.selectedIndex].value)">
<option value="http://www.dmoz.org/search?q=">DMOZ</option>
<option value="https://flippa.com/valuation/">Flippa</option>
<option value="http://web.archive.org/web/*/">WayBack</option>
<option value="http://www.alexa.com/search?q=">Alexa</option>
<option value="https://www.google.com/search?&q=site:">Google</option>
</select>
</form>
<iframe id="frame">Your browser does not support iframes.</iframe>