asked on

HTML Javascript to change action

I have the code below and what I am trying to accomplish is the field tType has a dropdown with company1 and company2

if company1 is selected Action="https://sharepointex3.dcs-xxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail.aspx"
if company2 is selected Action="https://sharepointex3.dcs-xxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail2.aspx"

<form id="form1" Action="https://sharepointex3.dcs-xxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail.aspx" method="GET">
<span class="style1"><strong>Opportunity Search Tool</strong></span><br />
&nbsp;<table style="width: 100%">
<tr>
<td style="width: 20%" class="style1">Enter the opportunity ID:</td>
<td><span class="style2"><span class="style3">
<input name="tOppID" id="tOppID" type="text" value="OPP-" style="width: 147px" /></span></span>&nbsp;</td>
</tr>
<tr>
<tr>
<td style="width: 20%" class="style1">Enter the opportunity ID:</td>
<td><span class="style2"><span class="style3">
<input name="tType" id="tType" type="text" style="width: 147px" /></span></span>&nbsp;</td>
</tr>
<tr>
<td style="width: 20%" class="style1">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td style="width: 20%" class="style1">
<input type="submit" value="submit" />
</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
</form>

Open in new window

Chris Stanyon

Technically, you could store the URL in the dropdown as a data attribute and then retrieve it with a change event:

<select name="tType">
    <option value="company1" data-url="url/for/company/1">Company 1</option>
    <option value="company2" data-url="url/for/company/2">Company 2</option>
</select>

Open in new window

If you're using jQuery

$('[name=tType]').change(function() {
    var url = $("option:selected", this).data('url');
    $(this).parents('form').attr( 'action', url );
});

Open in new window

Matt Pinkston

ASKER

will either of these work as provided?

Chris Stanyon

What do you mean?

You said in your opening question that you had a dropdown with a name of tType. The code you've shown doesn't have the dropdown, so you'd need to implement that. You'd then need to implement the change handler to set the forms action property as I've shown. Make sure you have the jQuery library loaded, and then just edit the URL data that's stored in each <option>

You need both - a dropdown in your form containing the relevant data attributes, and the change handler.

Matt Pinkston

ASKER

Here is the existing code for the select form (first form)

<form id="form1" Action="https://sharepointex3.dcs-xxxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail.aspx" method="GET">
<span class="style1"><strong>Gold Source Opportunity Search Tool</strong></span><br />
&nbsp;<table style="width: 100%">
<tr>
<td style="width: 20%" class="style1">Enter the opportunity ID:</td>
<td><span class="style2"><span class="style3">
<input name="tOppID" id="tOppID" type="text" style="width: 147px" /></span></span>&nbsp;</td>
</tr>
<tr>
<td style="width: 20%" class="style1">Legal Entity:</td>
<td><select name="tType">
<option>USPSector</option>
<option>Vencore</option>
</select></td>
</tr>
<tr>
<td style="width: 20%" class="style1">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td style="width: 20%" class="style1">
<input type="submit" value="submit" />
</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
</form>

Open in new window

Chris Stanyon

OK. Now add the data attribute to your <option> elements (you'll probably want to give them a value as well if you want anything submitting to your script):

<select name="tType">
    <option value="USPSector" data-url="https://sharepointex3.dcs-xxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail.aspx">USPSector</option>
    <option value="Vencore" data-url="https://sharepointex3.dcs-xxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail2.aspx">Vencore</option>
</select>

Open in new window

And now in the <head> of your document, make sure you have the jQuery library included, and add the relevant change event handler:

<head>
    ...
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>
    $(function() {
        $('[name=tType]').change(function() {
            var url = $("option:selected", this).data('url');
            $(this).parents('form').prop( 'action', url );
        });
    });
    </script>    
</head>

Open in new window

Now when you change the dropdown, the URL from the data atrribute will be pushed into the action property of the form.

Matt Pinkston

ASKER

What do I change the action to on the form statement?

Thanks

Chris Stanyon

Whatever you want it to be if the user doesn't select an option from the dropdown. Generally this will be exactly the same as the URL for the first <option> in your dropdown, which it currently is, so you problaby don't need to change it.

Matt Pinkston

ASKER

hmmm then it appears the code is not working because it never pushes the url

Chris Stanyon

Post up the full code of your page and I'll take a look.

Matt Pinkston

ASKER

Here it is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
}
.style3 {
font-size: 12px;
}
.ms-input {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.ms-long {
width:500px !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
 
}
.ms-rtestate-write {
    cursor: text;
    font-family: arial;
    font-size: 11px;
    min-height: 1em;
}
.ms-formlabel {
    cursor: text;
    font-family: arial;
    font-size: 11px;
}
.ms-RadioText {
    cursor: text;
    font-family: arial;
    font-size: 11px;
}
.ms-FormLabel {
    cursor: text;
    font-family: arial;
    font-size: 11px;
}
select {
    font-family: arial;
    font-size: 11px;
}
select option {
    font-family: arial;
    font-size: 11px;
}

</style>
<script src="https://sharepointex3.dcs-xxxx.com/sites/GSSTA/TA/LOAD/Lists/GovOppurtunities/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
    $(function() {
        $('[name=tType]').change(function() {
            var url = $("option:selected", this).data('url');
            $(this).parents('form').prop( 'action', url );
        });
    });
</script>  

</head>

<body>

<form id="form1" Action="https://sharepointex3.dcs-xxxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail.aspx" method="GET">
<span class="style1"><strong>Gold Source Opportunity Search Tool</strong></span><br />
&nbsp;<table style="width: 100%">
<tr>
<td style="width: 20%" class="style1">Enter the opportunity ID:</td>
<td><span class="style2"><span class="style3">
<input name="tOppID" id="tOppID" type="text" style="width: 147px" /></span></span>&nbsp;</td>
</tr>
<tr>
<td style="width: 20%" class="style1">Legal Entity:</td>
<td><select name="tType">
<option value="USPSector" data-url="https://sharepointex3.dcs-xxxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail.aspx">USPSector</option>
<option value="Vencore" data-url="https://sharepointex3.dcs-xxxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail2.aspx">Vencore</option>
</select></td>
</tr>
<tr>
<td style="width: 20%" class="style1">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td style="width: 20%" class="style1">
<input type="submit" value="submit" />
</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
</form>

</body>

</html>

Open in new window

Chris Stanyon

Are you absolutely sure that you've actually downloaded the jQuery to that location.

In my code, I linked to the jQuery library from their CDN. You've now changed that to your own server, so I'm guessing you've downloaded the correct version and put it in the correct place. Personally, I'd suggest you stick to the CDN

Matt Pinkston

ASKER

yes that js for jquery is in the same folder.

what is their library? Did it work for you?

Matt Pinkston

ASKER

when I run it the second page comes up and if I do a properties I get the following:

https://sharepointex3.dcs-xxxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail.aspx?tOppID=test&tType=Vencore

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Matt Pinkston

ASKER

what is the actual CDN?

Matt Pinkston

ASKER

SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Matt Pinkston

ASKER

change it to your link and getting exact same result, does not appear to be a solution that will work.

Chris Stanyon

Trust me - the code works!

You can see a demo of it here - https://jsfiddle.net/ChrisStanyon/04Lxrz72/

Click the Check Action button and you'll see the URL that the form action is set to. Change the dropdown and click it again. You'll see it's change it.

How are you serving up your page. I'm assuming you're using a web server, and not just opening the page in your browser. Try in a different browser just to rule that out. have you updated your HTML to be a valid HTML5 document?

There's clearly something else going on with your page that I'm not seeing. The code examples are pretty basic stuff so should just work as-is.

Matt Pinkston

ASKER

sorry dont know what to say I have tried IE and Chrome, same results. Not sure how to change to HTML5.

I have provided exact code, page loads fine just does not change URL

Matt Pinkston

ASKER

it does however get this in IE
Line: 2
Error: Unable to get property 'createElement' of undefined or null reference

Matt Pinkston

ASKER

I updated to exactly what you had on your link and still never changes the inital URL... Is there another method?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
}
.style3 {
font-size: 12px;
}
.ms-input {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.ms-long {
width:500px !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
 
}
.ms-rtestate-write {
    cursor: text;
    font-family: arial;
    font-size: 11px;
    min-height: 1em;
}
.ms-formlabel {
    cursor: text;
    font-family: arial;
    font-size: 11px;
}
.ms-RadioText {
    cursor: text;
    font-family: arial;
    font-size: 11px;
}
.ms-FormLabel {
    cursor: text;
    font-family: arial;
    font-size: 11px;
}
select {
    font-family: arial;
    font-size: 11px;
}
select option {
    font-family: arial;
    font-size: 11px;
}

</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
$('[name=tType]').change(function() {

               var url = $("option:selected", this).data('url');

               $(this).parents('form').prop( 'action', url );

});

 

$('#checkAction').click(function(e) {

               e.preventDefault();

  $('#response').html( $('#form1').prop('action'));  

});</script>  

</head>

<body>

<form id="form1" Action="https://sharepointex3.dcs-xxxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail.aspx">
<span class="style1"><strong>Gold Source Opportunity Search Tool</strong></span><br />
&nbsp;<table style="width: 100%">
<tr>
<td style="width: 20%" class="style1">Enter the opportunity ID:</td>
<td><span class="style2"><span class="style3">
<input name="tOppID" id="tOppID" type="text" style="width: 147px" /></span></span>&nbsp;</td>
</tr>
<tr>
<td style="width: 20%" class="style1">Legal Entity:</td>
<td><select name="tType">
<option value="USPSector" data-url="https://sharepointex3.dcs-xxxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail.aspx">USPSector</option>
<option value="Vencore" data-url="https://sharepointex3.dcs-xxxx.com/sites/GSSTA/TA/LOAD/Lists/Opportunities/OppDetail2.aspx">Vencore</option>
</select></td>
</tr>
<tr>
<td style="width: 20%" class="style1">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td style="width: 20%" class="style1">
<input type="submit" value="submit" />
</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
</form>

</body>

</html>

Open in new window

Chris Stanyon

Right. Let's start with some basic, valid HTML5 and go from there.

Create a page with exactly the following in it. Run it in your browser, and change the dropdown.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test Page</title>

        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script>
        $(function() {
            $('#tType').change(function() {
                alert( $(this).val() );
            })
        });
        </script>    
   </head>
    <body>

        <form>
            <select id="tType">
                <option>Please Select...</option>
                <option value="value1" data-url="val1">Value 1</option>
                <option value="value2" data-url="val2">Value 2</option>
            </select>
        </form>

    </body>
</html>

Open in new window

Let me know what you get.

Matt Pinkston

ASKER

just provides a page with a dropdown

Matt Pinkston

ASKER

Okay I give up....

This does now work and I went as vanilla as possible... does anyone have a simple solution please....

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test Page</title>
 
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script>
        $(function() {
            $('#tType').change(function() {
                alert( $(this).val() );
            })
        });
        </script>   
   </head>
    <body>
 
<form id="form1" action="val1">
        
 <table style="width: 100%">
<tr>
<td style="width: 20%" class="style1">Enter the opportunity ID:</td>
<td><span class="style2"><span class="style3">
<input name="tOppID" id="tOppID" type="text" style="width: 147px" /></span></span>&nbsp;</td>
</tr>
<tr>
<td style="width: 20%" class="style1">Legal Entity:</td>
<td>       
        
            <select id="tType">
                <option>Please Select...</option>
                <option value="value1" data-url="val1">Value 1</option>
                <option value="value2" data-url="val2">Value 2</option>
            </select>
</td>
</tr>
            
            
<tr>
<td style="width: 20%" class="style1">
<input type="submit" value="submit" />
</td>
<td>&nbsp;</td>
</tr>
            
                       
</table>
           
</form>
 
</body>
</html>

Open in new window

Chris Stanyon

OK. So it's working so far.

Change the alert to get the data url instead of the value:

alert( $("option:selected", this).data('url') );

Now it should alert either val1 or val2 when you change the dropdown. Confirm that's working and we can move on.

Matt Pinkston

ASKER

no change it does not do anything because all there is is a dropdown, no submit button

Chris Stanyon

We're not particularly worries about the submit button. We've bound the change event of the dropdown to the alert, so it will fire when we change, not when we submit. You said in your previous comment that it was working so you must of had the alert popup before. All we've done here is to change what's being alerted.

Matt Pinkston

ASKER

no alert has popped up

Chris Stanyon

OK. I'm confused. From your previous comment.

This does now work...

Matt Pinkston

ASKER

not sorry

Chris Stanyon

Ahhh !

There is absolutely nothing wrong with the code, so I can only assume there is something not right with your environment. When you created the simple HTML5 page that I posted earlier (before adding in all your other stuff), what messages did you get in the console? What happened when you selected a new option from the dropdown?

It really doesn't get any simpler than this - it's 3 lines of code !!

The errors that you posted earlier indicate that you may be using IE. For the time being, don't use that.Use a different browser, such as Firefox or Chrome.

Do you have a link to this page that I can take a live look at.