We Keep Coding

button not working when placed inside form

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>

cloning jquery button twice and having both of them working doing the same task

i have a button that i wish to clone in jquery so that i can have two of them, using both buttons to do the same task however when i run this code only one of the buttons actually works and the other does not.
I have looked it up trying to use true as a parameter and it still doesnt work
any help would be much appreciated
jQuery(function($) {
var $button = $('#addEvent'),
$row = $('.newEvent').clone();
$button.click(function() {
$row.clone().insertBefore($button);
});
});
jQuery(function($) {
var $button = $('#newPupil'),
$row = $('.newParticipant').clone();
$button.click(function() {
$row.clone().insertBefore($button);
});
});
<form>
<div class="newEvent">
<fieldset id="ResultSheet">
<legend>Add Event</legend>
Event: <br>
<select name="Events" id="Events">
<option disabled selected value> --SELECT AN OPTION BELOW-- </option>
<option value="100 Metres">100 Metres</option>
<option value="200 Metres">200 Metres</option>
<option value="300 Metres">300 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="800 Metres">800 Metres</option>
<option value="1500 Metres">1500 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="Hurdels">Hurdels</option>
<option value="Shot Put">Shot Put</option>
<option value="Discus">Discus</option>
<option value="Javelin">Javelin</option>
<option value="Long Jump">Long Jump</option>
<option value="High Jump">High Jump</option>
<option value="Triple Jump">Triple Jump</option>
<option value="4x100 Metres Relay">4x100 Metres relay</option>
</select>
<div class="newParticipant">
<br> First name: <input type="text" name="fisrtName"> Last Name: <input type="text" name="lastName">
</div>
<input type="button" id="newPupil" name="newPupil" value="New participant">
</fieldset>
</div>
</form>
<input type="button" id="addEvent" name="addEvent" value="Add Event" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Attribute id must be unique in a document, use class instead. To attach dynamically created element use on().
Try the following way:
jQuery(function($){
var $button1 = $('#addEvent'),
$row1 = $('.newEvent').clone();
$button1.click(function(){
$row1.clone().insertBefore($button1);
});
var $row2 = $('.newParticipant').clone();
$('body').on('click', '.newPupil', function(){
$row2.clone().insertBefore(this);
});
});
<div class="newEvent">
<fieldset id="ResultSheet">
<legend>Add Event</legend>
Event: <br>
<select name="Events" id="Events">
<option disabled selected value> --SELECT AN OPTION BELOW-- </option>
<option value="100 Metres">100 Metres</option>
<option value="200 Metres">200 Metres</option>
<option value="300 Metres">300 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="800 Metres">800 Metres</option>
<option value="1500 Metres">1500 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="Hurdels">Hurdels</option>
<option value="Shot Put">Shot Put</option>
<option value="Discus">Discus</option>
<option value="Javelin">Javelin</option>
<option value="Long Jump">Long Jump</option>
<option value="High Jump">High Jump</option>
<option value="Triple Jump">Triple Jump</option>
<option value="4x100 Metres Relay">4x100 Metres relay</option>
</select>
<div class="newParticipant">
<br>
First name: <input type="text" name="fisrtName">
Last Name: <input type="text" name="lastName">
</div>
<input type="button" class="newPupil" name="newPupil" value="New participant">
</fieldset>
</div>
<input type="button" id="addEvent" name="addEvent" value="Add Event" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<button value="Refresh Page" onClick="refreshPage()">REFRESH</button>
<script src="newButtons.js"></script>

Select options from only one item, jquery change each

So I'm trying to build a quickbuy of products with different variants in my list of products. The product has a set of avaialble options, that are collected from the select option with jQuery, passed to a input field and then submitted to the cart. The products are listed out by a loop. When I'm at the single product page it works fine, since all the option values are required.
But once in the list of products, it gets the options from all the products and passes them to all the submit fields. How can I scope a jquery function to work on only one product at a time
In the example below, I want the field to have only the values from the select options relevant to the product. Not th evalues from both product options.
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).val() + ".";
});
$("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>

here you have
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$(this).parent().find("select option:selected").each(function() {
str += $(this).val() + ".";
});
$(this).parent().find("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>

HTML form with JS does not work properly in PHP

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.

Hide And show html tab with a drop down menu

here is my code ..i code a php page where i want, if we select scholarship status yes then some options show below like bank name , branch etc and if we select scholarship status no , then not show any option.
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
and if we select yes then show that options otherwise if we select no ..not show below options....
<div class="controls">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls">
<select id="" name="account number">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="<?php echo
set_value('accountnumber'); ?>" />
</div>

LIVE DEMO
$(document).ready(function() {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
});
$("select[name='Scholarship info']").change(function() {
var selectedVal = $(this).val();
if(selectedVal == 'yes') {
$("select[name='Bank name']").show();
$("select[name='Branch name']").show();
$("select[name='account number']").show();
$("input[name='acoountnumber']").show();
} else {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
}
});

If you add an extra class, withScholarship to the divs you want to show and hide, it is gets even easier. See this JSFiddle
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls withScholarship">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="121"/>
</div>
<script type="text/javascript">
$(".withScholarship").hide();
$("select[name='Scholarship info']").change(function() {
var flag = $(this).val() == "yes";
$(".withScholarship").toggle(flag);
})
</script>