I have the following code to save a person's timestamps when he clicks on one of two buttons.
On the screen they must choose which button they prefer if A or B.
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
I want to program two keys to submit the buttons. But I need each key to be one of the buttons to know which option they chose. Also, I don't want to lose the timestamp. Can someone help me?
You mean this?
I added ID to field
function myFunction(but) {
var n = Date.now();
document.getElementById("timestamp1").value = n;
document.getElementById("c1").value = but.value;
}
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction(this)" name="offer_accepted1" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction(this)" name="offer_accepted1" value="False">B</button>
</p>
<input type="text" name="timestamp1" id="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
Related
I have 10 buttons with different values I need to enter the value of the button when is clicked into a text field and after this to send the full text to php file with post How can I do that.
<form class="row" action="Pin.php" method='post'>
<div class="col-xs-8 text-center" style="border-right:solid 3px #CCC">
<h1 class="demo-section-title text-uppercase text-center">Input Your Pin Number</h1>
<input type="text" id="userPinInput" class="form-control" />
<!-- TABLE -->
<div id="pinPad">
<table>
<tr>
<td><input type="button" id="btn1" name="name[]" value="1" class="btn btn-block btn-lg btn-inverse"></input ></td>
<td><input type="button" id="btn2" name="name[]" value="2" class="btn btn-block btn-lg btn-inverse"></input ></td>
<td><input type="button" id="btn3" name="name[]" value="3" class="btn btn-block btn-lg btn-inverse"></input ></td>
</tr>
<tr>
Here is a screenshot
The reason I can't use check boxes is it must look like in the screenshot.
Second I need to send the clicked value to the text area in the screenshot.And I think is more easy to send the value of the check box to php file after I click the numbers
What you have shown in your HTML is lots of textboxes which seemed have been styled to look like buttons using CSS. I don't think this is necessary. You can use regular buttons, which can still have values assigned to them. The markup of your "buttons" is also invalid.
You need to
a) create some valid HTML buttons
b) listen for each button being clicked on
c) when it's clicked, add that the value of the clicked button to the textbox
d) since it's a PIN number, use a "password" field for the textbox
e) get rid of the "name" on the buttons so those values won't be sent to the server
f) give the pin number textbox a name so that value will be sent to the server
Demo:
document.addEventListener('DOMContentLoaded', function() {
var textbox = document.querySelector("#userPinInput");
var pinButtons = document.querySelectorAll(".pinNum");
pinButtons.forEach(function(btn) {
btn.addEventListener("click", function(e) {
textbox.value += this.value;
});
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#3.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form class="row" action="Pin.php" method='post'>
<div class="col-xs-8 text-center" style="border-right:solid 3px #CCC">
<h1 class="demo-section-title text-uppercase text-center">Input Your Pin Number</h1>
<input type="password" name="pin" id="userPinInput" class="form-control" />
<!-- TABLE -->
<div id="pinPad">
<table>
<tr>
<td><button type="button" id="btn1" value="1" class="pinNum btn btn-block btn-lg btn-inverse">1</button></td>
<td><button type="button" id="btn2" value="2" class="pinNum btn btn-block btn-lg btn-inverse">2</button></td>
<td><button type="button" id="btn3" value="3" class="pinNum btn btn-block btn-lg btn-inverse">3</button></td>
</tr>
<tr>
<td><button type="button" id="btn1" value="4" class="pinNum btn btn-block btn-lg btn-inverse">4</button></td>
<td><button type="button" id="btn2" value="5" class="pinNum btn btn-block btn-lg btn-inverse">5</button></td>
<td><button type="button" id="btn3" value="6" class="pinNum btn btn-block btn-lg btn-inverse">6</button></td>
</tr>
<tr>
<td><button type="button" id="btn1" value="7" class="pinNum btn btn-block btn-lg btn-inverse">7</button></td>
<td><button type="button" id="btn2" value="8" class="pinNum btn btn-block btn-lg btn-inverse">8</button></td>
<td><button type="button" id="btn3" value="9" class="pinNum btn btn-block btn-lg btn-inverse">9</button></td>
</tr>
</table>
</div>
</div>
</form>
The full pin number from the textbox would then be available in the server when the form is submitted, by accessing $_POST["pin"].
I am trying to make my code submit a boolean button with two options. I am trying to trigger the S and K keypress to submit each button. I saw the following code, but when I try it, it doesn't run.
This is my HTML code. Each button has a function that give me a timestamp of the click, submit the page and save the option that the participant chooses (A or B).
<!DOCTYPE html>
<html>
<body>
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1A" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1B" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
<!--The keypress code-->
<script>
var input = document.getElementById("of1A");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 75) {
event.preventDefault();
document.getElementById("of1A").click();
});
var input = document.getElementById("of1B");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 83) {
event.preventDefault();
document.getElementById("of1B").click();
}
});
//The function that gives me a timestamp
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
</script>
</body>
Without the keypress code the code runs in the next way:
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
I have a button Update in One td I want to fetch value of both textarea of td from same tr.
There are lots of tr so I have to use closest() method to find element. I have tried to find element but it's not working.
HTML :-
<tr>
<td>
<div class="agenda-date">
<div class="dayofmonth color_font_date">2017-05-31</div>
<div class="dayofweek">
Wednesday
</div>
</div>
</td>
<td>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary">AM </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="3" name="" class="number_planner"></a>
<label class="control-label"> 6 </label>
</div>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary">PM </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="4" name="" class="number_planner"></a>
<label class="control-label"> 2 </label>
</div>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap appointment_note" required="required" rows="3" name="appointment_note" cols="50" aria-required="true" disabled=""> APT -1 </textarea>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap holiday_note" required="required" rows="3" name="holiday_note" cols="50" aria-required="true" disabled=""> Holiday - 1 </textarea>
</td>
<td>
<div class="text-right">
<button type="button" id="" class="btn btn-primary appointment_edit_button">Edit </button>
<button type="button" id="" onclick="planner_note_edit(1)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> Update </button>
<button type="button" id="" class="btn btn-md btn-cancel appointment_cancel_button" style="display:none">Cancel </button>
</div>
</td>
</tr>
Jquery :-
function planner_note_edit(planner_note_id)
{
appointment_note = $(this).closest('td').find(".holiday_note").val();
alert(appointment_note);
}
But I'm not able to fetch value of textarea from closest td.
You should get the textarea from current row.
So, please use .closest('tr')
appointment_note = $(this).closest('tr').find(".holiday_note").val();
Also, you have to pass the clicked button object. this in your function is a reference to the window object.
function planner_note_edit(planner_note_id,event)
{
appointment_note = $(event.target).closest('td').find(".holiday_note").val();
alert(appointment_note);
}
HTML
<button type="button" id="" onclick="planner_note_edit(1,event)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> Update </button>
I have a problem, when i try to retrieve the value I have typed in the text input, and I try to print it in alert , it shows nothing, the variable is empty
here is the code:
I have here the input textfield 'Montant', i would like to retrieve it using the onClick event on the button on the bottom
<form name="formEspece" method="get" action="{{route('EffectuerPaiement')}}" >
<div class="modal-body">
<p>Veuillez saisir le montant à payer pour cette échéance</p>
<div class="form-group">
<label for="exampleInputEmail1">Montant:</label>
<input required type="number" id="idMontant1"class="form-control" placeholder="Saisissez un montant" name="Montant" >
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-primary" onclick='return test(document.getElementById("idMontant1").value,{{$paiement->montant-$totalPaiement}})' value="valider"/>
</div></form>
here is the script:
<script>function test(a,b){
window.alert('a= '+a+'b= '+b);}</script>
it shows nothing, notice that i am using Bootstrap, and LARAVEL
here is a more detailed code I retreive it from my own project:
#foreach($inscriptions as $inscription)
<?php
// some treatments
?>
<tr class="{{$rowstyle}}">
<td><img src="images/{{ $inscription->photo }}"></td>
<td>{{ $inscription->cne }}</td>
<td>{{ $inscription->nom }}</td>
<td>{{ $inscription->prenom }}</td>
<td>{{ $inscription->ville }}</td>
<!-- the button who open the forms modal-->
<td>
<button class="btn btn-sm btn-primary btn-success" data-toggle="modal" data-target="{{"#smallModalEspece".$count}}">Espèce</button>
</td>
<td>
<a class="btn btn-sm btn-danger" href="{{ route('retirer',[ 'cne' => $inscription->cne ]) }}"><i class="fa fa-trash-o"></i></a>
<a href="{{ route('detailetudiant',[ 'id' => $inscription->id ]) }}" class="btn btn-sm btn-default">
<i class="fa fa-info-circle"></i> Détails
</a>
</td>
</tr>
<!-- the modal who contains the form -->
<div id="{{"smallModalEspece".$count}}" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Paiement en espèce</h4>
</div>
<form name="formEspece" method="get" action="{{route('EffectuerPaiement')}}" >
<div class="modal-body">
<h3>Le montant restant à payer pour l'étudiant {{\fc\etudiant::find($inscription->cne)->nom.' '.\fc\etudiant::find($inscription->cne)->prenom}} est : {{$paiement->montant-$totalPaiement}}</h3>
<p>Veuillez saisir le montant à payer pour cette écheance</p>
<div class="form-group">
<input type="hidden" name="MontantPaye" value="{{$paiement->montant-$totalPaiement}}"/>
<label for="exampleInputEmail1">Montant:</label>
<input required type="number" id="idMontant1"class="form-control" placeholder="Saisissez un montant" name="Montant" >
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="_token" value=" {{ csrf_token() }} ">
<input type="hidden" name="idpaiment" value="{{$paiement->idPaiement}}">
<input type="hidden" name="nbrEcheance" value="{{$nbrE}}">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="button" id="#buttonid" class="btn btn-primary" onclick='test(document.getElementById("idMontant1").value,{{$paiement->montant-$totalPaiement}})' value="valider"/>
</div>
</form>
</div>
</div>
</div>
#endforeach
ID's must be unique, but you use the same ID idMontant1 for each number-input.
(A browser may not guess which element you mean, he will always select the same input)
Possible solution:
you may omit the ID, instead pass the button as argument to test() .
Via the button you'll be able to find the desired input:
find the form(it's the form-property of the button)
find the input with the name Montant within the form(e.g. via element.querySelector)
Simple demo(I've removed the irrelevant markup)
function test(btn) {
var val = btn.form.querySelector('input[name="Montant"]').value;
alert(val);
}
<form>
<input type="number" name="Montant" value="12" />
<input type="button" onclick="return test(this)" value="valider" />
</form>
<form>
<input type="number" name="Montant" value="34" />
<input type="button" onclick="return test(this)" value="valider" />
</form>
<form>
<input type="number" name="Montant" value="56" />
<input type="button" onclick="return test(this)" value="valider" />
</form>
<form>
<input type="number" name="Montant" value="78" />
<input type="button" onclick="return test(this)" value="valider" />
</form>
add an id to the button and try this
<script>
$("#buttonid").click(function(){
var in = $("#idMontant1").val();
window.alert(in);});
</script>
You can use the below script:
<script>
function affich(montant){
windows.alert('montant');
}
</script>
Then in input you can do:
onclick="affich('montant')"
Reffering to my previous question (about simple pocket calculator), I try to rewrite it using MVC pattermn. I understand the basics of MVC but to implement it is pretty difficult for a beginner. so my html code is :
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/SimpleCalculator.css">
<script type="text/javascript" src = "js/SC_Controller.js"></script>
<script type="text/javascript" src = "js/SC_Model.js"></script>
<script type="text/javascript">
new SC_Controller().init();
</script>
</head>
<body>
<h2>Simple Calculator</h2>
<div class="box">
<div class="display"><input type="text" readonly size="18" id="displayId"></div>
<div class="keys">
<p><input type="button" class="button black" value="7">
<input type="button" class="button black" value="8">
<input type="button" class="button black" value="9">
<input type="button" class="button orange" value="/">
</p>
<p><input type="button" class="button black" value="4">
<input type="button" class="button black" value="5">
<input type="button" class="button black" value="6">
<input type="button" class="button orange" value="*">
</p>
<p><input type="button" class="button black" value="1">
<input type="button" class="button black" value="2">
<input type="button" class="button black" value="3">
<input type="button" class="button orange" value="-">
</p>
<p><input type="button" class="button black0" value="0">
<input type="button" class="button black" value=".">
<input type="button" class="button orange" value="+"></p>
<p><input type="button" class="button greenc" value="C">
<input type="button" class="button yelloweq" value="="></p>
</div>
</div>
</body>
and my two JS filController.js are :
SC_Controller.js
var SC_Controller = function(scModel){
var model = scModel || new SC_Model();
var s = "";
function clicked(){
s += model.getValue();
alert(s);
model.setValue(s);
}
function init(){
document.getElementsByClassName("button").onclick = clicked;
}
return {
init : init;
model : model
};
};
and
SC_Model.js
var SC_Model = function(){
function getValue(){
return(document.getElementsByClassName('button').value);
}
function setValue(val){
document.getElementById('displayId').value = val;
}
return{
getValue : getValue,
setvalue : setValue
};
};
To implement a MVC pattern, I googled and found an example. I tried to adapt it to my calculator code, but launching the HTML, when I click a key the alert box in SC_Controller.js does not pop up. I can not understand why. Could you help me ?
The document.getElementsByClassName("button") returns a collection of nodes
(see https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName).
You need to iterate over them when applying the click handler as well as when requestion their .value.
For instance, the
document.getElementsByClassName("button").onclick = clicked;
should be
var buttons = document.getElementsByClassName("button");
for(var i=0;i<buttons.length;i++)
buttons[i].onclick = clicked;