Input type submit, kako da funkcionira iznad forme


#1
<form action="/kalkukator/index.php" method="post">
    <table width="54%" class="table table-bordered table-striped table-hover">
  <tr>
      <th width="7%" class="active">Date</th>
      <th width="46%" text-align= "center">Day Shifts</th>
      <th width="47%">Night Shifts</th>
  </tr>
  <tr>
      <td class= "active" >1.</td>
      <td class= "active"><input type="text" style= "width: 320px; color: #000; border-color: transparent; text-align: center;" color: "transparent" name="dan1"></td>
      <td class= "active"><input type="text" style= "width: 320px; color: #000; border-color: transparent; text-align: center;" color: "transparent" name="noc1"></td>

Ovo je forma koja treba da izracuna neke unete vrednosti, sve funkcionise ali samo kada je dugme SUBMIT ispod (na kraju forme):

> <input type="submit" align="center" value="Izracunaj">
> 	</form>

S obzirom da mi graficki to dugme treba daleko iznad mesta na kome je trenutno, kako mogu da ga prebacim a da forma i dalje funkcionise?


#2

Bilo bi dobro kada bi stavio screenshot.

Inace ako koristis Jquery mozes ovako

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ime</title>		
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
		
</head> 
<body>
<input type="button" value="Submit" id="submit"/>
<table width="54%" class="table table-bordered table-striped table-hover">
  <tr>
      <th width="7%" class="active">Date</th>
      <th width="46%" text-align= "center">Day Shifts</th>
      <th width="47%">Night Shifts</th>
  </tr>
  <tr>
      <td class= "active" >1.</td>
      <td class= "active"><input type="text" style= "width: 320px; color: #000; border-color: black; text-align: center;" color: "transparent" name="dan1" id = "dan1"></td>
      <td class= "active"><input type="text" style= "width: 320px; color: #000; border-color: black; text-align: center;" color: "transparent" name="noc1" id = "noc1"></td>
</table>


</body>
<script type="text/javascript">

$('#submit').click(function() {
		
		var dan1 =  $("#dan1").val();
		var noc1 =  $("#noc1").val();

		  $.ajax({
                   type: "POST",
                   url: "submit.php",
				   data: {dan1: dan1, noc1: noc1},
                   success: function(response){                             
							 //do something on success
                            }
           });
	
		});
</script>

I onda u submit.php radiš što već hoćeš sa tim inputima …
Na ovaj način možeš premjestit <input type="button" value="Submit" id="submit"/> gdje god hoćeš.


#3

Probaj ovo:
<input type="submit" form="myform" />

<form id="myform" method="get" action="something.php">
    <input type="text" name="name" />
</form>

#4
<form action="/kalkulator/index.php" method="post">
    <table width="54%" class="table table-bordered table-striped table-hover">
  <tr>
      <th width="7%" class="active">Date</th>
      <th width="46%" text-align= "center">Day Shifts</th>
      <th width="47%">Night Shifts</th>
  </tr>
  <tr>
      <td class= "active" >1.</td>
      <td class= "active"><input type="text" style= "width: 320px; color: #000; border-color: transparent; text-align: center;" color: "transparent" name="dan1"></td>
      <td class= "active"><input type="text" style= "width: 320px; color: #000; border-color: transparent; text-align: center;" color: "transparent" name="noc1"></td>
  </tr>
  <tr>
<input type="submit" align="center" value="Izracunaj">

@drmko, pokusao sam sa dodavanjem ID-a ali nece.
@MHB2011 , ne koristim jq, samo css+html+php


#5

@Mario_Marius probaj ovako

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ime</title>		
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>		
</head> 
<body>

<input type="button" value="Submit" id="submit"/>
<form name = "form1" method="post">
<table width="54%" class="table table-bordered table-striped table-hover">
  <tr>
      <th width="7%" class="active">Date</th>
      <th width="46%" text-align= "center">Day Shifts</th>
      <th width="47%">Night Shifts</th>
  </tr>
  <tr>
      <td class= "active" >1.</td>
      <td class= "active"><input type="text" style= "width: 320px; color: #000; border-color: black; text-align: center;" color: "transparent" name="dan1" id = "dan1"></td>
      <td class= "active"><input type="text" style= "width: 320px; color: #000; border-color: black; text-align: center;" color: "transparent" name="noc1" id = "noc1"></td>
</table>
</form>

<span class="label label-primary" id="badge">


</body>
<script type="text/javascript">

$('#submit').click(function() {
		
		var data =  $("form[name=form1]").serialize();

		  $.ajax({
                   type: "POST",
                   url: "kalkulator/index.php",
				   data: data,
                   success: function(response){                             
							 $("#badge").html(response);
                            }
           });
	
		});
</script>

#6

I dalje ne funkcionise, hmmm… nije mi jasno :\


#7

ovo bi trebalo raditi:

<input type="submit" form="myform" />

<form id="myform" method="post" action="/kalkukator/index.php">
    <input type="text" name="name" />
</form>

Ak ne radi, aplojdaj cijeli fajl negdje na neki fiddle il neš da pogledam…


#8

Radi!!!
Hvala puno :slight_smile: