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>
Related
If a class is specified for the submit button, the post method parameter is not passed to php.
<form class = "delete_button", action="deleted.php" method="post">
<select name="nation" size=1>
<option value="KR">KR</option>
<option value="JP">JP</option>
<option value="US">US</option>
<option value="UK">UK</option>
<option value="GM">GM</option>
</select>
<input name = "email" type="email" placeholder="Enter your email">
<input class="delete_button_content" style="color:white" type="submit" value="delete">
</form>
and when I delete class for submit, it's working. what's problem ??
I've written a simple bootstrap 4 form with a GET method, and it only sends the values in the Submit button, not in the tag above it.
This is eventually to be handled in a POST request, but I've changed it to GET to more easily see what data the form is sending.
Here is the form code:
<form action="/picknumbers" method="GET">
<div class="form-group">
<label for="numberselect">Select one or more numbers</label>
<select multiple class="form-control mb-3" id="numberselect" size="6">
<option>1</option>
<option selected>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<button name="submission" value="numberspicked" type="submit" class="btn btn-primary btn-block">Choose numbers</button>
</form>
The output in the browser address bar is simply: /picknumbers?submission=numberspicked, without including the numbers picked by the user. How do I get the submitted form to include them?
You need to give a value on the options also you need to give a name to the select. To clarify, see the code below:
<select multiple class="form-control mb-3" name="select-name" id="numberselect" size="6">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Your select options appear to be missing value attribute tags. It should look like the below:
<div class="form-group">
<label for="numberselect">Select one or more numbers</label>
<select multiple class="form-control mb-3" id="numberselect" size="6">
<option value="1">1</option>
<option value="2" selected>2</option>
...
</select>
</div>
<button name="submission" value="numberspicked" type="submit" class="btn btn-primary btn-block">Choose numbers</button>
</form>
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>
<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']
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?