Why this submit function in Meteorjs doesn't work? - javascript

I have a form which consists of 7 questions. I ask them individually using display:none. But the problem is that submit function doesn't work. When I click it, it just redirects back to the first question and url turns to - http://localhost:3000/?problem=&why1=&why2=&why3=&why4=&why5=&solution=&submit-all=Answer . I really need help with this please. Below is code for HTML template and JavaScript submit function to submit in Problems collection.
<template name="submitProblem">
<div class="container">
<div class="main-page">
<form class="text-center">
<div id="submit-problem">
<input autofocus="autofocus" type="text" name="problem" id="problem" placeholder="What's the problem ?"/>
<input type="button" id="route" value="Find Its Route" class="route btn btn-sample">
</div>
...
submit-why1 - submit-why4
...
<div id="submit-why5" class="hidden">
<input autofocus="autofocus" type="text" id="why5" class="" name="why5" placeholder="This problem exists, because..."/>
<input type="button" value="Answer" class="btn-success btn answer5">
<button class="btn back5 back-btn"><i class="fa fa-arrow-left fa-3x"></i></button>
</div>
<div id="submit-solution" class="hidden">
<input autofocus="autofocus" type="text" name="solution" id="solution" placeholder="What could be the best solution ?"/>
<input type="submit" id="submit-all" name="submit-all" value="Answer" class="btn btn-primary submit-all">
<button class="btn back6 back-btn"><i class="fa fa-arrow-left fa-3x"></i></button>
</div>
</form>
</div>
</div>
</template>
Template.submitProblem.events({
'submit .submit-all':function() {
event.preventDefault();
var problem = $(event.target).find('[name=problem]').val();
var why1 = $(event.target).find('[name=why1]').val();
var why2 = $(event.target).find('[name=why2]').val();
var why3 = $(event.target).find('[name=why3]').val();
var why4 = $(event.target).find('[name=why4]').val();
var why5 = $(event.target).find('[name=why5]').val();
var solution = $(event.target).find('[name=solution]').val();
Problems.insert({
problem: problem,
why1: why1,
why2: why2,
why3: why3,
why4: why4,
why5: why5,
solution: solution,
submitdate: new Date()
});
console.log(problem + why1 + why2 + why3 + why4 + why5 + solution);
Router.go('submitted');
}
});

You need to pass the event as the first parameter to your handler:
submit: function(event) {
event.preventDefault();
...
Otherwise it won't be defined, the default action (a POST) won't be prevented, and your page will reload.

Related

I am trying to set action with variable of the form using jquery. It is correctly setting the action, but on the action page there is nothing

Here is what I am trying to do.
HTML:
<form id="search-form" action="search-results.php?a=" method="get">
<input type="text" id="search-field" autocomplete="off">
<button type="submit" class="btn fs-search"> <i class="fas fa-search"></i> </button>
<ul></ul>
</form>
jQuery:
function nameOfFunction(x, y) {
$("#search-field").val(x);
x = btoa(x);
y = btoa(y);
var ogAction = $("#search-form").attr("action");
var action = ogAction + x + "&b=" + y;
$("#search-form").attr("action", action);
}
Thanks for any solutions.
You're using the form in the wrong way. The action cannot pass values, but is only the address where the values should be sent to.
Values of a form are sent by input elements in the form. The name attribute of the input specifies the key in which the value will be stored on the receiving end.
<form id="search-form" action="search-results.php" method="get">
<!-- name: search -->
<input name="search" type="text" id="search-field" autocomplete="off">
<button type="submit" class="btn fs-search"><i class="fas fa-search"></i></button>
</form>
In your PHP file
$search = $_GET['search'];

Handling multiple buttons with same ajax call

I want to populate multiple forms with multiple buttons on PHP loop from mysql. For each entry, I have 3 buttons to be handled with the same ajax calls. The issue I'm facing is to recognize which button is clicked and added it to the form data to be sent for a PHP file
function() {
var form = $('#PayBillFormForm0'); // will be different for each PHP loop
var formMessages = $('#PayBillResults0'); // will be different for each PHP loop
$(form).submit(function(e) {
e.preventDefault();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: "php/pay.php", // When pay0 button is clicked
url: "php/decline.php", // When decline0 button is clicked
data: formData
})
.done(function(response) {
var messageAlert = response.type;
var messageText = response.message;
var alertBox = '<div class="alert ' + messageAlert + '"style="margin-top:10px;"><d style="font-size:12px; ">' + messageText + '</d></div>';
(formMessages).html(alertBox);
$('#Bill0').delay(3000).fadeOut(2000); //Bill0 is different for each PHP loop
})
});
}
<div class="card" id="Bill0">
<div id="PayBillResults0"></div> <!-- To show Ajax Response Message -->
<div class="card-header">
<h1>XXX</h1>
</div>
<div class="card-body">
<form id="Form0" method="post" action="">
<input name="user" id="user" value="user" type="hidden">
<input name="id" id="id" value="9" type="hidden">
<input name="reciver" id="reciver" value="ppp" type="hidden">
<input name="amount" id="amount" value="333.0" type="hidden">
<input name="tax" id="tax" value="5.0" type="hidden">
<input name="comment" id="comment" value="XXX" type="hidden">
</form>
<div id="Buttons">
<div id="Pay">
<button form="" class="btn btn-success" id="pay0" value="pay0">Pay</button>
</div>
<div id="decline">
<button form="" class="btn btn-danger" id="decline0" value="decline0">Decline</button>
</div>
<div id="Hide">
<button form="" id="hide0" class="btn btn-warning" value="hide0">Hide</button>
</div>
</div>
</div>
</div>
I was able to perform this by labeling each form and labeling each button plus having multiple onclick functions as well as multiple jQuery codes. Any idea how to send clicked button value along with form data to PHP to handle differently.
When looping with PHP, you should NEVER use any id on elements. Use classes instead... Or some data attributes.
You were using unique ids by adding a number to them... Fine. But a class is more useful since you can add one event handler to a class... Instead of n event handlers for element created by the PHP iterations. So it avoid useless code duplication and just make sens.
That is what I suggest you now. Modify your PHP loop so it will create that HTML:
(I removed all that seemed useless)
<div class="card" data-id="0">
<div class="PayBillResults"></div> <!-- To show Ajax Response Message -->
<div class="card-header">
<h1>XXX</h1>
</div>
<div class="card-body">
<form>
<input name="user" value="user" type="hidden">
<input name="id" value="9" type="hidden">
<input name="reciver" value="ppp" type="hidden">
<input name="amount" value="333.0" type="hidden">
<input name="tax" value="5.0" type="hidden">
<input name="comment" value="XXX" type="hidden">
</form>
<div>
<div>
<button class="btn btn-success pay" value="pay">Pay</button>
</div>
<div>
<button class="btn btn-danger decline" value="decline">Decline</button>
</div>
<div>
<button class="btn btn-warning hide" value="hide">Hide</button>
</div>
</div>
</div>
</div>
See the data-id="0"? That is where you will have your form number using the PHP iteration counter.
Now here is the client-side script to use once (do not loop that):
$(document.ready(function(){
// Change the URL to use with Ajax on button click
var AjaxUrl = "";
$(".pay").on("click",function(){
AjaxUrl = "php/pay.php";
$(this).closest(".card").find("form").submit();
});
$(".decline").on("click",function(){
AjaxUrl = "php/decline.php";
$(this).closest(".card").find("form").submit();
});
// Form submit handler
$("form").submit(function(e) {
e.preventDefault();
var card = $(this).closest(".card");
var formData = $(this).serialize();
formData.append("formNumber",card.data("id"));
$.ajax({
type: 'POST',
url: AjaxUrl,
data: formData
})
.done(function(response) {
var messageAlert = response.type;
var messageText = response.message;
var alertBox = '<div class="alert ' + messageAlert + '"style="margin-top:10px;"><d style="font-size:12px; ">' + messageText + '</d></div>';
card.find(".PayBillResult").html(alertBox);
card.delay(3000).fadeOut(2000);
})
});
}); // End ready
So on .pay or .decline button click, the URL to use with the Ajax request is changed accordingly.
(I don't know the use of the third button)
Then the .closest() form submits. And from $(this), which is the <form>, you can find all the related elements you need.
Notice that the form number that is submitting is added to the formData.
You'll retreive it with $_POST['formNumber'].

How to clear textarea field onclick in AJAX?

How to clear textarea field onclick? the problem is I am using AJAX. it won't reload the page. can anyone help me to solve this problem.
<div class="write_comment" style="">
<textarea type="text" id="form_task_comment" name="form_task_comment" value="" placeholder="Write your comment here..."></textarea>
<div class="buttons" style="float:right">
<button id="btn_comment_submit" class="btn btn-default btn hoverable btn-sm btn_comment_submit" style="margin:0rem;" type="submit">Add Comment</button>
</div>
</div>
Try this. Click on button to clear Textarea
$('.clearText').click(function(){
$("#form_task_comment").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clearText">Click Here To Clear Textarea</button>
<br>
<textarea id="form_task_comment">This is textarea</textarea>
In case you do not want to use jQuery. And the other posts above do not mention how to reset your textarea ON send. When you bind onclick, it would clear the text BEFORE sending. Therefore you need to use form onsubmit
var textArea = document.getElementById("form_task_comment")
var form = document.getElementById("form-name")
form.addEventListener("submit", function(event) {
textArea.value = "";
event.preventDefault();
}, false)
<div class="write_comment" style="">
<form id="form-name" >
<textarea type="text" id="form_task_comment" name="form_task_comment" value="" placeholder="Write your comment here..."></textarea>
<div class="buttons" style="float:right">
<button id="btn_comment_submit" class="btn btn-default btn hoverable btn-sm btn_comment_submit" style="margin:0rem;" type="submit">Add Comment</button>
</div>
</form>
</div>
Simply just replace textarea.value with nothing when button is clicked??
html code:
<input type="button" value="Clear Text" onclick="eraseText();"></input>
Javascript:
function eraseText()
{
document.getElementById("form_task_comment").value = "";
}
You can simply clear the value of text area using .val() like this
$("#form_task_comment").val('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="form_task_comment">This is textarea</textarea>
Add this line of code wherever you want to clear the text area

How to disabled button

How can I disable button using javascript or jquery? I want to disable a button if certain action is happened. Example If the order_status is Accepted then the Accept button is disabled. I searched in internet but I dont quiet understand why my code doesn't work for me. I tried both javascript and jquery (See codes below) but nothings happen, the button didn't disable.
HERE MY CODES
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label>
<input type="text" class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
</div>
<button type="button" input style="background-color:#4CAF50;color:white;border-color:#000000;" name="submitDelivered" id="submitDelivered" class="btn btn-success" data-toggle="modal" data-target="#myDeliverModal" onclick="deliver('<?= $_POST['order_id'] ?>')" > Delivered </button>
<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" onclick="accept('<?= $_POST['order_id'] ?>')" > Accept </button>
<button type="button" style="background-color:#FFFF00;color:black;border-color:#000000;" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['order_id'] ?>')"> Send </button>
<button type="button" input style="background-color:#f44336;color:white;border-color:#000000;" name="submitCancel" id="submitCancel" class="btn btn-success" data-toggle="modal" data-target="#myCancelModal" onclick="cancel('<?= $_POST['order_id'] ?>')">Cancel</button>
<script>
function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
document.getElementById("t_order_id").setAttribute("value", order_id);
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementById("t_user_id").setAttribute("value", user_id);
document.getElementById("t_order_date").setAttribute("value", order_date);
document.getElementById("t_order_time").setAttribute("value", order_time);
document.getElementById("t_order_deliveryCharge").setAttribute("value", order_deliveryCharge);
document.getElementById("t_order_totalAmount").setAttribute("value", order_totalAmount);
document.getElementById("t_address").setAttribute("value", address);
document.getElementById("t_coordinates").setAttribute("value", coordinates);
document.getElementById("t_drivers_number").setAttribute("value", driver_number);
document.getElementById("t_order_status").setAttribute("value", order_status);
document.getElementById("ORDER_MODAL_ACCEPT").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_DELIVER").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_CANCEL").setAttribute("value", order_id);
}
function accept() { //THIS IS MY CODE FOR JAVASCRIPT
var x = document.getElementById("order_status").value;
if(x == "Accepted"){
document.getElementById("submitAccept").disabled = true;
}
}
THIS IS MY CODE FOR JQUERY
$(document).on("click", ".submitAccept", function (e) {
$(".submitAccept").attr("disabled", true);
}
I ALSO TRIED THIS
$(function () {
($("#order_status").keyup(function (){
if ($("#order_status").val() == 'Accepted') {
('#submitAccept').prop('disabled',true);
}else{
('#submitAccept').prop('disabled', false);
}
})
)};
);
</script>
My mind is blank, Im struggling right now. I hope you understand me guys. I hope can help me guys with my problem, I needed it so badly for the transaction for our ordering system.
If you are trying to select an element by its id using JQuery you have to use # selector : see jQuery selectors.
If you are using jQuery 1.6+ use prop() instead of attr()
$(document).on("click", "#submitAccept", function () {
$(this).prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label>
<input type="text" class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
</div>
<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" > Accept </button>
Try Below code
$(document).on("click", "#submitAccept", function (e) {
$(this).attr("disabled", true);
}
You can try like this if you want target class
<button type="button" class="accepted" >Accepted</button>
<button type="button" class="not-accepted">Not Accepted</button>
$(document).ready(function() {
$(".accepted").attr("disabled",true);
});
here is js fiddle running example

JQUery change value of variable on button click with return

i am trying to make a questionaire that once completed by the user will give an response dependent on their answer. i decided to do this via making variables for each answer which get +1 dependending on their click. and at the end display the variable with the highest value. seems simple enough but for some reason variables not responding to changes on clicks
heres my code
HTML
<div class="container contentContainer text-center" id="top-Container">
<div class="row">
<div class="col-md-12">
<div id="questions"></div>
<div id="answer"></div>
<div id="buts">
<input id="a1" class="btn btn-success" type="button" value="a">
<input id="b1" class="btn btn-success" type="button" value="b">
</div>
<div id="buts2">
<input id="a2" class="btn btn-success" type="button" value="do you prefer a ">
<input id="b2" class="btn btn-success" type="button" value="b">
</div>
JS
<script>
var ansa ="this is answera";
var ansb ="this is answerb";
//questions//
var Q1 = "do you prefer answerb ?";
var Q2 = "do you prefer answera?";
$("#questions").html(Q1);
for (var i=0; i<15; i++) {
$("#buts"+[i]).hide();
}
//need more diagnosises//
var answera=0;
var answerb=0;
$("#a1").click(function(){
answera+=1;
$("#questions").html(Q2);
$("#buts").hide();
$("#buts2").fadeIn();
});
$("#b1").click(function(){
answera+=1;
$("#questions").html(Q2);
$("#buts").hide();
$("#buts2").fadeIn();
});
//Is it affected by hot or cold//
$("#a2").click(function(){
answerb+=1;
answera+=1;
$("#questions").html(Q3);
$("#buts2").hide();
});
$("#b2").click(function(){
answerb+=1;
$("#questions").html(Q3);
$("#buts2").hide();
});
console.log(answera);
console.log(answerb);
if (answera>answerb) {
$("#answers").html(ansa);
}else {
$("#answers").html(ansb);
}
</script>
$("#questions").html(Q3);
Q3 is not defined
#answers should be changed to #answer, because the id of div that you have assigned, is answer.

Categories

Resources