Wie werden Formularwerte an eine URL gesendet, die aus Eingabewerten von FORM erstellt wurde?

Question

Ich habe ein Formular, das verschiedene Elemente hat, die ich zurück auf die Seite senden muss. Eines der select-Elemente zeigt jedoch Produktmodelle an, und ich möchte, dass dieses Element Teil der URL wird, an die das Formular übermittelt wird.

<form action="" onSubmit="window.location.href=this.ProductModel.options[this.ProductModel.selectedIndex].value; return false;" enctype="multipart/form-data" method="post"> 

<select name="Country" id="Country"> 
<option value="USA">USA</option> 
<option value="UK">UK</option> 
<option value="India">India</option> 
</select> 

<select name="ProductModel" id="ProductModel"> 
<option value="/gaming/ps4">Playstation 4</option> 
<option value="/gaming/xboxone">Xbox One</option> 
<option value="/gaming/3ds">Nintendo 3DS</option> 
</select> 

</form> 

Also, wenn ein Benutzer die Playstation 4 zum Beispiel wählen war, möchte ich die Form und http://myrootpage.com/gaming/ps4 auf die URL gehen zu unterbreiten.

Ich kann es an die URL zu gehen bekommen http://myrootpage.com/gaming/ps4 den Javascript-Code in das Attribut Form onSubmit verwenden, aber weil ich return false haben für sie keine der Formularfeldwerte zu arbeiten, machen es durch.

Wie könnte das gelöst werden?

Answer 1

Sie die Aktion des Formulars ändern können auf der Grundlage der ausgewählten Aktion und dann Post an diesen Endpunkt.

Alternativ können Sie das Action-Gaming durchführen und die GET-Methode verwenden, um die Formularfelder als URL-Parameter anzugeben.

<form action="gaming" enctype="multipart/form-data" method="get"> 

    <select name="Country" id="Country"> 
    <option value="USA">USA</option> 
    <option value="UK">UK</option> 
    <option value="India">India</option> 
    </select> 

    <select name="ProductModel" id="ProductModel"> 
    <option value="ps4">Playstation 4</option> 
    <option value="xboxone">Xbox One</option> 
    <option value="3ds">Nintendo 3DS</option> 
    </select> 

</form> 

Dies würde die Urls wie folgt aussehen:

http://myrootpage.com/gaming?ProductModel=ps4&Country=USA 

Answer 2

Ich schlage vor, diese jquery die Wirkung von Form auf select-Änderung zu ändern und lassen Benutzer das Formular in normaler Art und Weise einreichen:

$(document).ready(function(){ 
    $("#Country").on('change', function(){ 
    var taregetURL=$(this).val(); 
    $("#YourformId").attr("action", targetURL); 
    // And if you want to submit the form immediately: 
    // $("#YourformId").submit(); 
    }) 
})