How can I capture form options on submit?
I have a plain html form which I can call a JavaScript function from on exit, But how do I capture the chosen option from the <select> element?
Please see code below:
<legend>Administration:</legend>
<script type="text/javascript">
function handleIt(m){
alert("hello");
}
</script>
</head>
<body>
<form action="javascript:handleIt(select.name)"/>
<select name="num" required>
<option value="1">Add Anouncment</option>
<option value="2">Del Anouncment</option>
<option value="3">Aprove </option>
<option value="4">unAprove </option>
</select>
<input name="Anouncement" type="text" required>
<input name="Submit" type="submit" value="Update"/>
</form>
First of all, there are errors in your HTML syntax.
This will get the data when the 'submit' button is pressed (jsfiddle):
$('#submit_btn').on('click', function(e) {
e.preventDefault();
console.log($('[name="num"]').val());
});
<form id="main-form" method="get">
<select name="num" required>
<option value="1">Add Anouncment</option>
<option value="2">Del Anouncment</option>
<option value="3">Aprove </option>
<option value="4">unAprove </option>
</select>
<input name="Anouncement" type="text" required>
<input name="Submit" type="button" value="Update" id="submit_btn"/>
</form>
you can use this to retrieve selected option
<script type="text/javascript">
function handleIt(){
var v=document.getElementById("s1");
alert(v.options[v.selectedIndex].text) ;
}
</script>
</head>
<body>
<form action="javascript:handleIt()"/>
<select name="num" id="s1" required>
<option value="1">Add Anouncment</option>
<option value="2">Del Anouncment</option>
<option value="3">Aprove </option>
<option value="4">unAprove </option>
</select>
<input name="Anouncement" type="text" required>
<input name="Submit" type="submit" value="Update"/>
</form>
Related
I have simple form like this
function onSubmit( form ){
var data = JSON.stringify( $(form).serializeArray() );
console.log( data );
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit='return onSubmit(this)'>
<fieldset>
<legend>Dodaj nową wymianę:</legend>
<select name="size">
<option selected="selected" value="1">Wybierz rozmiar</option>
<option value="1,300">1,300</option>
<option value="1,372">1,372</option>
<option value="1,500">1,500</option>
<option value="1,524">1,524</option>
<option value="1,600">1,600</option>
<option value="1,700">1,700</option>
<option value="1,750">1,750</option>
<option value="1,800">1,800</option>
<option value="1,8288">1,8288</option>
<option value="1,8288 zcięte">1,8288 zcięte</option>
<option value="1,829">1,829</option>
<option value="2,000">2,000</option>
<option value="2,032">2,032</option>
<option value="2,070">2,070</option>
<option value="2,100">2,100</option>
<option value="2,200">2,200</option>
<option value="2,240">2,240</option>
<option value="2,250">2,250</option>
<option value="2,350">2,350</option>
<option value="2,500">2,500</option>
</select>
<input type="number" name="quantity" id="quantity" placeholder="podaj ilość" />
<input type="text" name="date" id="date" placeholder="dd-mm-rrrr" />
<label><input type="radio" name="machine" value="ULM" checked="checked" />ULM</label>
<label><input type="radio" name="machine" value="FRENCO" />Frenco</label>
<input type="text" name="who" placeholder="podaj inicjały np. DN" />
</fieldset>
<input type="submit" value="Dodaj" id="add" name="Add"/>
</form>
And I have existing CSV file "test.csv" in the same folder as my html file with form
how can I add data from form to this file, every submit should be new line in CSV I've tried every solution found on google and stack.
No I can't get PHP server on this computer.
In the below code when button is placed just outside the form it works in ajax but when button is placed inside the form the button doesn't works.
HTML code
<div class="container">
<div class="row">
<form class="form-inline">
<label for="from">From:</label>
<input type="text" class="form-control" id="from" placeholder="Enter start date" name="from">
<label for="to">To:</label>
<input type="text" class="form-control" id="to" placeholder="Enter end date" name="to">
<label for="chart_type">Type : </label>
<select id="chart" name="chart">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
</select>
</form>
<button id="date-submit-btn" class="btn btn-primary">Submit</button>
</div>
</div>
Ajax request on click of button
$(document).ready(function () {
$("#date-submit-btn").click(function(event){
var chartId = $("#chart").val();
var toDate = $("#to").val().split("/").reverse().join("-");
var fromDate = $("#from").val().split("/").reverse().join("-");
$("#chart1").empty();
$.ajax({
url:"action.php",
method:"POST",
data:{to:toDate,from:fromDate,chart:chartId},
success:function(returnData){
myDrawChart(returnData);
},
error:function(err){
console.log(err);
}
});
});
});
You can keep your button in your form and add type="button" so that the form will not be sent from the click on the button.
<div class="container">
<div class="row">
<form class="form-inline">
<label for="from">From:</label>
<input type="text" class="form-control" id="from" placeholder="Enter start date" name="from">
<label for="to">To:</label>
<input type="text" class="form-control" id="to" placeholder="Enter end date" name="to">
<label for="chart_type">Type : </label>
<select id="chart" name="chart">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
</select>
<button type="button" id="date-submit-btn" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
Another way to prevent the form from submitting would be using onsubmit="return false;" :
<div class="row">
<form onsubmit="return false;" class="form-inline">
//...
</form>
</div>
Or even modifying the button to an input type button would work as well :
<input type="button" id="date-submit-btn" class="btn btn-primary" value="Submit">
Try to add type="button" to your button in form.
Because default button type is "submit".
You can use button as type submit or take input as submit. Try like below:
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<label for="from">From:</label>
<input type="text" class="form-control" id="from" placeholder="Enter start date" name="from">
<label for="to">To:</label>
<input type="text" class="form-control" id="to" placeholder="Enter end date" name="to">
<label for="chart_type">Type : </label>
<select id="chart" name="chart">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
</select>
<button type="submit" value="Go">Go</button>
</form>
I have a form which contains a dropdown and 2 other input fields.Initially I want to show only the dropdown and hide other two fields and show the other two fields when the value of dropdown is other.
<form id="submit_form" name="myform" action="/download" method="post"> {% csrf_token %}
<fieldset>
<select name="one" onchange="if (this.value=='other'){this.form['datefrom'].style.visibility='visible'}else {this.form['datefrom'].style.visibility='hidden'};">
<option value="none" selected="selected">Select...</option>
<option value = "1m" >1 month</option>
<option value = "2m">2 months</option>
<option value = "3m">3 months</option>
<option value = "other">other</option>
</select>
<br> From:
<br>
<input type="datetime-local" name="datefrom"><br> To:
<br>
<input type="datetime-local" name="dateto"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
In my code initially all the input fields are showing.So if anybody could me how to hide and the two datetime input fields initially and show them only when the value of dropdown is other.Any help would be appreciated.
You can use javascript.
First, you set your input field as hidden who warp inside div.
Use onchange for dynamic condition based on your select option value.
Check this example.
function func(value) {
if (value == 'other') {
$('#input_field').show();
} else {
$('#input_field').hide();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="submit_form" name="myform" action="/download" method="post"> {% csrf_token %}
<fieldset>
<select name="one" onchange="func(this.value)">
<option value="none" selected="selected">Select...</option>
<option value="1m">1 month</option>
<option value="2m">2 months</option>
<option value="3m">3 months</option>
<option value="other">other</option>
</select>
<div id="input_field" style="display:none;">
<br> From:
<br>
<input type="datetime-local" name="datefrom"><br> To:
<br>
<input type="datetime-local" name="dateto"><br><br>
</div>
<input type="submit" value="Submit">
</fieldset>
</form>
Javascript solution
<!DOCTYPE html>
<html>
<head>
<style>
.cs-hide{
display:none;
}
</style>
</head>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value = "1m" >1 month</option>
<option value = "2m">2 months</option>
<option value = "3m">3 months</option>
<option value = "other">other</option>
</select>
<br>
<div id="dateContainer" class="cs-hide">
From:<br>
<input type="datetime-local" name="datefrom"><br>
To:<br>
<input type="datetime-local" name="dateto"><br><br>
</div>
<input type="submit" value="Submit">
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
var element = document.getElementById("dateContainer");
if(x === "other"){
element.classList.remove("cs-hide");
}else{
element.classList.add("cs-hide");
}
}
</script>
</body>
</html>
"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>
So as the title states I have dynamic form that adds inputs dynamically and one of those inputs dropdown on change calls for val(this) function and I would also like to call this function when somebody adds this field so when a.AddSpell on click function is executed
$('div#ChampionInput').on('click', 'a.AddSpell',function(){
var championName = $(this).closest(".Champion").find(".ChampionInput").val();
if($.inArray(championName, championsWithExtraSpells)==-1){
OptionsChampion = '\
<option value="Passive">Passive</option>\
<option value="Q" selected>Q</option>\
<option value="W">W</option>\
<option value="E">E</option>\
<option value="R">R</option>'
;}
else{
OptionsChampion = '\
<option value="Passive">Passive</option>\
<option value="Q" selected>Q</option>\
<option value="Q2">Q2</option>\
<option value="W">W</option>\
<option value="W2">W2</option>\
<option value="E">E</option>\
<option value="E2">E2</option>\
<option value="R">R</option>\
<option value="R2">R2</option>';}
$(this).siblings('.SpellChanges').append(
'<div class="Spell" data-id="'+$(this).siblings("div.SpellChanges").children("div.Spell").length+'">\
<select name="change['+$(this).parent('div').data('id')+'][]" onchange="val(this)">\
'+OptionsChampion+'\
</select>\
<input type="text" name="championSpell['+$(this).parent('div').data('id')+'][]" readonly>\
<br>\
<div class="Change">\
<textarea type="text" size="20" rows="3" cols="50" maxlength="500" name="SpellDescription['+$(this).parent('div').data('id')+'][][]" placeholder="Enter Description" required></textarea>\
<select name="SpellChange['+$(this).parent('.Champion').data('id')+'][][]">\
<option value="buff">Buff</option>\
<option value="nerf">Nerf</option>\
<option value="new">New</option>\
<option value="change">Change</option>\
<option value="bugfix">Bugfix</option>\
</select>\
Add Change \
Remove Spell\
</div>\
</div>\
');
//alert($(this).siblings('div.SpellChanges').children('div.Spell').last().children('input').html());
});
alert($(this).siblings('div.SpellChanges').children('div.Spell').last().children('input')); this is what I've tried to target that field but I have no idea how to call on change with (this) in it.
Here is also html
<div id="wrap">
<form name="second_form" id="second_form" action="#" method="POST">
<select id="season" name="season" onchange="checkseason();">
<option value="newseasons" selected>Season 3+</option>
<option value="oldseasons">Season 1, 2</option>
</select>
<input id="patch" type="text" name="patch" placeholder="e.g. 4.20" required autofocus><br/>
Add Champion
<div id="ChampionInput">
</div>
<br><br>
<input type="submit" name="submit">
</form>
</div>