How to get values from HTML select option list - forms

<form action="" method="post">
<select name="select1">
<option value="value1">Value one</option>
<option value="value2">Value two</option>
</select>
<input type="submit" name="submit" value="Go"/>
</form>
Onsubmit, i need to print Value one on submit. All the posts are using $_POST['select1'] to get the value. But it will only give value1

Try this
function changeValue(){
var e = document.getElementById("select1");
var strUser = e.options[e.selectedIndex].text;
document.getElementById("submit").value = strUser;
}
<form action="" method="post">
<select name="select1" id="select1">
<option value="value1">Value one</option>
<option value="value2">Value two</option>
</select>
<input type="submit" name="submit" id="submit" value="Go" onclick="changeValue();"/>
</form>

Related

Making a search form display inline with Bootstrap 5

I am trying to create a search form within a page using Bootstrap 5 and the following code:
<div class="row mb-5">
<div class="col-lg-10 offset-lg-1">
<form class="form-inline" role="form">
<label for="field">Find all where...</label>
<select id="field" class="form-select">
<option value="company_name" selected>Company Name</option>
<option value="federal_ein" selected>EIN</option>
<option value="state">State</option>
<option value="city">City</option>
</select>
<label for="term">includes...</label>
<input type="text" class="form-control" id="term" placeholder="Enter full/partial term" name="term">
<button type="submit" class="btn btn-primary btn-lg">Search</button>
</form>
</div>
</div>
I want the form to be inline, with the text box stretched to fill unused space in the row. I can't figure out how to achieve this. Any help on it? Thanks!
This code seems to work well. Thanks!
<form id="frmSearch" name="frmSearch" role="form" class="was-validated">
<div class="row mb-4">
<div class="col-lg-2 offset-lg-1 text-end">Find companies where...</div>
<div class="col-lg-2 text-start">
<select ID="ddlType" Class="form-control rounded" required>
<option value="" selected>Search by...</option>
<option value="company_name">Company Name</option>
<option value="city">City</option>
<option value="federal_ein">EIN</option>
<option value="state">State</option>
</select>
</div>
<div class="col-lg-1 text-center">contains...</div>
<div class="col-lg-4 d-flex">
<input type="text" ID="tbTerm" class="form-control rounded text-black" required />
</div>
<div class="col-lg-1 mx-auto">
<button type="submit" ID="btnSearch" class="btn-success btn text-white">Search</button>
</div>
</div>
</form>

Auto-fill PayPal checkout not working

I'm trying to implement Auto-fill Paypal checkout in my website, but it is not getting the country I provide. It can only get the quantity after submit. Please see the code below:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<div class="form-group">
<input type="hidden" name="on0" value="Country">
<label class="control-label">Country</label>
<select name="os0" class="form-control">
<option value="US">US</option>
</select>
</div>
<div class="form-group">
<input type="hidden" name="on0" value="Quantity">
<label class="control-label">Quantity</label>
<select name="os0" class="form-control">
<option value="11 units">11 units $3,000.00</option>
<option value="21 units">21 units $6,000.00</option>
<option value="51 units">51 units $12,500.00</option>
</select>
</div>
</form>

Codeigniter - Error While Passing Variables From Container to View

Hi I want to Pass input elements values while clicking button using post method and pass values to next view using CI. When submitting the button with values in input elements and redirecting it works well. But When I'm refreshing after redirecting the page the values of input elements are lost and shows blank page/the page i display when the value becomes null.
1st View
<form action="<?php echo base_url() ?>Mapcontrol/display_garage_by_location" method="post">
<div class="section_1">
<select id="cmbcity" name="cmbcity" class="frm-field required">
<option value="null">Select Your City</option>
<option value="1">fghfghfghf</option>
<option value="2">fghfghfgh</option>
<option value="3">fghfgh</option>
<option value="4">ffffffff</option>
<option value="5">hhhh</option>
<option value="6">dddd</option>
<option value="7">treee</option>
<option value="8">kiu</option>
</select>
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="input-group">
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
<input type="text" id="txtPlaces" placeholder="Enter a location" />
<input type="hidden" id="city2" name="city2" />
<input type="hidden" id="cityLat" name="cityLat" />
<input type="hidden" id="cityLng" name="cityLng" />
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="section_1">
<select id="cmbvehicletype" name="cmbvehicletype" class="frm-field required">
<option value="null">Type</option>
<option value="cr">dd</option>
<option value="mb">ghjghjd</option>
<option value="tk">ghjghj</option>
<option value="ar">hgjghj</option>
<option value="bi">gggh</option>
<option value="ov">gg</option>
</select>
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="section_1">
<select id="cmbservice" name="cmbservice" class="frm-field required">
<option value="null">Select</option>
<option value="vr">vr</option>
<option value="oc">oc</option>
<option value="br">br</option>
<option value="vs">vc</option>
<option value="sp">cc</option>
<option value="os">cd</option>
</select>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-2 submit_button">
<input type="submit" id="searchindex" value="SEARCH"/>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
Controller
public function display_garage_by_location()
{
// Loading Library
$this->load->library('googlemaps');
//Initialize our map. Here you can also pass in additional parameters for customising the map
$this->googlemaps->initialize();
// Create the map. This will return the Javascript to be included in our pages <head></head> section and the HTML code to be
// placed where we want the map to appear.
$data['map'] = $this->googlemaps->create_map();
// Load our view, passing the map data that has just been created
//$this->load->view('my_view', $data);
$data['locationvalue']=$this->input->post('city2');
$data['latvalue']=$this->input->post('cityLat');
$data['longvalue']=$this->input->post('cityLng');
$data['vehicleid']=$this->input->post('cmbvehicletype');
$data['serviceid']=$this->input->post('cmbservice');
$this->garage_location_markers($data);
}
public function garage_location_markers($data)
{
$this->load->view('templates/_header');
$this->load->view('content/locations-in-marker-view',$data);
$this->load->view('templates/footer');
}
2nd View
// In Second View I want to display if location value is null then dispaly no data found else display search results ..
The Problem is When location is not null it displays the details but when i refresh the page again control go back to the controller and results no data found.. How to Solve this?
Try Like this
In View
View user
In Controller
public function FunctionName($id) # determine function that receiving incoming parameter
{
if (empty($id)) {
echo "Token Missed Matched";
}
else{
# get data from model
$result = $this->model_name->model_function($id);
if(empty($result))
{
echo "No data found";
}
else{
$this->load->view('view_name');
}
}
}

URL direct depending on form selection

I have a simple form which I would like to redirect the user to a specific URL within my site, depending on the value they have selected. So far I have this but instead of directing to one of the 4 urls, I instead get "http://mydomain.com/?ApplianceType=americano.html&sub=Submit" in my address bar:
<form name="form1" method="get">
<p>
<label>
<select name="ApplianceType" id="ApplianceType">
<option value="americano.html">American Fridge Freezer</option>
<option value="freezer.html">Freezer only</option>
<option value="fridge.html">Fridge only</option>
<option value="fridgefreezer.html">Fridge/Freezer</option>
</select>
</label>
<label>
<input type="submit" name="sub" id="sub" value="Submit">
</label>
</p>
</form>
Can anyone please advise?
You can change your HTML:
<form name="form1" id="yourForm" action="americano.html" method="get"> <!-- Added an ID to the form, and set the default value of `action` to 'americano.html'. -->
<p>
<label>
<select name="ApplianceType" id="ApplianceType" onchange="setURL(this)"> <!-- Assigned the `select` to run the function on value change. -->
<option value="americano.html">American Fridge Freezer</option>
<option value="freezer.html">Freezer only</option>
<option value="fridge.html">Fridge only</option>
<option value="fridgefreezer.html">Fridge/Freezer</option>
</select>
</label>
<label>
<input type="submit" name="sub" id="sub" value="Submit">
</label>
</p>
</form>
Then use the following Javascript function:
<script>
function setURL(selectedValue)
{
var element = document.getElementById('yourForm'); // Change 'yourForm' to the actual ID you assign on your form.
element.action = selectedValue.value;
}
</script>
Please take note of the comments in the code.

Send same value to two hidden fields onchange

I'm having difficulty passing the same value to two hidden fields. So for example, if I select Product 1, I want both hidden fields to have a value of X.
<select>
<option value="X">Product 1</option>
<option value="Y">Product 2</option>
<option value="Z">Product 3</option>
</select>
<input id="test" name="product_id[]" type="hidden" value="">
<input id="test" name="product_id" type="hidden" value="">
I've tried using onchange methods, but I can only pass a single value only one of the hidden fields, not both.
Here is what I tried, granted I was using the same id for both fields which I realize now won't work.
<form action="../index.php" method="post" >
<div id="Select">
<select id="myselect" onchange="this.form.prodhid.value=this.selectedIndex">
<option>Please Select an Amount</option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</select>
<input type="hidden" name="product_id[]" id="prodhid" value="" />
<input type="hidden" name="product_id" id="prodhid" value="" />
<input value="Add to Cart" title="Add to Cart" type="submit">
</form>
You can't access two DOM elements with the same id. So you may change your markup to something like this
<input id="test1" name="product_id[]" type="hidden" value="">
<input id="test2" name="product_id" type="hidden" value="">
Or you can try something like this:
<html>
<head>
<script type="text/javascript">
function change()
{
var list = document.getElementById('test-group')
.getElementsByTagName('INPUT');
for (var i = 0; i < list.length; ++i)
list[i].value = 'X';
}
</script>
</head>
<body>
<select onchange="change()">
<option value="X">Product 1</option>
<option value="Y">Product 2</option>
<option value="Z">Product 3</option>
</select>
<div id="test-group">
<input name="product_id[]" type="hidden" value="">
<input name="product_id" type="hidden" value="">
</div>
</body>
</html>