diffrent default and selected value in html select

Question

I need different default and selected value for HTML <select> tag. It means that I need my <form> load with a selected <option>, then after pressing <button type="reset"> button another option set to select tag, but how?

<select size="1" name="select1" >
    <option  value='1'> default value </option>
    <option selected="true" value="2">selected value</option>
</select>

onclick event for button doesn't works:

<button onclick="resetSearchPanel();" type="reset"> ...

java script function:

 function resetSearchPanel() {

  document.forms['submitSearch'].elements['select1'].value = "1";

}

above snippet works when the button type property setted as 'button' but it doesn't work when type set to reset!

LPD · Answer 1 · 2012-12-30T11:18:17.910

0

Onclick of reset, just make the required value in the select tag as selected.

on Onclick() method of reset button, make sure that you write a function which does whatever you want to.

If you set the button type as reset, it will reset the whole of form data, so youe select tag will not be having the value you set it to. Remove reset tag, and it should be fine.

If its must for you to use type as "reset" then you have to use work arounds to make sure that your code is executed after the form is reset, but that approach is strongly discouraged.

edited Dec 30 '12 at 11:18

answered Dec 30 '12 at 10:36

LPD

2,833
2
29
48

whats the function that you have written? – LPD Dec 30 '12 at 10:40
http://stackoverflow.com/questions/78932/how-do-i-programatically-set-the-value-of-a-select-box-element-using-javascript Please refer to this link – LPD Dec 30 '12 at 10:45
What is submitSearch here? Have you verified that document.forms['submitSearch'].elements['select1'] is able to get your exact select tag? – LPD Dec 30 '12 at 11:01
YES! it is snippet, not full code. It works when type is button. – Nik Kashi Dec 30 '12 at 11:15
Whats the problem if you don't use reset type and just use button type? – LPD Dec 30 '12 at 11:17
I need reset button, it resets all inputs, it is my only input! – Nik Kashi Dec 30 '12 at 11:22
No other than setting a delay, there is no way to do that. – LPD Dec 30 '12 at 11:27

score 0 · Accepted Answer · answered Dec 30 '12 at 11:11

0

The reset button will reset all values back to default. Its onclick happens before the actual reset taking place, so any change you make there will be lost.

Since there is no "onafterclick" even, only way around if you must use reset button is using a timer:

function resetSearchPanel() {
    window.setTimeout(function() {
        document.forms['submitSearch'].elements['select1'].value = "1";
    }, 100);
}

This will change the selected value 0.1 seconds after clicking the button.

answered Dec 30 '12 at 11:11

Shadow The GPT Wizard

66,030
26
140
208

Thanks, It works. But is there any better solution? It seems dirty coding!! I can't vote up because of my low reputation, thank You. – Nik Kashi Dec 30 '12 at 11:19
Clean coding would be using custom reset button but I understand you can't change the HTML.. ?? – Shadow The GPT Wizard Dec 30 '12 at 11:22

score 0 · Answer 3 · answered Dec 30 '12 at 11:13

0

You have given button type='reset' dont know why because type reset will clear the form data. So for your problem you need to give the button type='button'

<button onclick="resetSearchPanel();" type="button">

Hope this will work for you.

answered Dec 30 '12 at 11:13

Ranjit Singh

3,715
1
21
35

I need reset button. I have several input in my form and I need reset all to default value after clicking reset. – Nik Kashi Dec 30 '12 at 11:23

score -1 · Answer 4 · answered Dec 30 '12 at 10:35

-1

Select option you need on page load with JavaScript.

answered Dec 30 '12 at 10:35

Hott Dogg

11
1

Because of our company framework limits, this solution can't implemented – Nik Kashi Dec 30 '12 at 10:41
1

@MohsenKashi - If there are limitations that restrict what solutions are acceptable to you, you should add them to the question. – Alohci Dec 30 '12 at 10:47
@HottDogg it is our coding conversation – Nik Kashi Dec 30 '12 at 11:05

diffrent default and selected value in html select

4 Answers4