CODEWITHSUNDEEP
javascript
Procomp Pcm
Procomp Pcm

Reputation: 29

Create a link based on values from a Html form and redirect them to it

What I'm trying to do is to redirect people to a link depending of what they have summited on the form (the link is built using the values from the form fields)

This is the Form:

<form id="form">
<div class="formbox">
    <div class="radio-toolbar">
    <input type="radio" id="iconapp1" name="department" value="1250"/>
        <label for="iconapp1">PP</label><br>
    <input type="radio" id="iconapp2" name="department" value="944"/>
        <label for="iconapp2">EP</label><br>
</div>

<div class="radio-bar1">
    <input type="radio" id="enginemake1" name="enginemake" value="6"/>
        <label for="enginemake1">&nbsp;&nbsp;Chevrolet</label><br>
    <input type="radio" id="enginemake2" name="enginemake" value="8"/>
        <label for="enginemake2">&nbsp;&nbsp;Chrysler</label><br>
</div>

<div class="bodyvertdivision1"></div>
    <div class="radio-bar3">
        <select name="powerrange">
            <option id="powerrange1" value="28">100</option>
            <option id="powerrange2" value="128">200</option>
            <option id="powerrange3" value="228" selected>300</option>
        </select>
    </div>

    <div class="bodyvertdivision1"></div>

    <div class="radio-bar4">
        <input type="radio" id="location1" name="location" value="store"/>
            <label for="location1">&nbsp;&nbsp;America (NT - ST)</label><br>
        <input type="radio" id="location2" name="location" value="store.au"/>
            <label for="location2">&nbsp;&nbsp;Australia and Oceania</label><br>
    </div>

    <div class="radio-bar2">
        <input  onclick="goToPage();"  type="button" class="buttonmyapp" value="Submit" />
    </div>
</div>   
</form>

The link I'm trying to build using the values selected will look like this:

http://{location}.mydomain.com/product-catalog.aspx?section=-{department}-{enginemake}-{powerrange}-

Each bracketed section needs to be replaced by the value of the select with the corresponding name.

Upvotes: 1

Views: 1206

Answers (3)

power_scriptor
power_scriptor

Reputation: 3304

First include the jquery library link or download js and link

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">
function goToPage(){
    var location = $('input[name=location]:checked').val();
    var department = $('input[name=department]:checked').val();
    var enginemake = $('input[name=enginemake]:checked').val();
    var powerrange = $('select[name=powerrange]').val();
    window.location.href = "http://"+location+".mydomain.com/product-catalog.aspx?section=-"+department+"-"+enginemake+"-"+powerrange+"-";
}
</script>

Upvotes: 1

Voonic
Voonic

Reputation: 4775

you can try this

HTML 

<select id="powerrange" name="powerrange">

JAVASCRIPT

function goToPage()
{
     var location;
     var department;
     var enginemake;
     var powerrange;
     pName = document.getElementById('powerrange');
     powerrange = pName.options[pName.selectedIndex].value;
     var form = document.getElementById('form');
     var ele = form.getElementsByTagName('input');
     for(var i=0;i<ele.length;i++)
     {
          if(ele[i].getAttribute('type')=='checkbox')
          {
                 if(ele[i].getAttribute('name')=='department')
                 {
                       if(ele[i].checked)
                       department = ele[i].value;
                 }
                 else if(ele[i].getAttribute('name')=='enginemake')
                 {
                       if(ele[i].checked)
                       enginemake = ele[i].value;
                 }
                 else if(ele[i].getAttribute('name')=='location')
                 {
                       if(ele[i].checked)
                       location = ele[i].value;
                 }
                 else;
          }
     }

     var url = "http://"+ location+".mydomain.com/product-catalog.aspx?section=-"+department+"-"+enginemake+"-"+powerrange+"-";

     form.setAttribute('action',url);
     form.submit();
}

Upvotes: 0

Patrick Eaton
Patrick Eaton

Reputation: 716

After the goToPage function on the submit button validates the response change the src attribute of the form should work fine.

So in jQuery it should look something like 

var location = $('input[name=location]:checked', '.radio-bar4').val();

var dept = $('input[name=location]:checked', '.radio-bar4').val();

var engine = $('input[name=enginemake]:checked', '.radio-bar1').val();

var power = $('powerrange').val() ;

var domain = "http://"+ location+".mydomain.com/product-catalog.aspx?section=-"+dept+"-"+engine+"-"+power+"-";

$("#form").attr("action", domain);

Upvotes: 0

Related Questions