I have a wp_query where I would like to change the posts per page via a drop-down select box. The code I have has been pieced together from various tutorials and snippets I already have so bear with me...
My basic wp_query is;
<?php
$postsperpage = isset($_POST['amt_per'])? $_POST['amt_per']: 10;
$args = array(
'post_type'=>'product',
'posts_per_page' => $postsperpage,
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>';
wp_reset_postdata();
} else {
}
?>
The tutorial I used had a few buttons where the values were the number of posts per page;
<form method="post">
<select id="select-box">
<option class="amt-button" name="amt_per" value="1">1</option>
<option class="amt-button" name="amt_per" value="2">2</option>
<option class="amt-button" name="amt_per" value="3">3</option>
<option class="amt-button" name="amt_per" value="4">4</option>
</select>
</form>
and the jQuery;
<script>
jQuery(document).ready(function($) {
// Postsperpage
$('select').click(function(){
$(this).closest('form').submit();
});
});
</script>
What I want to do is change the buttons into a drop-down select box like this;
<select id="select-box" method="post">
<option class="amt-button" name="amt_per" value="1">1</option>
<option class="amt-button" name="amt_per" value="2">2</option>
<option class="amt-button" name="amt_per" value="3">3</option>
<option class="amt-button" name="amt_per" value="4">4</option>
</select>
The problem I now have is my amended jQuery won't update the query with correct posts per page, this is what I have come up with;
$(function() {
$('#select-box').on('change', function(e) {
$(this).closest('form')
.trigger('submit')
})
})
any and all help is appreciated, Thanks!!
UPDATE
Thanks to #Krystian Barchański I've updated my dropdown code and wrapped the in a . This has got the form firing when you select a dropdown value but now the page just reloads with the same posts per page and the dropdown changes back the initial value, I'm assuming this is a jquery issue as when using the buttons everything worked fine?
You need to change the select box name amt_per. not for options.
<form method="post" action="">
<select id="select-box" name="amt_per">
<option class="amt-button" value="1">1</option>
<option class="amt-button" value="2">2</option>
<option class="amt-button" value="3">3</option>
<option class="amt-button" value="4">4</option>
</select>
</form>
You have to wrap your <select> with a <form> like this:
<form method="post">
<select id="select-box">
<option class="amt-button" name="amt_per" value="1">1</option>
<option class="amt-button" name="amt_per" value="2">2</option>
<option class="amt-button" name="amt_per" value="3">3</option>
<option class="amt-button" name="amt_per" value="4">4</option>
</select>
</form>
In your example you treat <select> as it could be submitted and it would send a post request but that can be done only by a form.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select - here you'll find list of available attributes for select there is no method nor url.
Related
I want to get html slected option value in php or javascript.
I am trying to do is:
<form action="book-page-1.php>" method="POST">
<select name="chosePage">
<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>
</select>
<input type="submit" name="submit" value="Update">
</form>
What I want is to pass the selected page number in "form action" before submitting the form like:
// I want to pass selected option value in "url" before submit the form
<form action="book-page-<?php echo selected option;?>.php>" method="POST">
I dont want in php post like:
// This is not my requirement - Because I want to pass value in "url" before submit the form
if (isset($_POST['chosePage'])) {
$op = $_POST['searchItemname'];
}
I want to pass the selected option value in url.
PHP or JAVASCRIPT all are welcome.
Any Idea would be welcome.
Thanks
you can add an id to the <select> element, <select id="chosePage "name="chosePage">.
then using javascript you can do:
let selected = document.getElementById("chosePage").value;
you can do it by this simple function :
function SandRequest(){
let selected = document.getElementById("chosePage").value;
document.getElementById("MyForm").setAttribute("action", "book-page-"+selected+".php");
return true;
}
<form id="MyForm" method="post" >
<select id="chosePage" name="chosePage">
<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>
</select>
<input name="Booktitle" type="text">
<button onclick="SandRequest()" >Update</button>
</form>
EDİTED("I think that i should use Ajax how can i do it")I created comboboxes dynamically. When I want to get the value from the textbox, I can't post to PHP. Here is my code:
HTML code:
<form method="post" name="sigortayap" action="sigorta-process.php" onsubmit="return a()" >
<select id="yetiskinid" class="selectTravelInputFieldsCar" name="yetiskin" onChange="yetiskintext()" >
<option value="-1">Seçiniz</option>
<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>
</select>
<div id="yetiskindiv"></div>
</form>
JS Code:
function yetiskintext() {
var secenek=document.getElementById("yetiskinid").value;
while (secenek>0){
var textBoxname = document.createElement('input');
textBoxname.name = 'textyetiskinname'+secenek;
textBoxname.id='textyetiskinname'+secenek;
textBoxname.type = 'text';
textBoxname.className='selectTravelInputFieldsCarJS';
document.getElementById("yetiskindiv").appendChild(textBoxname);
}
}
PHP Code:
<?php
$kece=htmlspecialchars($_POST["textyetiskinname1"]);
echo $kece;
?>
When I put echo $kece; in the PHP, I can't see any output. Why?
The name of the combobox is 'textyetiskinname'+secenek not 'textyetiskinname'. You miss the number at the end of the name.
Maybe you should try this:
textBoxname.setAttribute("name", 'textyetiskinname['+secenek+']');
instead of .name
I have a page that has several forms created using a while loop and each form has four selects. I am trying to work out how I can check each of the selects belonging to the current form (the one containing the button clicked) to confirm if any been selected. All of the forms are wrapped in a single div called #audit_content.
The intention is to check that if the variable grade isn't a certain value then the script checks if any of the selects have been selected.
(The value $i is created during the while loop, used to uniquely identify each form)
the html
<form id="audit_form<? echo $i; ?>">
<select name="grade" class="grade<? echo $i; ?>">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<select>
<select name="patient" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="exposure" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="equipment" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="positioning" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" name="audit_submit" class="audit_submit audit_submit_btn ie7_submit" value="" />
<input type="hidden" class="form_id" value="<? echo $i; ?>" >
</form>
The JQuery
<script>
$(document).ready(function(){
$('#audit_content').on("click", ".audit_submit", function(){
var form_id = $(this).prev('.form_id').val();
var grade = $('.grade'+form_id).val();
if(grade != 1){
$('select.reason_select').each(function(){
alert($(this).text())
}
});
</script>
The script as it is displays the values of every select with the class reason_select on the page which I realise is because I haven't told it to check a specific form, thats the bit I'm stuck at.
button shown is outside the form, not inside as mentioned.
To isolate any repeating type widget look for the parent of that widget, then search only within it:
Moving the button inside the form would make it very easy by doing:
$('#audit_content').on("click", ".audit_submit", function () {
var form=$(this).closest('form')
var selects=form.find('select');
// do somthing with selects
})
I would change the script to
<script>
$(document).ready(function () {
$('#audit_content').on("click", ".audit_submit", function () {
var form = $(this).prev('form');
var grade = $('select[name="grade"]', form).val();
if (grade != '1') {
$('select.reason_select', form ).each(function () {
alert($(this).text());
});
}
});
});
</script>
In the script you have posted there are several missing ) and } so it should create syntax errors..
You mention
current form (the one containing the button clicked)
but your button is not contained in the form, that is why i changed the code to form = $(this).prev('form')
I have three identical drop downs. I want to select a value from drop1 and have that value excluded from drop2. Then the selections in drop3 should exclude 1 & 2. Any ideas?
<select name="drop1">
<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>
</select>
<select name="drop2">
<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>
</select>
<select name="drop3">
<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>
</select>
You can use change event and remove selected elements from the dom
$('select[name=drop1]').change(function() {
var drop2 = $('select[name=drop2]').empty().hide();
var exclude = $(this).val();
var size = $(this).children().length;
for (var i=0; i<size; ++i) {
if (i != exclude) {
drop2.append('<option value="' + i + '">' + i + '</option>';
}
}
});
if you have more complex example and you need value based explude you can create a clone.
var clone = $('select[name=drop2]').clone();
$('select[name=drop1]').change(function() {
var copy = clone.clone();
copy.find('option[value=' + $(this).val() + ']').remove().end();
$('select[name=drop2]').replaceWith(copy);
});
Depending on how comfortable you are with PHP, or AJAX you have two solutions.
If you are more comfortable with PHP you could have a user submit the data from one select form and then using if statements like
if $value != '1'{
echo '<option value="1">1</option>';
}
and do that for each field in the second form; then replicate that for the third form.
The smoother looking solution would be using AJAX to use a listener to see when a user clicks a field a java value is set as that field and using a similar "if then show" method on the java-script variable to hide the fields that contain that value in the other forms.
Also one of the easiest solutions would be allowing multiple-selections (Assuming you are ok with the look of using one form & the values between the forms are the same like the example you gave above)... That example being:
<select id="my_num" name="my_num" size="5" multiple="multiple" >
<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>
</select>
I have an external Javascript file and i am trying to alert the value of select tag.
My <select> code looks like this:
<select id="vote">
<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>
</select>
<input type="button" value="vote" onclick="castvote();">
and the Javascript (which is external):
function castvote()
{
alert(document.vote.options[document.vote.selectedIndex].value);
}
But I get the error "document.vote is undefined".
Can someone help me with this.
Best
Zeeshan
If selecting by Id, you should use :
function castvote() {
var sel = document.getElementById("vote");
alert(sel.options[sel.selectedIndex].value);
}
Easy way, change your code so that your form field has a name attribute:
<select name="vote" id="vote">
<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>
</select>
<input type="button" value="vote" onclick="castvote();">
Better way, change your javascript so it is retreiving the select box by its ID rather than through the document object:
function castvote() {
var mySelect = document.getElementById("vote");
alert(mySelect.options[mySelect.selectedIndex].value);
}