We Keep Coding

How to validate my MaterializeCSS form, and if first value in select selected - do not send form & display an error?

I have done the following form with MaterializeCSS:
<form action="num.php" method="GET" autocomplete="off">
<select id="num" name="num" class="browser-default">
<option selected="true" disabled selected>Select number
</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
<button class="btn" type="submit">Show
<i class="material-icons right">send</i>
</button>
</form>
The problem is that the user can click on the button, without selecting a number. But I need that he first choose a value from the select, and only then press a button. And if he pressed a button without selecting a number (when "Select number:" selected), display an error and do not send the form. How can this be done with JavaScript?

no need for js. you can add required attribute to select and set value of Select number to ""
<form action="num.php" onsubmit="return checkForm()" method="GET" autocomplete="off">
<select required id="num" name="num" class="browser-default">
<option selected="true" value="" disabled selected>Select number
</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
<button class="btn" id="btn" type="submit">Show
<i class="material-icons right">send</i>
</button>
</form>

Get the form reference and intercept the onsubmit event
document.getElementsByTagName('form')[0].onsubmit = function() {
//check here the value and return false to stop the submit
if(document.getElementById('num').value == "")
return false
}

Dropdown needs to go to value assigned on submit

"document.location" runs it immediately after it's clicked. I need it to run after submit. . . Any Suggestions?
For reference: First Tennessee Bank
<form>
<select name="mydropdown" class="styled" onchange="document.location = this.value" value="GO">
<option value="http://www.google.com">Google</option>
<option value="http://fb.com">Facebook</option>
<option value="http://youtube.com">Youtube</option>
</select>
<input type=submit>
</form>

This will do what you are wanting to do when they click submit it will go do the location they picked.
function go(){
var x =document.getElementsByClassName('styled')[0]
document.location = x.options[x.selectedIndex].value
}
<form>
<select name="mydropdown" class="styled" c value="GO">
<option value="http://www.google.com">Google</option>
<option value="http://fb.com">Facebook</option>
<option value="http://youtube.com">Youtube</option>
</select>
<input type="button" value="Go" onclick="go()">
</form>

how to connect two dropdown lists and to put conditions in html and php?

how to connect two dropdown lists in html by putting conditions.
<p>Enter your source and destination.</p>
<p>From:</p>
<select name="from">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<p>To:</p>
<select name="To">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<form method="post" action="flights.html">
<input type="submit" value="search" />
</form>
when user enter source and destination and click on search button it will go on different page on all different entries in two dropdown lists.

First, your select dropdowns need to be INSIDE your form.
<form method="post" action="flights.html" >
<p>Enter your source and destination.</p>
<p>
From:</p>
<select name="from">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<p>
To:</p>
<select name="To">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<input type="submit" value="search" />
</form>
Second, on the action page, you can use PHP to process the form variables, then output conditional content based on them. Most likely the action should be flights.php, not flights.html

Passing id of tag that submited form with onchange=this.form.submit()

Is there a way to know which select tag submitted form?
<form method="POST" action="submit.php">
<select id="id1" name="sel1" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Non-jQuery solution is preferable, but not mandatory...
P.S. Problem is that selected="select" attribute is generated dynamically (i don't know which option would be selected as default - so i can't compare default with submitted)

The first thing that comes to mind is a hidden field with a value you set. Something like this should do.
<form method="POST" action="submit.php">
<input type="hidden" name="submitselect" value="" id="submitselect">
<select id="id1" name="sel1" onchange="document.getElementById('submitselect').value='sel1';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="document.getElementById('submitselect').value='sel2';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Alternatively, you could have a default option chosen, e.g.
<option value="" selected>-</option>
That would never otherwise be chosen. That way, this option would remain unset in the selects that didn't cause the submit.

retain text box value on window.location

I have a form as follows:
<form name="donation_form" action="" method="post" target="_self">
<select name="donationType" onChange="window.location='?page=donate&donationType='+donation_form.donationType.value;">
<option>--Select--</option>
<option value="a" selected="selected">a</option>
<option value="b" >b</option>
<option value="c" >c</option>
</select>
<input type="text" name="amount" />
<select name="giftAid" onChange="window.location='?page='+donate+'&donationType='+a+'&amount='+donation_form.amount.value+'&giftAid='+donation_form.giftAid.value;">
<option>--Select--</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
</select>
<input name="submit2" type="submit" value="Make a Donation" />
</form>
Now when I select the second select and it refreshes the page, how do I retain the value of the amount text box that a user has enetered as well as the two selects?
Thanks in Advance

You should accept answers for your older questions.
You'll need to pass the values of the other controls to the server as querystring parameters, then set the selected values of the options in server-side code (or Javascript) from the querystring.
What are you trying to do?