How to send two parameters with Javascript function on a select option

Question

I made a Javascript function

function doReload(zone){  
document.location = 'proprete.php?zone=' + zone;  
}

that I use with a select option

<form action="proprete.php" method="post">  
<select id="zone" name="zone" onChange="doReload(this.value);"/> 
//code 
</form>

so whenever I change the selected option the page do a reload and send the value in the link.

I'm stuck as I wanted to send another parameter (dynamic) to the link as well but couldn't figure out how..

edit:

the other parameter comes from another form

<form action="proprete.php" method="post">
            <input type="week" name="week" id="week" class="inpBox"  style="height: 30px;width:200px;font-size: 15px;">
            <input type="submit" value="Basculer vers" name="basculer" style="height: 30px;width:150px;font-size: 15px;"/>
        </form>

Could you please help :)

and where would this other dynamic variable/parameter come from?? — Professor Abronsius
– Professor Abronsius, Commented Sep 29, 2018 at 11:13
perhaps if you include the other form elements and describe which you need to add to your doReload then an answer will be forthcoming... — Professor Abronsius
– Professor Abronsius, Commented Sep 29, 2018 at 11:16
sorry to say, but i read you just want to submit via post, with that value in js as well? — Dorvalla
– Dorvalla, Commented Sep 29, 2018 at 11:23
To make things clearer, I made a select option that allows the user to wonder between zones, and also a week input that helps him go back in time. but didn't make them in a single form.. let say he was in zone 3 and wanted to go back to week 30.. the page go back to week 30 but in zone 1 (default) — Youness
– Youness, Commented Sep 29, 2018 at 11:26

Professor Abronsius · Accepted Answer · 2018-09-30 07:47:05Z

Late I know but I had a little play around and created a more flexible solution which does not use inline event handlers and will accomodate more forms / elements if required with no further work... it might be of use for future reference maybe.

<form action='proprete.php' method='post'>
  <input type='number' name='number' id='number' class='inpBox' value=303 style='height: 30px;width:200px;font-size: 15px;'>
</form>

<form action='proprete.php' method='post'>
  <input type='text' name='username' id='username' class='inpBox' value='sergio' style='height: 30px;width:200px;font-size: 15px;'>
</form>


<form action='proprete.php' method='post'>
  <input type='time' name='time' id='time' class='inpBox' style='height: 30px;width:200px;font-size: 15px;'>
</form>

<form action='proprete.php' method='post'>
  <input type='week' name='week' id='week' class='inpBox' style='height: 30px;width:200px;font-size: 15px;'>
  <input type='submit' value='Basculer vers' name='basculer' style='height: 30px;width:150px;font-size: 15px;'/>
</form>

<form action='proprete.php' method='post'> 
  <select id='zone' name='zone'> 
    <option selected hidden='hidden' value=null>Select Zone
    <option>first
    <option>second
    <option>third
    <option>fourth
  </select>
</form>

<script>
    document.getElementById('zone').addEventListener( 'change', function(e){
        let tmp={};
        /* Find all forms that share the same action (though this query can easily be modifed) and the elements within */
        Array.prototype.slice.call( document.querySelectorAll( 'form[action="proprete.php"] > *:not([type="submit"])' ) ).forEach( function( e ){
            /* add name and value to temporary object */
            tmp[e.name]=e.value;
        });
        /* process the temp object to create a querystring */
        let href=Object.keys( tmp ).map(function( k ){
            return [ k, tmp[ k ] ].join('=');
        }).join('&');

        /* optional: change url but stay on same page ~ useful if using ajax perhaps */
        history.replaceState( tmp, null, '?' + href );

        alert( href )

        /* remove alert & uncomment below to redirect */
        //location.href=href;
    },false);
</script>

To facilitate a value where a field has been left blank one could alter the javascript like this.

document.getElementById('zone').addEventListener( 'change', function(e){
    let tmp={};
    /* a default value for empty fields */
    let def='unknown';

    /* Find all forms that share the same action (though this query can easily be modifed) and the elements within */
    Array.prototype.slice.call( document.querySelectorAll( 'form[action="proprete.php"] *:not([type="submit"])' ) ).forEach( function( e ){
        /* add name and value to temporary object, using default value for blank fields */
        if( typeof( e.name )!='undefined' ) tmp[e.name]=( e.value=='' ) ? def : e.value;

    });

    /* ...... etc as before */
},false);

one last thing please, if it's possible. How can I make the php get a default parameters if the user did not fill these forms.

enxaneta · Accepted Answer · 2018-09-29 11:33:05Z

0

I'm not very sure I understand your qyestion. I agree with @RamRaider "where would this other dynamic variable/parameter come from??" Once you have your parameters you may try to use a parameters object like this:

let parameters = {zone:"a", id:"12", else:"test"}
let urlString = "proprete.php?";
for (var key in parameters) {
    if (parameters.hasOwnProperty(key)) {
       urlString += "&"+key+"="+parameters[key];
    }
}

edited Sep 29, 2018 at 11:33

answered Sep 29, 2018 at 11:25

enxaneta

33.2k6 gold badges33 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to send two parameters with Javascript function on a select option

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related