Form action incorrect when set with Javascript - javascript

I have a form on a page with two inputs. On submission, I would like the page redirected to a link that contains the values of the two inputs, plus a preceding string. The html is the following:
<form name="searchForm">
<label for="property_type">Property Type</label>
<select name="property_type" id="property_type_number">
<option value>- All Property Types -</option>
<option value="1432">Commercial</option>
<option value="1433">Land</option>
<option value="1434">MultiFamily</option>
<option value="1435">Rental</option>
<option value="1436">Residential</option>
<option value="1988">Residential / Condo</option>
<option value="1987">Residential / Single Family</option>
</select>
<label for="city">City</label>
<select name="city" id="city_number">
<option value>- All Property Types -</option>
<option value>--</option>
<option value="cambridge">Cambridge</option>
<option value="zanesville">Zanesville</option>
</select>
<input type="submit" value="Search for Properties" onclick="searchform()">
</form>
And the Javascript is the following:
function searchform()
{
var propertyType = document.getElementById("property_type_number").value;
var city = document.getElementById("city_number").value;
target = "/idx/?" + city + propertyType + "hi";
document.searchForm.action = target;
}
When I submit the form, it seems to only use the first string of the target variable ("/idx/?") but ignore the rest. It then inserts the values from the form automatically. I would like it to go to a custom target such as the one above.
If you want to see it on the web, the address is: http://lainegabriel.net/ (it is the last widget on the left).

Well, I can't explain why the form behaves as such, or why it doesn't work, since it would appear that every bit of information online says to do exactly what you're doing.. I can however, provide a work-around:
Firstly, change your html to this, deleting the 'onclick' from the submit button, and replacing the form tag:
<form name="searchForm" onsubmit="return searchform();">
Secondly, in your searchform() function:
function searchform() {
var propertyType = document.getElementById("property_type_number").value;
var city = document.getElementById("city_number").value;
target = "/idx/?" + city + propertyType + "hi";
document.searchForm.action = target; // I just left this in here just in case you wanted it.
window.location.href = target; // redirect the window to the new url/action
return false; // prevent the default submit action from occurring
}
Demo

change this:
var propertyType = document.getElementById("property_type_number").value;
var city = document.getElementById("city_number").value;
with this:
var select = document.getElementById("property_type_number");
var propertyType = select.options[ select.selectedIndex ].value;
select = document.getElementById("city_number");
var city= select.options[ select.selectedIndex ].value;
Any difference?
i know its bigger in code but i never had problems with that (before i switched to jquery and forget all these kind of problems..)

Related

Javascript Div onchange Grab Values from Two Select Boxes

I'm trying to make it so when a select box within a div changes, it will grab values from both that select box and one other one that I've yet to add, but I don't know how to go about it.
I currently have this code
<select id='selMag' onchange='getSelMag(this)'>
<option value='0.0>Select Minimum Magnitude</option>
<option value='1.0'>1.0</option>
<option value='2.0'>2.0</option>
<option value='3.0'>3.0</option>
<option value='4.0'>4.0</option>
<option value='5.0'>5.0</option>
<option value='6.0'>6.0</option>
<option value='7.0'>7.0</option>
<option value='8.0'>8.0</option>
<option value='9.0'>9.0</option>
<option value='10.0'>10.0</option>
</select>
function getSelMag(sel) {
value = Number(sel.value);
console.log(window.value);
}
This, as it is right now, works fine from grabbing it from the , but I would like to add another one and put them inside a container div, and make it so when either one changes it will grab the values from both of them, add both strings together, and convert them into a number. I plan to make it so the select box above will not have the decimal values and just be 1, 2, etc. and have the second box be .1, .2, etc. so when they are added together, it will show 1.1, 1.2, etc.
Presumably, the select is in a form. To be successful, form controls must have a name, so:
<select id='selMag' name='selMag' onchange='getSelMag(this)'>
Adding a name nearly always obviates the requirement for an ID. If the other select also has a name:
<select name='selMag2'>
and it belongs to the same form as the first, you can reference it from the getSelMag function via the form:
function getSelMag(sel) {
// Always declare variables
var value = Number(sel.value);
// Access them from the appropriate scope
console.log(value);
// Reference the other select using named properties of the form
var otherSelect = sel.form.selMag2;
// Do stuff with it
var otherValue = otherSelect.value;
}
Note that all form controls have a form property that references their parent form, and that the controls belonging to a form can be accessed via the form's elements collection.
Those with names (and in some browsers those with IDs) can be accessed as named properties of the form and of the elements collection, and also by index in the collection.
It seems that you want to concatenate the values with a period between, so the function might look like:
function getSelMag(sel) {
var value0 = sel.form.selMag.value;
var value1 = sel.form.selMag2.value;
console.log(value0 + '.' + value1);
}
and the HTML:
<form>
<select name="selMag" onchange="getSelMag(this);">
<option value="0" selected>0
<option value="1">1
<option value="2">2
</select>
<select name="selMag2" onchange="getSelMag(this);">
<option value="0" selected>0
<option value="1">1
<option value="2">2
</select>
</form>
Use the answer from this link to get the value of other select box in getSelMag() function
Get selected value in dropdown list using JavaScript?
as follows:
function getSelMag(sel) {
value = Number(sel.value);
console.log(window.value);
var e = document.getElementById("selMag2");
var option2 = e.options[e.selectedIndex].text;
//do whatever u want
}
You can make another function say x() that will be called for other select box you make and access the value of first select box from that
<select id='selMag2' onchange='x(this)'>
as
function getSelMag2(sel) {
value = Number(sel.value);
console.log(window.value);
var e = document.getElementById("selMag");
var option1 = e.options[e.selectedIndex].text;
//do whatever u want
}
Hope this helps

set default value to more than 1 product ID using javascript

I have set default value to an input box and set it to readonly.
I also disable some select options.
It is working but when I add another ID for another product, only 1 ID works.
Please note that I don't have access to the actual html pages. I can only access the js file.
What I need is:
if I go to product 1 OR product 2, I will see the text box is set to 28 in readonly and the Weeks/Months disabled.
Below is my sample HTMLs.
The HTMLs below are two different HTML pages.
HTML for product 1
<p>Deliver products every <input type="text" id="thisInput_prod1"></p>
<select id="thisSelect_prod1">
<option value="Days" selected>Days</option>
<option value="Weeks">Weeks</option>
<option value="Month">Month</option>
</select>
HTML for product 2
<p>Deliver products every <input type="text" id="thisInput_prod2"></p>
<select id="thisSelect_prod2">
<option value="Days" selected>Days</option>
<option value="Weeks">Weeks</option>
<option value="Month">Month</option>
</select>
This is the .js file
window.onload = SetDefaultValue;
function SetDefaultValue() {
document.getElementById('thisInput_prod1').setAttribute('value','28');
document.getElementById('thisInput_prod1').readOnly = true;
var x = document.getElementById('thisSelect_prod1');
x.options[1].disabled=true;
x.options[2].disabled=true;
//below is to set the other product - I disable because its not working
//document.getElementById('thisInput_prod2').setAttribute('value','28');
//document.getElementById('thisInput_prod2').readOnly = true;
//var y = document.getElementById('thisSelect_prod2');
//y.options[1].disabled=true;
//y.options[2].disabled=true;
}
When there's no thisInput_prod2 element, document.getElementById('thisInput_prod2') will evaluate to null, and then the code will abort trying to call .setAttribute on that null. You should assign it to a variable and test it to see if it's === null before dereferencing it.
Here is your working example : Fiddle
document.getElementById('thisInput_prod1').value = '28';
document.getElementById('thisInput_prod1').readOnly = true;
var x = document.getElementById('thisSelect_prod1');
x.options[1].disabled = true;
x.options[2].disabled = true;
document.getElementById('thisInput_prod2').readOnly = true;
var y = document.getElementById('thisSelect_prod2');
y.options[1].disabled=true;
y.options[2].disabled=true;

How to set action value in form depending on the value of select?

How to set action value in form depending on the value of select?
<form action="/my-url/{{design.id}}" method="get">
<select name="producttype">
<option value="lite">Select one of option</option>
<option value="a">Option a</option>
<option value="b">Option b</option>
<option value="c">Option c</option>
</select>
</form>
How to create something like this:
If select option have value a my form action will be: <form action="/my-url/{{design.id}}/a" method="get">
If select option have value b my form action will be: <form action="/my-url/{{design.id}}/b" method="get">
this should work:
$("select[name='producttype']").change(function(){
var form = $("form");
var action = "/my-url/{{design.id}}/" + $(this).val();
form.attr("action", action);
});
Couple of things to note:
If you have multiple forms on the page, then you need a more accurate way of selecting the correct form - perhaps an id attribute
What is {{design.id}}? Is this meant to be generated dynamically?
A solution to Note 2 could be to include the base URL as a data-* attribute, something like this:
<form action="/my-url/{{design.id}}" data-baseurl="/my-url/{{design.id}}/" method="get">
and then change the above javascript to be like this:
var action = form.data("baseurl") + $(this).val();
Here is a working example
Try
$('select[name="producttype"]').change(function(){
var $this = $(this);
$this.closest('form').attr('action', '/my-url/' + $this.val())
})
You can try:
var producttype = document.getElementsByName("producttype")[0];
producttype.onchange = function() {
var form = document.getElementsByTagName("form")[0];
form.action = "/my-url/{{design.id}}/" + this.value;
}

How can I assign a value to an attribute of a form after the submit button is pressed

I am trying to change the value of a form based on the user selecting null
<form name="myForm" action="formProcess.php" method='post' onSubmit="return validateForm()">
<label for="venue">Venue:</label>
<select name="venue">
<option value="null">Please choose</option>
<option value="Wynyard Hall">Wynyard Hall</option>
<option value="Home">Home</option>
<option value="Hallgarth">Hallgarth</option>
<option value="Other">Other</option>
</select>
Here is the function
function validateForm() {
var d=document.forms["myForm"]["venue"].value;
if (d=="null") {
Here is what I want to do.I want to change the value of venue to the users prompt. Something along the lines of:
var newVenue = prompt("Tell us your venue");
venue = newVenue;
I know this is wrong but this is my goal. I have used this code I found on here.
$('#myForm').submit(function() {
var txt = $('#venue');
txt.val([newVenue]);
});
}
That code is looking for a DOM element with an id "venue". Just change it to look for an element with a name attribute = to "venue".
$('input[value="Hot Fuzz"]')
$('#myForm').submit(function() {
var txt = $('select[name="venue"]');
txt.val(//Your new value );
});
Please check the jQuery documentation.

Select box to change url

I want to use a select to change the query on the end of a url to change it's sort options. e.g:
<select id="sort">
<option value="?order_by=date">Recent</option>
<option value="?order_by=random">Popular</option>
<option value="?order_by=random">Random</option>
<option value="">Staff Picks</option>
</select>
so for example by default a list of posts will be shown by date and then if a user chooses an option it will reload the page with the query string on the end of the URL. If possible looking to use jQuery to achieve this. Thanks.
Attach a handler to the change event for the select box that adds the value of the selected option to the current window location with everything after the ? snipped off:
$('#sort').change(function(e){
var locAppend = $(this).find('option:selected').val(),
locSnip = window.location.href.split('?')[0];
window.location.href = locSnip + locAppend;
});
Here's an example ࢐ (it doesn't redirect, but you get the idea...)
To have the appropriate value selected on page load, you can run the following function before you bind the change handler:
function selectCurSort() {
var match = window.location.href.split('?')[1];
$('#sort').find('option[value$="'+match+'"]').attr('selected',true);
}
selectCurSort();
I'm not quite sure why you aren't just using something like:
<form method="GET">
<input type="hidden" name="query" value="..." />
<select id="sort" name="order_by">
<option value="date">Recent</option>
<option value="popular">Popular</option>
<option value="random">Random</option>
<option value="staff">Staff Picks</option>
</select>
<input type="submit" value="Sort" />
</form>
And, for the JS, if any, just:
$('#sort').change(function() {
$(this).parents('form').submit();
});
Then, you don't require anyone to have JavaScript enabled.
Like this?
$("#sort").change(function(){
window.location = $(this).find("option:selected").val();
});
Add
onchange="if (this.value && /^\?/.test(this.value)) location = location.path + this.value"
to your <select>.
You might want to put a blank option at the top too.
$(function() {
$("#sort").change(function() {
var myVal = $(this).val();
window.location = "www.mywebsite.com/"+ myVal;
});
var qs = window.location.pathname;
$("#sort option").each(function() {
if(qs.contains($(this).val()))
$(this).addAttr("selected","selected");
});
});
Try that.

Categories

Resources