I have an input select that sets a state "selectedStateId", an amp-autocomplete that sets "selectedCity", and finally an input text as a search bar that sets "inputTerms".
With these I make a URL like: https://example.com/find?city_id=selectedCity&terms=inputTerms
The thing is, I needed some validations to occur in cascade so I created an amp-script
<amp-script script="searchValidationScript" data-ampdevmode target="amp-script">
<button type='button' class="button button-primary" id="header-search-button">
<amp-img
alt="magnifying-glass"
src="{{ url_for('static', filename='img/icons/magnifying-glass.svg') }}"
height="20"
width="21"
></amp-img>
</button>
</amp-script>
<script id="searchValidationScript" type='text/plain' target="amp-script">
const searchBtn = document.getElementById('header-search-button');
const btnSend = document.getElementById('btn-send');
const lightbox = document.getElementById('lightbox-input-states');
async function validateAndRedirect() {
const currentCityId = await AMP.getState('currentCityId');
const currentStateId = await AMP.getState('currentStateId');
const inputTerms = await AMP.getState('inputTerms');
if ( !inputTerms || inputTerms?.length < 2 ) return
if ( !currentCityId || !currentStateId ) return AMP.setState({showLightbox: true})
const urlX = `/{{ current_country.permalink }}/find?city_id=${currentCityId}&terms=${inputTerms}`
AMP.setState({url: urlX})
}
searchBtn.addEventListener('click', validateAndRedirect);
</script>When I click on the search button I want to redirect to the url that I've created.
I've tried in the amp-script to do an AMP.navigateTo(url=myUrl), also with an <a [href]='myUrl' hidden> and then in the amp-script aTag.click(), the same with a form tag and many examples more but I couldn't get anything to work.
Which could be a way to solve this?
