I have a <select> tag on my site that when I change it submits the form and goes to the page in question where I can use the $_POST variable.
<form method='POST' action='myURL'>
<select onchange='this.form.submit();'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</form>
This is fine and works as intended but if someone is on the page and refreshes it I don't want to have to have the warning for resubmitting the form.
So what I was trying to do is remove the form element and have something like this and I can use $_GET instead of $_POST.
<select onchange='window.location.href="myURL?var=this.value";'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
However, this redirects to the page but the $_GET variable is literally this.value.
Is there another way of getting this to work or will I need to write an external piece of JS for this?
Note JS isn't my language, the snippets above are all being rendered via PHP
You've hardcoded the string - just do this instead:
<select onchange='window.location.href=("myURL?var=" + this.value);'>
I would suggest to you to avoid the use of inline-events as onchange and use the addEventListener() method instead to attach the change event.
So first give you select tag an identifier (id or class) then attach the event using this identifier like :
<select id="my-select">
Then in the JS part it could be attached like :
document.querySelector('#my-select').addEventListener('change', function(){
window.location.href = "myURL?var=" + this.value;
})
Or if you could use jQuery it will be :
$('#my-select').change(function(){
window.location.href = "myURL?var=" + $(this).val();
})
Related
I am using jQuery .load to load different HTML files into my webpage using a dropdown menu. Each dropdown selection calls the corresponding file. My target div is <div id="targetPane"></div> to load the file. That works fine. I am looking to clean up the code so I dont have to write $('#f1').click(function(){$('#targetPane').load( 'includes/inc_1.html' );}); 50 or so times.
The naming convention is that the #f1 will call inc_1.html, #f2 will call inc_2.html and so on. Maybe a solution using a for loop or ('option:selected',this) ? Thanks
$(document).ready(function () {
$('#f1').click(function(){$('#targetPane').load( 'includes/inc_1.html' );});
$('#f2').click(function(){$('#targetPane').load( 'includes/inc_2.html' );});
..
..
..
$('#f50').click(function(){$('#targetPane').load( 'includes/inc_50.html' );});
});
HTML
<form name="courseCalc">
<select name="myCourses"
OnChange="location.href=courseCalc.myCourses.options[selectedIndex].value">
<option selected>Please Select...</option>
<option id="f1" value="#">Item 1</option>
...
<option id="f50" value="#">Item 1</option>
</select>
</form>
Firstly, note that when working with select elements you are best off using the change event of the parent select element instead of listening for click on the option. It's better practice, more widely supported in various browsers, and follows accessibility guidelines.
With regard to your question, the technique you're looking for is called 'Don't Repeat Yourself', or DRY for short. To achieve it in this case you can hook the change event handler and use get a reference to the select from the Event object passed to the handler. You can amend the HTML to store the URL in the value attribute and then provide it as the argument to load(), like this:
<form name="courseCalc">
<select name="myCourses" id="courses">
<option selected>Please Select...
<option value="includes/inc_1.html">Item 1</option>
<option value="includes/inc_2.html">Item 2</option>
<!-- ... -->
<option value="includes/inc_50.html">Item 50</option>
</select>
</form>
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
});
});
Note that I added an id to the select element to make it easier to retrieve the element in the example, but any selector would work.
I'm building a select list within a modal using a PHP loop.
The options display properly,and upon inspecting elements they are showing the appropriate option value (pageID) as well:
<select name="pageToAssign">
<?php foreach($activePages as $pages):?>
<option value="<?php echo $pages['id']?>"><?php echo $pages['id']?><?php echo $pages['title']?></option>
<?php endforeach?>
</select>
Assign Page
The issue is that when I click my submit link, it hits my php script and performs the update in my database but it's with the wrong page ID. It always uses the last pageID of the array that builds my options in the select.
How can I possibly use javascript in order to make sure the pageID in my tag changes with each option select?
Alright, so first I added the id to the link so we can target it easily.
Next I added an id to the select for the same reason.
Then I created a change event handler for the select and added logic to it to first get the existing href, replace the pageID with the new value, and then set it back as the href on the link, so it keeps the displayID parameter.
I removed the php parts so it could be tested in the runnable snippet.
document.getElementById('pageToAssign').addEventListener('change', function() {
var assignPage = document.getElementById('assignPage');
var href = assignPage.getAttribute('href');
assignPage.href = href.replace( /pageID=[^&]+/, 'pageID='+ this.value );
});
<select name="pageToAssign" id="pageToAssign">
<option value="10">10</option>
<option value="15">15</option>
<option value="43">43</option>
</select>
Assign Page
I'm trying to make a drop down that links to the option once the user presses the submit button, but I'm getting weird results. It's worth mentioning that this is in Wordpress so I'm not sure if its affecting the results at all.
<form id="select-id">
<select name="page">
<option >Select Area</option>
<option value="/condo/etobicoke/">Etobicoke</option>
<option value="/condo/toronto/">Toronto</option>
<option value="/condo/north-york/">North York</option>
</select>
<input type="submit" value="Submit"">
</form>
<script>
$('#select-id').submit(function(e) {
e.preventDefault();
url = $('#select-id').val();
window.open(url);
});
</script>
The result for the first option is domainname.com?page=%2Fcondo%2Fetobicoke%2F
but I want domainname.com/condo/etobicoke/
You're grabbing the wrong value in your JavaScript. You need the field value, not the form value
$('#select-id').submit(function(e) {
e.preventDefault();
var url = $('[name="page"]').val();
window.open(url);
});
Check out this pen: https://codepen.io/xhynk/pen/VXePqM?editors=1111
I've changed it to console.log instead of window opening for demonstration purposes
The %2F is the same as a / character it's just been converted. Also if your domain is as domainname.com?page=%2Fcondo%2Fetobicoke%2F then you need to change your permalink structure in wordpress and maybe add rewrite functions if the link contains custom parameters.
https://codex.wordpress.org/Settings_Permalinks_Screen
https://codex.wordpress.org/Rewrite_API/add_rewrite_rule
I have a problem with JQuery & HTML.
I'm working on Wordpress 3.8.1, so my code is split up.
I've got this input (in sidebar.php):
<input type="hidden" name="lg" value=" ">
This input value needs to change when a option has been choosen from a select.
The select code is (in header.php):
<select class="langbox" name="lang" onChange="url_redirect(this.options[this.selectedIndex].value)">
<option >Language</option>
<option class="text-option" value="it">Italiano</option>
<option class="text-option" value="en">English</option>
<option class="text-option" value="de">Deutsch</option>
<option class="text-option" value="fr">Français</option>
<option class="text-option" value="ru">Pусский</option>
</select>
This is my function url_redirect():
function url_redirect(lang){
alert($('input[name="lg"]').val());
$('input[name="lg"]').val(lang);
alert($('input[name="lg"]').val());
window.location='http://www.myurl.com/'+lang;}
The first alert shows me that the value is " ", the second alert shows me the correct result (de, it, fr, en, ru), but the value of the input doesn't change, and I don't know why. I've tried everything but nothing works. The reason could be that the code is split in different files .php as wordpress needs? JS error?
P.S: the window.location works.
I think you can use cookie and set value to select,you can use jquery cookie plugin i think cookie functions is deprecate from jquery library
function url_redirect(lang){
$.cookie("selectindex",lang);
alert($('select[name="lang"]').val());
$('select[name="lang"]').val(lang);
alert($('select[name="lang"]').val());
window.location='http://www.myurl.com/'+lang;
}
if($.cookie("selectindex") !== undefined){
$('select[name="lang"]').val($.cookie("selectindex"));
}
Let's say I've got a drop down like this:
<div class="selector">
<select name="perPage">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="25">25</option>
</select>
</div>
I'm know PHP and Javascript (jQuery) so a solution in either would be just fine. But I've got a submit button underneath it, and instead of that, I was wondering if there's a way to click the drop down, pick your value, then have it send that automatically with OUT having to hit a submit?
You could use the 'onchange' element of the select:
<select name="dropdown" id="dropdown" onchange="this.form.submit()">
This only uses javascript without the need of loading the whole JQuery library - unless you use JQuery for other functions on the site.
You can listen to the change event using jQuery and submit the parent form automatically. Something like this:
$('.selector select[name=perPage]').on('change', function(e) {
$(e.currentTarget).closest('form').submit();
});
Assign an id to to select, e.g. selectID, then add jQuery of the form:
$('#selectID').change(function(){
this.form.submit()
});
$('select[name="perPage"]').on('change', submitForm);
where submitForm is a function that submits the form.