submit a comment form with jquery that has multiple id - javascript

I have the the following form below in jquery
' <form class="form comment_form" role="form" id="'+this._id+'" name="comment-form" action="/users/reply" method="post">'+
'<div class="form-group">'+
'<input type="hidden" name="post_id" value="'+this._id+'"/> ' +
'<input class="form-control col-lg-12 red" style="width:100%" type="text" name="user_comment" placeholder="Your comments" />'+
'</div>'+
'<div class="form-group">'+
'</div>'+
'</form>' +
I am trying to submit the form but it has a specific id. The form is just an input field and i would just like to submit it when the user press enter. Similar to Facebook. My problem is how do i let the user submit a specific form by just pressing the enter button?

id need to be unique.Also a form with submit button is useful to trigger submit on hitting enter
'<form class="form comment_form" role="form" id="' + this._id + '" name="comment-form" action="/users/reply" method="post">' +
'<div class="form-group">' +
'<input type="hidden" name="post_id" value="input_' + this._id + '"/> ' +
'<input class="form-control col-lg-12 red" style="width:100%" type="text" name="user_comment" placeholder="Your comments" />' +
'</div>' +
'<div class="form-group">' +
'</div>' +
'<div><button type="submit">Submit</button></div>'+
'</form>'
Alternately if there is no submit button , you can use javascript/jquery to submit the form
$("body").find("#yourFormId").find('input').keypress(function(e) {
// check for enter/return
if (e.which == 10 || e.which == 13) {
$("body > #yourFormId").submit();
}
});

I successfully found the answer to my question. what in did was that i used the this keyword to find other elements of the form.
var form = $('form.comment_form');
form.on('submit',function(e){
e.preventDefault();
var input = $(this).find('input[type=text]'),
comment_id = $(this).find('input[name=post_id]');
})

Related

Submitting form to PHP with dynamic inputs

I have a form which is empty in HTML file and I'm adding input elements to it using javascript but when I submit the form to PHP file (Controller.php) it doesn't send anything
HTML File
<form id="test" action="Controller.php" method="POST">
<!-- QUESTIONS WILL APPEAR HERE-->
<div id="questions"></div>
<input type="submit" value="Finish">
</form>
JS File
var d1 = document.getElementById('questions');
d1.insertAdjacentHTML('beforeend',
"<div class='question'>"
+ "<h4 id='questionTitle'>Question Title goes here...</h4>"
+ '<ul>'
+ '<li id="ans1"><input type="radio" id="1st-option" name="selector">'
+ '<label for= "1st-option" >Answer 1</label>'
+ '<div class="check"></div>'
+ '</li>'
+ '<li id="ans1"><input type="radio" id="2nd-option" name="selector">'
+ '<label for= "2nd-option" >Answer 2</label>'
+ '<div class="check"></div>'
+ '</li>'
+ '<li id="ans1"><input type="radio" id="3rd-option" name="selector">'
+ '<label for= "3rd-option" >Answer 3</label>'
+ '<div class="check"></div>'
+ '</li>'
+ '<li id="ans1"><input type="radio" id="4th-option" name="selector">'
+ '<label for= "4th-option" >Answer 4</label>'
+ '<div class="check"></div>'
+ '</li>'
+ '</ul>');
PHP File
print_r($_POST);
The result of $_POST is an empty array Array ( ), I have tried to add elements to the form statically (in HTML) and it worked, but I can't do it from JS,IDK why this happens
Your inputs have no value attribute :
Change :
<input type="radio" id="1st-option" name="selector">
to
<input type="radio" id="1st-option" name="selector" value="your_value">
For the "Answer 1" the value could be "answer1" for exemple, or "1st-option" like the id that you've set, or anything you want. But you must have something in it. Else it will be empty.

Remove DIV dynamically with JQuery

i have a problem to reference an identifier of a DIV. I allow to add a div with a text field and a button to delete the text field, and i set a id to the DIV like an array with this code:
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso['+$count+']>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default" id="eliminacorso['+$count+']" aria-label="Elimina">' +
'<i class="fa fa-times" aria-hidden="true"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
So.. if i press on the botton at the at the side of the text area, i'll call a function that will remove it.
The skeleton of the function is the follow:
$('#eliminacorso[]').on('click', function() {
$count --;
$('#corso[]').remove();
});
So my ask is: How can i insert between the square brackets the right identifier of the div?
A better choice is:-
1.Instead of using id use button class
2.And then use event delegation concept like below:-
$(document).on('click','.btn-default',function(){
$(this).closest('.form-group').remove();
});
Reference:- https://api.jquery.com/closest/
Use as below the script that add DIV. Remove '[' from id attribute from div tag and anchor tag as below
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso'+$count+'>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default" id="corso'+$count+'" aria-label="Elimina">' +
'<i class="fa fa-times" aria-hidden="true"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
And then script to get the clicked id and remove the matched div on click of button as below
$('.btn').on('click', function() {
var selectedId = $(this).attr('id');
$('#'+selectedId).remove();
});
Try below code.It may help you
var $count =0
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso_'+$count+'">' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso_'+ $count + '"/>' +
'<a class="btn btn-default" id="eliminacorso_'+$count+'" aria-label="Elimina" onclick="remove(this);">' +
'Test' +
'</a>' +
'</div>' +
'</div>' +
'');
});
function remove(aRemove){
console.log(aRemove);
var divid = aRemove.id.replace("eliminacorso_","corso_");
$("#" + divid).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="aggiungi"> Click ME </button>
<div id="corsi">
</div>
https://codepen.io/vino4all/pen/vZrQEX
Try this code.
<button id="aggiungi">Click</button>
<div id="corsi"></div>
Add a class attribute to the <a> tag.
var $count = 0;
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso['+$count+']>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default delBtn" id="eliminacorso['+$count+']" aria-label="Elimina"><span>X</span>' +
'<i class="fa fa-times" aria-hidden="false"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
$('#corsi').on('click', '.delBtn', function() {
console.log('this :'+$(this));
$count --;
$(this).parent().parent().remove();
});
Notice the usage of on function.
It should be like below
$('#corsi').on('click', '.delBtn', fun);
You can use something like this
var count = 3;
$('button').click(function(){
count--;
$($('.corso')[count]).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="corso">1. <input type="text" /></div><br />
<div class="corso">2. <input type="text" /></div><br />
<div class="corso">3. <input type="text" /></div><br />
<br />
<button>Remove</button>
Try this:
var $count = 0
$('#aggiungi').on('click', function () {
$count++;
let divId = `input_div_${$count}`;
let html = `<div class="form-group row" id="${divId}">
<label class="col-sm-2 col-form-label" for="corsi">Input ${$count}</label>
<div class="col-sm-10 form-inline">
<input type="text" class="form-control" id="input" name="${divId}"/>
<button type="button" id="remove_btn_${$count}" aria-label="Elimina" onclick="remove('${divId}');">
remove
</a>
</div>
</div>`;
$('#main-div').append(html);
});
function remove(removeDivId) {
console.log(removeDivId);
$("#" + removeDivId).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="aggiungi"> Click ME </button>
<div id="main-div">
</div>

Symfony Redirect for some action

I use this dashboard and when I pushed button "Add New" create dynamics button save, I find this button in js file this dasboard:
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[5] + '">';
jqTds[6].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[6] + '">';
jqTds[7].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[7] + '">';
jqTds[8].innerHTML = '<a class="edit" href="??????????">Save</a>';
jqTds[9].innerHTML = '<a class="cancel" href="?????????">Cancel</a>';
}
and my question
I have routing for add new developer how I put my routing this "href=" or maybe redirect for my creatAction ????
If you want use that way,
put hidden input and then get value via jQuery
HTML
<input type="hidden" id="form-url" val="{{ path('my_route') }}">
in edit row fundtion
jqTds[9].innerHTML = '<a class="cancel" href="'+$('#form-url').val();+'">Cancel</a>';

jQuery getting back NaN and [object Object] from variables

I have some problems getting my script to work. My script calculates the number of orders and the weight of each order. My form is actually created by javascript when pressed the "New Line" button. I am trying to make it so whenever 3 values (number of items, number of items in a box, number of boxes per order) are filled in, it automatically gives you the total number of orders. Also, when given the weight of a single item, it gives you the total weight of the order. All this happens on keyup using jquery. I need help only in the javaScript part. I handle my form with AJAX later on and everything worked but it broke when I tried to implement this.
Whenever I use alert() to see what values my code is assigning to the updateForm() function I get for alert($totalitems) -> [object Object] and alert($weightperpal) -> NaN. Could anybody help me solve this? Heres my code:
HTML:
<button id="addLine" type="submit" class="btn red">Add Line</button>
JavaScript:
$("#addLine").click(function(e){
e.preventDefault();
lineNum++;
var cont = '<div class="control-group">'+
'<label class="control-label">Total # of items</label>'+
'<div class="controls">'+
'<input type="text" placeholder="" class="m-wrap medium orderField" name="totalitems'+lineNum+'" id="totalitF" no="'+ lineNum +'"/>'+
'<span class="help-inline" style="font-size:10px; font-style:italic;">Not mandatory</span>'+
'</div>'+
'</div>'+
'<div class="control-group">'+
'<label class="control-label">Items per box</label>'+
'<div class="controls">'+
'<input type="text" placeholder="0" class="m-wrap medium orderField" name="ipb'+lineNum+'" id="itemspbF" no="'+ lineNum +'"/>'+
'<span class="help-inline" style="font-size:10px; font-style:italic;">#</span>'+
'</div>'+
'</div>'+
'<div class="control-group">'+
'<label class="control-label">Boxes per order</label>'+
'<div class="controls">'+
'<input type="text" placeholder="0" class="m-wrap medium orderField" name="bpp'+lineNum+'" id="boxesppF" no="'+ lineNum +'"/>'+
'<span class="help-inline" style="font-size:10px; font-style:italic;">#</span>'+
'</div>'+
'</div>'+
'<div class="control-group">'+
'<label class="control-label">Weight per Item</label>'+
'<div class="controls">'+
'<input type="text" placeholder="0" class="m-wrap medium orderField" name="wpi'+lineNum+'" id="weightpiF" no="'+ lineNum +'"/>'+
'<span class="help-inline" style="font-size:10px; font-style:italic;">#</span>'+
'</div>'+
'</div>'+
'<div class="control-group">'+
'<label class="control-label">Total number of Orders</label>'+
'<div class="controls">'+
'<input type="text" placeholder="" class="m-wrap medium orderField" name="pallets'+lineNum+'" id="palletsF" no="'+ lineNum +'"/>'+
'<span class="help-inline" style="font-size:10px; font-style:italic;"># of pallets</span>'+
'</div>'+
'</div>'+
'<div class="control-group">'+
'<label class="control-label">Weight per order</label>'+
'<div class="controls">'+
'<input type="text" placeholder="" class="m-wrap medium orderField" name="wpp'+lineNum+'" id="weightppF" no="'+ lineNum +'"/>'+
'<span class="help-inline" style="font-size:10px; font-style:italic;">Total number of boxes</span>'+
'</div>'+
'</div>'+
'</div>';
$(document).on('keyup','.weightpiF',function(){
var valueField = $(this).attr('no');
updateFormRoe(valueField);
});
$(document).on('keyup','.weightppF',function(){
var valueField = $(this).attr('no');
updateFormRoe(valueField);
});
$(document).on('keyup','.itemspbF',function(){
var valueField = $(this).attr('no');
updateFormRoe(valueField);
});
$(document).on('keyup','.boxesppF',function(){
var valueField = $(this).attr('no');
updateFormRoe(valueField);
});
function updateFormRoe(number){
alert(number);
var $totalitems = $('#totalitF'+number);
alert($totalitems);
var $itemspb = $('#itemspbF'+number).val();
var $boxespp = $('#boxesppF'+number).val();
var $weightperitem = $('#weightpiF'+number).val();
var $itemsinpallet = $itemspb * $boxespp;
var $totalpals = $totalitems / $itemsinpallet;
var $weightperpal = ($itemsinpallet) * $weightperitem;
alert($weightperpal);
if($totalitems !== '' && $itemspb !== '' && $boxespp !== ''){
if($totalpals == Infinity){
$('#palletsF'+number).val('0');
}else{
$('#palletsF'+number).val($totalpals);
}
$('#weightppF'+number).val($weightperpal);
}
}
Thanks in advance!
None of your selectors like $('#totalitF'+number) will work, because you're not appending numbers to your IDs. Instead of:
id="totalitF" no="'+ lineNum +'"/>'
it should be:
id="totalitF'+ lineNum +'" data-no="'+ lineNum +'"/>'
You shouldn't create your own attributes. If you want to add additional attributes to an element, use data- attributes. Then in jQuery you can access this as
$(this).data('no')
to get the value. Use this in your other functions in place of $(this).attr('no').

jquery .submit() method doesn't reaload the page

I have a form that i want to submit it throughout jquery .. but submit method doesn't send the request or reloading the page. any help?
in the html code there is no <form></form> tags , just text box and <button></button>
$('#search_btn').click(function() {
e.preventDefault();
if ($('#search_txtbx').val().length > 0) {
$('<form action="<?= base_url('search'); ?>" method="POST">' +
'<input value="ls_subject" name="table" type="hidden">' +
'<input value="<?= $type; ?>" name="type" type="hidden">' +
'<input value="' + $('#search_txtbx').val() + '" name="search_string" type="hidden">' +
'</form>').submit();
}
});
You have to append the form to the DOM, then submit the form :
$('#search_btn').click(function() {
if($('#search_txtbx').val().length > 0) {
$("body").append('<form style="display:none;" action="<?= base_url('search'); ?>" method="POST" id="bghdfrm">'+
'<input value="ls_subject" name="table" type="hidden">' +
'<input value="<?= $type; ?>" name="type" type="hidden">' +
'<input value="'+$('#search_txtbx').val()+'" name="search_string" type="hidden">' +
'</form>');
$("#bghdfrm").submit();
}
return false;
});
Try following...
Demo
$('#search_btn').click(function (e) {
e.preventDefault();
if ($('#search_txtbx').val().length > 0) {
$("body").append('<form style="display:none;" action="<?= base_url(search); ?>" method="POST" id="bghdfrm">' +
'<input value="ls_subject" name="table" type="hidden">' +
'<input value="<?= $type; ?>" name="type" type="hidden">' +
'<input value="' + $('#search_txtbx').val() + '" name="search_string" type="hidden">' +
'</form>');
$("#bghdfrm").submit();
}
});

Categories