I Have a drop down box which once clicked updates the pagination results for my MYSQL query results and this works fine. The problem i have is that there are two forms on the page, the first for the pagination drop down box and the second for some additional filters.
When I click to up date the pagination result, the onlick element submits data from both forms, instead of just the pagination form.
I am new to javascript and so i may have the wrong idea but i thought that the javascript would only submit the data from the form with the name / id of form.
HTML for pagination drop down box.
<form id="form" name="form" method="GET" action="">
<label for="pagination"></label>
<select name="pagination" id="pagination">
<option value="10">10 Items Per Page</option>
<option value="20">20 Items Per Page</option>
<option value="30">30 Items Per Page</option>
<option value="40">40 Items Per Page</option>
<option value="50">50 Items Per Page</option>
<option value="75">75 Items Per Page</option>
</select>
</form>
HTML For Second Form
<form name="filter" id="filter" method="GET" action="visitor_list8.php">
<label for="referrer"></label>
<select name="referrer" id="referrer">
<option value="">Select</option>
<option value="Adwords">Adwords</option>
<option value="Bing">Bing</option>
<option value="Direct">Direct</option>
<option value="Google">Google</option>
<option value="Yahoo">Yahoo</option>
</select>
<label for="visitor_type"></label>
<select name="visitor_type" id="visitor_type">
<option value="">Select</option>
<option value="Not Set">New</option>
<option value="returning">Returning</option>
</select>
<label for="sortby"></label>
<select name="sortby" id="sortby">
<option value="">Select</option>
<option value="timedate">Date / Time</option>
<option value="page_views">Page Views</option>
<option value="referrer">Referrer</option>
<option value="search_term">Search Term</option>
<option value="visitor_type">Visitor Type</option>
<option value="company_name">Company Name</option>
</select>
<input type="submit" name="button" id="btn-submit" class="btn-submit" value="Submit">
</form>
Javascript
$(document).ready(function() {
$('#pagination').change(function() {
$('form').submit();
});
});
Change $('form').submit(); to $('#form').submit();
$('form').submit(); will submit every form on the page, while
$('#form').submit(); will submit the form with the id form.
Maybe consider changing the form id to something else to avoid confusion.
Try the following to submit the form containing the select
$(document).ready(function() {
$('#pagination').change(function() {
this.form.submit();
});
});
use
$('#form').submit();
Thus you only trigger the submit on the specified form instead of triggering them all.
Yeah, your selector is too general. $('#form').submit() or $('#filter').submit().
Related
I have a form that is a simple dropdown menu that users can select an name and the affiliate code matched to it be used in the url but php changes the periods to underscores, so I was wondering if there was a roundabout way of doing it with javascript?
<form>
<div>
<label for="organisation">Please select:
</label>
<select name="quote/results.php?product=product_here&ac=group&username" method="get">
<option value="111111111">Number One</option>
<option value="222222222">Number Two</option>
<option value="333333333">Number Three</option>
<option value="444444444">Number Four</option>
</select>
<button>Quote </button>
</form>
After the username in the URL, that's where I want the number code to go which I had working in php but the results.php turned into results_php which obviously came back as an error.
Are there any possible ways to go around this?
I think you want something like this:
<form action="quote/results.php" method="GET">
<div>
<input type="hidden" name="product" value="product_here"/>
<input type="hidden" name="ac" value="group"/>
<label for="organisation">Please select:</label>
<select name="username">
<option value="111111111">Number One</option>
<option value="222222222">Number Two</option>
<option value="333333333">Number Three</option>
<option value="444444444">Number Four</option>
</select>
<button type="submit">Quote</button>
</div>
</form>
Put the url in the action attribute of the form instead, then use hidden inputs for the product and ac, so that they are included in the url after submitting. And add type="submit" in the buton
I have a form that is like the following:
<label>
scale a<input type="radio" name="sellorbuy" value="Yes" id="rdYes" />
</label>
<label class="leftspace">
scale b<input type="radio" name="sellorbuy" value="No" id="rdNo" />
</label>
<p class="searchpg">Price</p>
<fieldset id="sell">
<select id="pricemin" name="minsell" class="form-control">
<option value="50000">Min Price</option>
<option value="100000">£100,000</option>
<option value="200000" >£200,000</option>
<option value="300000" >£300,000</option>
<option value="400000" >£400,000</option>
</select>
<select id="pricemax" name="maxsell" class="form-control">
<option value="5000000">Max Price</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
</select>
</fieldset>
<fieldset id="let" style="display:none;">
<select id="lpricemin" name="minbuy" class="form-control">
<option value="500">Min Price</option>
<option value="500">£500</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
</select>
<select id="lpricemax" name="maxbuy" class="form-control">
<option value="5000">Max Price</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
</select>
</fieldset>
This switches fieldsets by using the following:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
The trouble I am having is the search form that is submitted and displayed on the next page so we carry over the contents of the form. If someone has selected the 'Scale B' then that is already toggled on the next page but the fieldset has not changed? Is there any way to change to the jquery to detect which checkbox is toggled and change the fieldset accordingly or even modify the switch to make it work better?
Created a fiddle to show how the form works https://jsfiddle.net/v3waaa20/1/
Some slight changes and triggering change on load can do the trick.
$("input[name='sellorbuy']").change(function () {
value = $("input[name='sellorbuy']:checked").val();
$("#sell").toggle(value == "Yes");
$("#let").toggle(value == "No");
}).change();
<form method="post" action="asdasd" class="custom" id="search">
<select name="sel1" id="sel1">
<option value="all">all</option>
<option value="val1">val1</option>
<option value="val2" selected="selected">val2</option>
</select>
<select name="sel2" id="sel2">
<option value="all">all</option>
<option value="val3">val3</option>
<option value="val4" selected="selected">val4</option>
</select>
</form>
I want to select the first field of all the Select (so set the value "all" to all the Select) clicking a button
Your form should have a reset button
<form method="post" action="asdasd" class="custom" id="search">
<select name="sel1" id="sel1">
<option value="all">all</option>
<option value="val1">val1</option>
<option value="val2" selected="selected">val2</option>
</select>
<select name="sel2" id="sel2">
<option value="all">all</option>
<option value="val3">val3</option>
<option value="val4" selected="selected">val4</option>
</select>
<input type="button" name="Reset" />
</form>
After adding a reset button input element to your form below code should reset all select fields.
jQuery( "input[name=Reset]" ).click( function(){ //jQuery click event
jQuery( "select" ).each(function() { //for each select type
$(this).val( "all" );
});
});
You have to add attribute selected to the first option of all select box.
$("select option:first").attr('selected','selected');
See my fiddle
Hope it helps.
You don't need to use jquery. This can be done by JavaScript
document.getElementById("sel1").selectedIndex = 0;
Here is my JSFiddler demo for complete code.
This is jQuery way to achieve above
$("select").val("0");
Or to be more specific
$("#sel1 , #sel2").val("0");
how to connect two dropdown lists in html by putting conditions.
<p>Enter your source and destination.</p>
<p>From:</p>
<select name="from">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<p>To:</p>
<select name="To">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<form method="post" action="flights.html">
<input type="submit" value="search" />
</form>
when user enter source and destination and click on search button it will go on different page on all different entries in two dropdown lists.
First, your select dropdowns need to be INSIDE your form.
<form method="post" action="flights.html" >
<p>Enter your source and destination.</p>
<p>
From:</p>
<select name="from">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<p>
To:</p>
<select name="To">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<input type="submit" value="search" />
</form>
Second, on the action page, you can use PHP to process the form variables, then output conditional content based on them. Most likely the action should be flights.php, not flights.html
Is there a way to know which select tag submitted form?
<form method="POST" action="submit.php">
<select id="id1" name="sel1" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Non-jQuery solution is preferable, but not mandatory...
P.S. Problem is that selected="select" attribute is generated dynamically (i don't know which option would be selected as default - so i can't compare default with submitted)
The first thing that comes to mind is a hidden field with a value you set. Something like this should do.
<form method="POST" action="submit.php">
<input type="hidden" name="submitselect" value="" id="submitselect">
<select id="id1" name="sel1" onchange="document.getElementById('submitselect').value='sel1';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="document.getElementById('submitselect').value='sel2';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Alternatively, you could have a default option chosen, e.g.
<option value="" selected>-</option>
That would never otherwise be chosen. That way, this option would remain unset in the selects that didn't cause the submit.