JSFiddle - React, Tailwind, and code Playground

by jasenhk

HTML

<form action="#" method="post" onsubmit="rentalsubmit()">
    <label for="minbeds">Beds</label>
    <select name="minbeds" onchange="changeval(this.name, this.value)">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <label for="minbaths">Baths</label>
    <select name="minbaths" onchange="changeval(this.name, this.value)">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <button>Submit</button>
</form>

JavaScript

var minp = 0;
var maxp = 99999;
var minbeds = 0;
var minbaths = 0
var island = 3;

function rentalsubmit(){
    return false;
   
    console.log("submit", minbeds, minbaths);
	var urlstr = 'http://alohaliving.com/Rentals/Search#?TP=M$SF&Q=|ListingStatus$A,P|ListPrice$'+minp+'_'+maxp+'|Island$'+island+'&SF=SD$0|Bedrooms$'+minbeds+'_0&SF=SD$0|Bathrooms$'+minbaths+'_0&SF=SD$0';

    return false;
}
function changeval(field,value){
	if(field=='island')island=value;
	else if(field=='minprice')minp=value;
    else if(field=='maxprice')maxp=value;
	else if(field=='minbeds')minbeds=value;
	else if(field=='maxbeds')maxbeds=value;
    else if(field=="minbaths")minbaths=value;
    console.log("minbeds", minbeds);
    console.log("minbaths", minbaths);
}