Form with select tag - html

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>

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>

How do I delete datalist entries?

I'm trying to delete datalists from a textbox so the ones I have in my HTML can appear. Is there a way to delete datalist rows?
<form>
<input class="URL_Textbox" id="WebsiteName" name="WebsiteURL_Name" placeholder="URL Of Website">
<input
type="button"
class="submit_button"
onClick="submitURL()"
value="Go"
list="Recommended_URLs">
<datalist id="Recommended_URLs">
<option value="https://www.google.com/" label="Google">
<option value="http://www.youtube.com/" label="Youtube">
<option value="http://www.amazon.com/" label="Amazon">
<option value="https://www.facebook.com/" label="Facebook">
<option value="http://reddit.com/" label="Reddit">
</datalist>
>
<br>
<input class="URL_Textbox2" id="GoogleSearchInput" name="GoogleSearch" placeholder="Search Google" required >
<input
type="button"
class="submit_button2"
onClick="submitGoogle()"
value="Google It!"
>
</form>
Thanks for taking the time to read and answer my question!

PHP - Post Action

<form method="post" action="/page/?foo=ABC">
<select name="foo">
<option value="ABC">ABC</option>
<option value="DEF">DEF</option>
</select>
<select name="bar">
<option value="GHI">GHI</option>
<option value="JKL">JKL</option>
</select>
<input id="search" type="text" placeholder="Search">
<input type="submit" value="">
</form>
I have the above form on a Wordpress site. If I go to /page/?foo=ABC, this page shows me everything as it should where foo = ABC.
What do I need to set the action as to get the option from the select?
Your form needs to use GET instead of POST:
<form method="get" action="/page/">
Then then all the inputs will be appended to the URL in the manner you seek.
As Marc B said in the comments, use
$_POST['foo']

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?