Show second value from select option - html

I want show in input text from select option where in value have 2 data
function changeHiddenInput (objDropDown)
{
document.getElementById("hiddenInput").value = objDropDown.value;
}
<form name="ff">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="j.hotmail.com|3">Jens</option>
<option value="a.hotmail.com|4">Adam</option>
<option value="d.homtail.com|5">Dan</option>
</select>
<input type="text" type="hidden" name="hiddenInput" id="hiddenInput" />
</form>
I want get value 3,4,5 and show in input text form when each option select.

split your value using " | "
function changeHiddenInput (objDropDown)
{
document.getElementById("hiddenInput").value = objDropDown.value.split('|')[1];
}
<form name="ff">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="j.hotmail.com|3">Jens</option>
<option value="a.hotmail.com|4">Adam</option>
<option value="d.homtail.com|5">Dan</option>
</select>
<input type="text" type="hidden" name="hiddenInput" id="hiddenInput" />
</form>

Related

HTML submit form from select but comma separate values in GET

I have a simple HTML form that has a dropdown.
<form method="get">
<select name="category[]" multiple class="form-control">
<option value="1">First Value</option>
<option value="2">Second Value</option>
<option value="2">Third Value</option>
</select>
<input type="submit" value="Submit">
</form>
Upon submission of this form, it redirects to https://WEBSITE/?category[]=1&category[]=2. How do I have it redirect to https://WEBSITE/?category=1,2
I was looking for a simple solution instead of using jQuery to intercept the form submission, load in every submitted value, comma separate it, and use window.location.href to redirect.
<select multiple class="form-control" onclick="document.getElementById('cat').value=Object.values(this.options).filter(option=>option.selected).map(option=>option.value).join(',')">
<option value="1">First Value</option>
<option value="2">Second Value</option>
<option value="3">Third Value</option>
</select>
<form method="get">
<input id="cat" type="hidden" name="category" value="">
<input type="submit" value="Submit">
</form>

Form with select tag

I have created a search box with select tag but : changes to &more%3A=abc when query is executed. I need to add more:abc or more:xyz when user choose from the select menu.
Is there any other workaround than jQuery?
<form action="test.html" id="searchform">
<input type="search" placeholder="Search here..."
name="q"/>
<input class="submit" type="image" src="icon.png">
<select name="more:" form="searchform">
<option value="">All</option>
<option value="abc">abc</option>
<option value="xyz">xyz</option>

Select field or Text field

I have a select with many options. If a user doesn't find value in option, He could fill a "other" field :
<select name="value">
<option>Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="value">
In this case, if I choose a value in the select, it appeared blank beacause of the text fiel.
Thanks
I imagined it, needs to be improved
http://jsfiddle.net/neiesc/jv6qgn03/
<select name="value">
<option>Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<label for="chkOther">
Other
<input id="chkOther" type="checkbox" value="0" />
</label>
<input id="txtOther" type="text" name="value" disabled>
Javascript code:
$( "#chkOther" ).click(function() {
$( "#txtOther" ).prop( "disabled", !$( "#txtOther" ).prop( "disabled"));
});
Use different names for select and text input.
<form method="post">
<select name="select">
<option>Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="field">
<input type="submit" name="submit">
</form>
And in PHP check what was chosen:
<?php
if (isset($_POST['submit'])) {
// form was sent
if (!empty($_POST['select'])) {
// select or both, use select
} elseif (!empty($_POST['input'])) {
// empty select txt input filled
} else {
// nothing chose in select and text input is blank
}
}
?>

Form not submitting files

For some reason the following form isn't submitting the file like it should and I'm unsure why, on the server side if I check $_FILES it is always empty however if I check say $_POST['article'] that submit just fine, so only the file isn't being received then does anyone see something wrong with this?
<form action="newindex.php?do=submit" enctype="multipart/form-data" method="post">
Subject:<br>
<input type="text" id="subject" name="subject"><br>
<textarea id="article" id="article" name="article"></textarea><br>
<div class="sliderimage"><h2 class="blockhead">Slider Image:</h2>
<table><tr><td><b>Image:</b><br>Dimensions should be 640x360.</td><td>
<input type="file" id="image" name="image"></td></tr>
<tr><td><b>Transition:</b></td><td>
<select id="transition" name="transition">
<option value="">Random</option>
<option value="sliceDown">slideDown</option>
<option value="sliceDownLeft">sliceDownLeft</option>
<option value="sliceUp">sliceUp</option>
<option value="sliceUpLeft">sliceUpLeft</option>
<option value="fold">fold</option>
<option value="fade">fade</option>
<option value="slideInRight">slideInRight</option>
<option value="slideInLeft">slideInLeft</option>
<option value="boxRandom">boxRandom</option>
<option value="boxRain">boxRain</option>
<option value="boxRainReverse">boxRainReverse</option>
<option value="boxRainGrow">boxRainGrow</option>
<option value="boxRainGrowReverse">boxRainGrowReverse</option>
</select></td></tr>
<tr><td><b>Caption:</b></td><td>
<input type="text" id="caption" name="caption"></table><br></div>
<input type="hidden" name="securitytoken" value="<?php echo $vbulletin->userinfo['securitytoken'] ?>" />
<div class="center"><input type="button" value="Preview" class="preview"><input type="submit" name="submit"></div>
</form>
You need to have an input specifying the max file size:
http://www.php.net/manual/en/features.file-upload.post-method.php
put the size attribute in the and this will work.
<input id="image" name="image" type="file" size = '50'"/>

Using a HTML select element to add get parameters to URL

I'm on a page like /gallery.php?place=300&name=place1, and I want it so that when I submit this form it goes to /gallery.php?place=300&name=place1&tag=X, where X is the number of the tag selected.
What's wrong here?
<form action="/gallery.php?place=300&name=place1" method="get">
<select name="tag">
<option value=1>Aerial</option>
<option value=2>Autumn</option>
<option value=4>Boats</option>
<option value=6>Buildings</option>
<option value=7>Canals</option>
</select>
<input type="submit" value="Filter"/>
</form>
Use hidden inputs instead of trying to use the query string twice:
<form action="/gallery.php" method="get">
<select name="tag">
<option value=1>Aerial</option>
<option value=2>Autumn</option>
<option value=4>Boats</option>
<option value=6>Buildings</option>
<option value=7>Canals</option>
</select>
<input type="hidden" name="place" value="300" />
<input type="hidden" name="name" value="place1" />
<input type="submit" value="Filter" />
</form>
Using a form with method get was overwriting the query string in your form action.
This extra parameters seem to work for me locally when using "post" instead of "get." Is that it?