I have HTML form with SELECT field and when i choose option i would like to launch CONFIRM message and if i choose "yes" it should submit the form.
how can i do that?
<form action="index.php?page=<?PHP echo $_GET['page'] ?>" method="post" >
<select name="planID" onChange="this.form.submit()" class="form-control">
<option value="">Choose plan1</option>
<option value="">Choose plan2</option>
<option value="">Choose plan3</option>
</select>
</form>
HTML:
<form action="index.php?page=<?PHP echo $_GET['page'] ?>" method="post" id="myForm">
<select name="planID" onchange="if(confirm('Are you sure?')) document.getElementById('myForm').submit();" class="form-control">
<option value="">Choose plan1</option>
<option value="">Choose plan2</option>
<option value="">Choose plan3</option>
</select>
</form>
Related
Am trying to check if a user has not selected any option from the select options list and then pass the error message to the user via a span id...else submit the form...I want javascript code that can check for empty selected index options for two select. Here is my code for that..
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post">
<label for="exampleInputSelect1">Select Your Stage</label>
<select class="form-control" name="course" id="course">
<option value=""></option>
<option value="Education">Education</option>
<option value="Information Technology">Information Technology</option>
<option value=" Computer Science">Computer Science</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="course_err"></span>
</div><br/>
<div class="form-group">
<label for="exampleInputSelect2">Select Your Stage</label>
<select type="password" class="form-control" name="stage" id="stage">
<option value="Y1S1">Y1S1</option>
<option value="Y1S2">Y1S2</option>
<option value="Y2S1">Y2S1</option>
<option value="Y2S2">Y2S2</option>
<option value="Y3S1">Y3S1</option>
<option value="Y3S2">Y3S2</option>
<option value="Y4S1">Y4S1</option>
<option value="Y4S2">Y4S2</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="stage_err"></span>
</div>
</form>
<button onclick="Check()" class="btn btn-info">Submit</button>
<script>
function Check(){
var c=document.getElementById("course");
var s=document.getElementById("stage");
if(c.options[c.selectedIndex].text==""){
document.getElementById("course_err").innerHTML="You have to select a course";
}else{
alert("form is ready to submit");
}
}
Am trying to check for empty selects and pevent submission until the user selects something from the option list..I need code to do that simultaneously for two selects, Thank you
There is a wrong variable x, to be changed to c:
function Check(){
var c=document.getElementById("course");
var s=document.getElementById("stage");
if(c.options[c.selectedIndex].text==""){
document.getElementById("course_err").innerHTML="You have to select a course";
}else if(s.options[s.selectedIndex].text==""){
document.getElementById("stage_err").innerHTML="You have to select a semester";
} else {
alert("form is ready to submit");
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post">
<label for="exampleInputSelect1">Select Your Stage</label>
<select class="form-control" name="course" id="course">
<option value=""></option>
<option value="Education">Education</option>
<option value="Information Technology">Information Technology</option>
<option value=" Computer Science">Computer Science</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="course_err"></span>
</div><br/>
<div class="form-group">
<label for="exampleInputSelect2">Select Your Stage</label>
<select type="password" class="form-control" name="stage" id="stage">
<option value="Y1S1">Y1S1</option>
<option value="Y1S2">Y1S2</option>
<option value="Y2S1">Y2S1</option>
<option value="Y2S2">Y2S2</option>
<option value="Y3S1">Y3S1</option>
<option value="Y3S2">Y3S2</option>
<option value="Y4S1">Y4S1</option>
<option value="Y4S2">Y4S2</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="stage_err"></span>
</div>
</form>
<button onclick="Check()" class="btn btn-info">Submit</button>
i want to change location where form is submitted because i want that the user picks a domain but when i have submitted the form it didn't worked and when i have submitted the form without the dropdown it worked
my html:
<form method="post" action="http://order.Freehostnoads.usa.cc/register2.php" id="form1">
<table>
<tr><th style="text-align: left;">Free Subdomain<td><input type="text" name="username" size="30" maxlength="25" onkeyup="return ismaxlength(this)">
<select id="domain" size="1" onChange="javascript:chgAction()">
<option value="http://order.freehostnoads.usa.cc/register2.php" selected="selected">.freehostnoads.usa.cc</option>
<option value="http://order.3eehost.usa.cc/register2.php">.3eehost.usa.cc</option>
<option value="http://order.3eehosting.usa.cc/register2.php">.3eehosting.usa.cc</option>
<option value="http://order.3eehosting.igg.biz/register2.php">.3eehosting.igg.biz</option>
<option value="http://order.3eehost.igg.biz/register2.php">.3eehost.igg.biz</option>
<option value="http://order.3eehosting.flu.cc/register2.php">.3eehosting.flu.cc</option>
<option value="http://order.3eehost.flu.cc/register2.php">.3eehost.flu.cc</option>
<option value="http://order.3eehosting.nut.cc/register2.php">.3eehosting.nut.cc</option>
<option value="http://order.3eehost.nut.cc/register2.php">.3eehost.nut.cc</option>
<option value="http://order.fg.nut.cc/register2.php">.fg.nut.cc</option>
<option value="http://order.hs.igg.biz/register2.php">.hs.igg.biz</option>
<option value="http://order.pw.usa.cc/register2.php">.pw.usa.cc</option>
</select>
my javascript:
<script>
function chgAction(){
$('#form1').attr({'action':$('option:selected').attr('value')});
}
</script>
the website i want to put this on: http://freehostnoads.usa.cc/free-hosting-signup.php
This works (here at SO). I moved the event handler code out of the tag
Assigning prop or attr is .prop("name","value")
Perhaps your free site is removing your links. Have a look with "Inspect" and the console
$(function() {
$("#domain").on("change",function() {
$('#form1').prop('action',this.value);
});
}).change(); // initialise
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="http://order.Freehostnoads.usa.cc/register2.php" id="form1">
<select id="domain" size="1" >
<option value="">Please select</option>
<option value="http://order.freehostnoads.usa.cc/register2.php" selected="selected">.freehostnoads.usa.cc</option>
<option value="http://order.3eehost.usa.cc/register2.php">.3eehost.usa.cc</option>
<option value="http://order.3eehosting.usa.cc/register2.php">.3eehosting.usa.cc</option>
<option value="http://order.3eehosting.igg.biz/register2.php">.3eehosting.igg.biz</option>
<option value="http://order.3eehost.igg.biz/register2.php">.3eehost.igg.biz</option>
<option value="http://order.3eehosting.flu.cc/register2.php">.3eehosting.flu.cc</option>
<option value="http://order.3eehost.flu.cc/register2.php">.3eehost.flu.cc</option>
<option value="http://order.3eehosting.nut.cc/register2.php">.3eehosting.nut.cc</option>
<option value="http://order.3eehost.nut.cc/register2.php">.3eehost.nut.cc</option>
<option value="http://order.fg.nut.cc/register2.php">.fg.nut.cc</option>
<option value="http://order.hs.igg.biz/register2.php">.hs.igg.biz</option>
<option value="http://order.pw.usa.cc/register2.php">.pw.usa.cc</option>
</select>
<form>
I have two forms on the same page. I want to enable/disable a form element based on the drop down value selected on the first form.
On the first drop down When option 1 selected or <option value="">Select</option> I want to disable the second dropdown from the first form or <select name="tractor" ..> and everything on 2nd Form form.
if from <select name="tire">: Rear Tire or Front Tire selected but Nothing selected in the second dropdown i want to enable <select name="tractor"> and keep 2nd Form disable.
1st Form
<form method="post">
<select name="tire">
<option value="">Select</option>
<option value="rear">Rear Tire</option>
<option value="front">Front Tire</option>
</select>
<select name="tractor">
<option value="">select Type</option>
<option value="2wd">2WD</option>
<option value="mfwd">MFWD</option>
<option value="4wd">4WD</option>
</select>
<input type="submit" value="Go" name="cmd_submit" />
2nd Form // want to be disabled when page loads
<form method="post" id="vehicle" action="page.php">
.
.
.
</form>
Simply check the value of the first dropdown. I added some classes to the dropdowns first and second:
<h3> First form </h3>
<form method="post" class="firstform">
<select name="tire" class="first">
<option value="">Select</option>
<option value="rear">Rear Tire</option>
<option value="front">Front Tire</option>
</select>
<select name="tractor" class="second" disabled>
<option value="">select Type</option>
<option value="2wd">2WD</option>
<option value="mfwd">MFWD</option>
<option value="4wd">4WD</option>
</select>
<input type="submit" value="Go" name="cmd_submit" />
</form>
<h3> Second form </h3>
<form method="post" id="vehicle" action="page.php" class="secondform">
<label>A form with no fields is useless: </label>
<input type="text" placeholder="so here a field" class="secondformfield" /> <br />
<label>This is a dropdown: </label>
<select name="tractor" class="secondformfield">
<option value="">...</option>
<option value="2wd">With an option</option>
<option value="mfwd">And another option</option>
</select> <br />
<textarea class="secondformfield">some text</textarea>
<input type="button" value="And away!" name="cmd_away" class="secondformfield"/>
</form>
And the Js
$(document).ready(function(){
$(".secondform .secondformfield").prop("disabled",true);
$(".first").change(function(){
if($(this).val() !== ""){
$(".second").prop("disabled",false);
}
else{
$(".second").prop("disabled",true);
}
checkIfEverythingIsFilledIn();
});
$(".second").change(function(){
checkIfEverythingIsFilledIn();
});
function checkIfEverythingIsFilledIn(){
if($(".first").val() !== "" && $(".second").val() !== ""){
$(".secondform .secondformfield").prop("disabled",false);
$(".secondform").attr("method","post").attr("action","page.php");
}
else{
$(".secondform .secondformfield").prop("disabled",true);
$(".secondform").removeAttr("method").removeAttr("action");
}
}
});
For preventing the submit of the form there are multiple solutions. The submitbutton will be disabled automatically because it is also of type input. Another option is to remove/add the attributes of the form like I did above and in a JsFiddle
Edit: Updated js code by a good advise of #WorldFS
How can I select dynamically in Bootstrap-select with multiple values, if my values are 1,3,4, using jQuery?
Here is my select:
<select id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>
Use Bootstrap-Select's val method:
$('#myselect').selectpicker('val', [1,3,4]);
http://jsfiddle.net/a4bxnwws/
See Bootstrap-Select's documentation.
If you use selectpicker class then
<select class="selectpicker" id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>
And Your jquery code will be like below:
var select_items = ["1","3","4"];
$('#myselect').selectpicker('val', select_items);
You can set the value for the select element using two methods.
For the first one, you can use the method that the bootstrap-select plugin provided: selectpicker(just like the above answer);
The second one is using jquery's method - trigger. Such as:
$('#myselect').val([1,3,4]).trigger('change');
This should work:
$('#MySelectionBox').val(123).change();
<form action="yourpage.php" method="post">
<select id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>
<input type="submit" name="Submit" value="Submit">
</from>
PHP code starts to catch multiple selected values:
<?php
if(isset($_POST['Submit']))
{
$MyValues = $_POST['myselect'];
foreach($MyValues As $value)
{
echo $value."</br>";
}
}
?>
// Check this code in detail
<form action="yourpage.php" method="post">
<select id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>
<input type="submit" name="Submit" value="Submit">
</from>
PHP code starts to catch multiple selected values:
<?php
if(isset($_POST['Submit']))
{
$MyValues = $_POST['myselect'];
foreach($MyValues As $key => $value)
{
$SID = mysqli_real_escape_string($dbCon,$value);
echo $SID ."</br>";
}
}
?>
I'm wondering how I can chain an input box after chaining a selection in my form.
I'm using http://www.appelsiini.net/projects/chained to chain my selects and it works. However, I need to adjust this to also allow for the chaining of an input. In the below example it would be someone would choose an option such has an item has Strength on it then the select menu of value options then input the value. I'm trying to also incorporate into this where after those 3 options of item, controller, value are inputed the user has the option to filter more so another box appear with the same options of strength, agility, etc. http://jsfiddle.net/isherwood/XMx4Q/ is an example of work I used to incorporate this into my own work.
<form id="myform" name="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div>
<label for="searchterm">Name:</label>
<input type="text" name="searchterm">
</div>
<div>
<div class="chainedSelectFilter">
<select name="specificFilter" class="attribute">
<option value="" selected>Select a Filter</option>
<option value="strength">Has Strength</option>
<option value="agility">Has Agility</option>
<option value="spirit">Has Spirit</option>
<option value="stamina">Has Stamina</option>
</select>
<select name="specificFilter" class="valueController">
<option value=">" selected>></option>
<option value=">=">>=</option>
<option value="=">=</option>
<option value="<="><=</option>
<option value="<"><</option>
</select>
</div>
</div>
</div>
<div>
<label for="submit"></label>
<input type="submit" name="submit" value="Filter">
</div>
Code reference below shows how to accomplish this. Here is jsFiddle that shows it's working.
HTML
<form id="myform">
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="Type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value=""/>
</div>
</form>
JS
$('select').change(function () {
$(this).next('input').fadeIn();
});
$('body').on('keyup','input.chain',function () {
$(this).parent().next('div').fadeIn();
});