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.
Related
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>
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>
I have a form with JS where I hide and show form's fields after choosing option with radiobuttons.
<?php require_once 'resources/menus/adminMenu.php'; ?>
<div class="col-lg-offset-3 col-lg-6 ">
<div class="well bs-component">
<form class="form-group" method="post">
<fieldset>
<legend>Wyszukaj</legend>
<div class="form-group" style="display: block" id="queryIndex">
<label for="index" class="control-label">Indeks</label>
<input class="form-control" id="index" name="index" type="text">
</div>
<div class="form-group" style="display: none" id="queryName">
<label for="name" class="control-label">Imię</label>
<input class="form-control" id="name" name="name" type="text">
<label for="surname" class="control-label">Nazwisko</label>
<input class="form-control" id="surname" name="surname" type="text">
</div>
<div class="form-group" style="display: none" id="queryFaculty">
<label for="faculty" class="control-label">Wydział</label>
<select class="form-control" id="faculty" name="faculty" required="required">
<option value=""></option>
<option value="Wydział A">Wydział A</option>
<option value="Wydział B">Wydział B</option>
<option value="Wydział C">Wydział C</option>
<option value="Wydział D">Wydział D</option>
<option value="Wydział E">Wydział E</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySubject">
<label for="subject" class="control-label">Kierunek</label>
<select class="form-control" id="subject" name="subject" required="required">
<option value=""></option>
<option value="Kierunek AA">Kierunek AA</option>
<option value="Kierunek AB">Kierunek AB</option>
<option value="Kierunek AC">Kierunek AC</option>
<option value="Kierunek BA">Kierunek BA</option>
<option value="Kierunek BB">Kierunek BB</option>
<option value="Kierunek BC">Kierunek BC</option>
<option value="Kierunek CA">Kierunek CA</option>
<option value="Kierunek CB">Kierunek CB</option>
<option value="Kierunek CC">Kierunek CC</option>
<option value="Kierunek DA">Kierunek DA</option>
<option value="Kierunek DB">Kierunek DB</option>
<option value="Kierunek DC">Kierunek DC</option>
<option value="Kierunek EA">Kierunek EA</option>
<option value="Kierunek EB">Kierunek EB</option>
<option value="Kierunek EC">Kierunek EC</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySystem">
<label for="system" class="control-label">System</label>
<select class="form-control" id="system" name="system" required="required">
<option value=""></option>
<option value="st">Stacjonarne</option>
<option value="nst">Niestacjonarne</option>
</select>
</div>
<div class="form-group" style="display: none" id="queryDegree">
<label for="degree" class="control-label">Stopień</label>
<select class="form-control" id="degree" name="degree" required="required">
<option value=""></option>
<option value="I">1. stopień (inżynierskie/licencjat)</option>
<option value="II">2. stopień (magisterskie)</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySemester">
<label for="semester" class="control-label">Semestr</label>
<select class="form-control" id="semester" name="semester" required="required">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="form-group">
<input type="radio" name="search" value="index" checked="checked"
onClick="changeForm('queryIndex')"> Indeks
<input type="radio" name="search" value="name"
onClick="changeForm('queryName')"> Imię i nazwisko
<input type="radio" name="search" value="faculty"
onClick="changeForm('queryFaculty')"> Wydział
<input type="radio" name="search" value="subject"
onClick="changeForm('querySubject')"> Kierunek
<input type="radio" name="search" value="system"
onClick="changeForm('querySystem')"> System
<input type="radio" name="search" value="degree"
onClick="changeForm('queryDegree')"> Stopień
<input type="radio" name="search" value="semester"
onClick="changeForm('querySemester')"> Semestr
</div>
<script type="text/javascript">
function changeForm(element) {
document.getElementById('queryIndex').style.display = 'none';
document.getElementById('queryName').style.display = 'none';
document.getElementById('queryFaculty').style.display = 'none';
document.getElementById('querySubject').style.display = 'none';
document.getElementById('querySystem').style.display = 'none';
document.getElementById('queryDegree').style.display = 'none';
document.getElementById('querySemester').style.display = 'none';
document.getElementById(element).style.display = 'block';
}
</script>
<div class="form-group col-lg-4">
<div class="control-label">
<button type="submit" class="btn btn-primary" name="submit" value="searchStudent">Szukaj
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Also I have PHP file, where I get data from this form.
function studentWindow()
{
$this->setView("AdminPanel", "StudentWindow");
if (isset($_POST['submit']) && $_POST['submit'] == 'searchStudent') {
$query="";
$data=array();
if($_POST['search']=='index'){
$data['index']=sanitizeString($_POST['index']);
$query="st_index LIKE '?%'";
}
elseif($_POST['search']=='name'){
$data['name']=sanitizeString($_POST['name']);
$data['surname']=sanitizeString($_POST['surname']);
$query="name LIKE '?%' AND surname LIKE '?%'";
}
elseif($_POST['search']=='faculty'){
$data['faculty']=$_POST['faculty'];
$query='AS st INNER JOIN subject AS s ON st.id_subject=s.id_subject INNER JOIN faculty AS f ON s.id_faculty=f.id_faculty WHERE f.name=?';
}
elseif($_POST['search']=='subject'){
$data['subject']=$_POST['subject'];
$query='AS st INNER JOIN subject AS s ON st.id_subject=s.id_subject WHERE s.name=?';
}
elseif($_POST['search']=='system'){
$data['system']=$_POST['system'];
$query='system=?';
}
elseif($_POST['search']=='degree'){
$data['degree']=$_POST['degree'];
$query='degree=?';
}
elseif($_POST['search']=='semester'){
$data['semester']=$_POST['semester'];
$query='semester=?';
}
$this->loadModel("AdminPanel");
$model = new AdminPanelModel();
$model->getStudents($query,$data);
}
}
This is a problem. I can't get data from forms and also the button doesn't work. I made other forms like this but without JS. This may be the cause. Do you have any suggestions or solutions?
P.S. Sorry for my English ;)
The problem is using required='required' when the form fields are not required.
The user can submit at any time and it is not evident that you must click each radio button in turn to fill out that portion, if that was the intention.
I ran your code as plain HTML and examined the POST data in the Chrome Dev Tools and it works fine if you fill out all fields with required...
You will get an error in console that says the following:
An invalid form control with name='faculty' is not focusable.
Chrome is trying to focus the field to add error messages, but you set style.display = 'none' so it can't.
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>
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