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
Related
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.
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().
I have a form with elements like:
<div class="row1">
<select name="someSelectField" multiple="multiple" class="selectList">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" name="checkboxField" class="checkboxField" value="1" /> checkbox</td>
</div>
<div class="row2">
<select name="someSelectField" multiple="multiple" class="selectList">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" name="checkboxField" class="checkboxField" value="1" /> checkbox</td>
</div>
These will continue down the page. With lots of different rows of these same fields. There is no set rows as javascript is used to create more rows.
My question is, what should the value of each name attribute be, so that it stays grouped as arrays and can be referenced together? For example, if I use someSelectField[1], when the method is GET, the form sends it like someSelectField[1]=1&someSelectfield[1]=2 (if both are selected). I am looking for it to be someSelectField=1&someSelectfield=2, etc.
Any help would be appreciated. Thanks.
Why don't you just give the controls unique names? If your javascript is capable of giving the divs indexed class names, you could just restructure the html as so:
<div class="row1">
<select name="someSelectField1" multiple="multiple" class="selectList">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" name="checkboxField1" class="checkboxField" value="1" /> checkbox</td>
</div>
<div class="row2">
<select name="someSelectField2" multiple="multiple" class="selectList">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" name="checkboxField2" class="checkboxField" value="1" /> checkbox</td>
</div>
This has the benefit of being server independent too since some frameworks parse html arrays really well and give you a proper array, and some just overwrite keys.
Your parsing might get a little messy on the back-end if you're allowed to remove elements from the middle instead of just from the end but it shouldn't be too bad. And if that is a concern you could write a simple jQuery script that would line all your names up again. Warning, untested code follows:
$("div[class^='row']").each(function(idx, value) {
var $value = $(value);
$value.find(".selectList").attr("name", "someSelectField"+(idx+1));
$value.find(".checkboxField").attr("name", "checkboxField"+(idx+1));
});
I have a form as follows:
<form name="donation_form" action="" method="post" target="_self">
<select name="donationType" onChange="window.location='?page=donate&donationType='+donation_form.donationType.value;">
<option>--Select--</option>
<option value="a" selected="selected">a</option>
<option value="b" >b</option>
<option value="c" >c</option>
</select>
<input type="text" name="amount" />
<select name="giftAid" onChange="window.location='?page='+donate+'&donationType='+a+'&amount='+donation_form.amount.value+'&giftAid='+donation_form.giftAid.value;">
<option>--Select--</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
</select>
<input name="submit2" type="submit" value="Make a Donation" />
</form>
Now when I select the second select and it refreshes the page, how do I retain the value of the amount text box that a user has enetered as well as the two selects?
Thanks in Advance
You should accept answers for your older questions.
You'll need to pass the values of the other controls to the server as querystring parameters, then set the selected values of the options in server-side code (or Javascript) from the querystring.
What are you trying to do?