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

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();
}
});

Related

How to add multiple image in opencart 2.3

I have creating a option call small. In that option i want to add multiple image. My query is how can i assign a name for hidden text
Here i have already did one functionality in addOptionValue function create button
function addOptionValue(option_row)
{
some code here
html += ' <td class="text-right" id="multi-image'+ option_value_row +'"><img src="<?php echo $placeholder; ?>" alt="" title="" data-placeholder="<?php echo $placeholder; ?>" /><input type="hidden" name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][image_option][' + option_value_row + '][inner_image]" value="" id="input-image' + option_value_row + '" /><button id="add-image'+option_value_row+'" type="button" onclick="addOptionImage('+option_value_row+');" data-toggle="tooltip" title="<?php echo $button_option_value_add; ?>" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>';
}
<script>
var image_row = <?php echo $image_row; ?>;
function addOptionImage(image_row)
{
var html = '<img src="<?php echo $placeholder; ?>" alt="" title="" data-placeholder="<?php echo $placeholder; ?>" />';
html +='<input type="hidden" name="product_option[' + image_row + '][product_option_value][' + image_row + '][image_option][' + image_row + '][inner_image]" value="" id="input-image' + image_value_row + '" />';
$('#multi-image'+image_row+'').append(html);
image_row++;
}
</script>
Here how can i store this multiple images? please help me in this.
I have creating a same module in Opencart 2.3.
Please see my following code:
<script>
var image_row = <?php echo $image_row; ?>;
var image_rows = "";
function addOptionImage(option_value_row,image_row)
{
var child = $(".multi_image"+image_row).length;
var html = '<div class="row text-center"><img src="<?php echo $placeholder; ?>" alt="" title="" style="width: 50px;" data-placeholder="<?php echo $placeholder; ?>" /> ';
html +='<input type="hidden" name="product_option[' + option_value_row + '][product_option_value][' + image_row + '][image_option][' + child + '][inner_image]" value="" id="input-image'+ image_row +'' + image_row + '' + child + '" class="multi_image'+image_row+'" />';
html += '<button type="button" onclick="$(this).tooltip(\'destroy\');$(\'#thumb-image'+ image_row +''+ image_row +'' + child + '\').remove();$(\'#input-image'+ image_row +''+ image_row +'' + child + '\').remove();$(\'#btn-remove'+ image_row +''+ image_row +'' + child + '\').remove();" data-toggle="tooltip" rel="tooltip" title="Remove" class="btn btn-danger" id="btn-remove'+ image_row +'' + image_row +''+ child + '"><i class="fa fa-minus-circle"></i></button></div>';
$('#multi-image'+image_row+'').append(html);
// console.log(image_row);
image_row++;
image_rows++;
}
//console.log(image_rows);
</script>
And use imploded and explode to store the image value in database.

submit a comment form with jquery that has multiple id

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]');
})

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>';

Sum values Javascript

Here http://webmark.pt/sharepics/orders.png is the sales order layout (./sharepics/add.zip the full code) that I need to customize.
Problem:
Dynamically sum the cells between size 39 and 50, and put the value in the Pairs (quantity).
Already managed to add the lines, but the result is added to the lines immediately below.
The code that does this operation:
var newTr = $('<tr id="row_' + count + '"></tr>');
newTr.html('<td><input name="product' + count + '" type="hidden" value="' + item_code + '"><input class="span5 tran" name="item' + count + '" type="text" value="' + item_code + '"></td>
.......
<td><input class="input-block-level text-center" name="sort' + count + '" type="text" value="" id="sort-' + count + '" onClick="this.select();"></td>
<td><input class="input-block-level text-center" name="size39' + count + '" type="text" value="" id="size39-' + count + '" onClick="this.select();"></td>
......
<td><input class="input-block-level text-center" name="size50' + count + '" type="text" value="" id="size50-' + count + '" onClick="this.select();"></td>
<td><input class="input-block-level text-center" name="quantity' + count + '" type="text" value="1" id="quantity-' + count + '" onClick="this.select();"></td>
<td><input class="span2 tran" style="text-align:right;" name="unit_price' + count + '" type="text" id="price-' + count + '" value="' + item_price + '"></td>
<?php echo '<td><input class="span2 tran2" name="cart\'+ count +\'" type="text" value="" required="required" data-error="' . $this->lang->line("cart") . ' ' . $this->lang->line("is_required") . '"></td>';
if (DISCOUNT_OPTION == 2) {
echo '<td><select class="span2 select tran" data-placeholder="Select..." name="discount\' + count + \'" id="discount-\' + count + \'">';
foreach ($discounts as $discount) {
echo "<option value=" . $discount->id;
if ($discount->id == DEFAULT_DISCOUNT) {
echo ' selected="selected"';
}
echo ">" . $discount->name . "</option>";
}
echo '</select></td>';
}
?>
<td><input class="input-block-level text-center" name="subtotalpares' + count + '" type="text" value="" id="subtotalpares" disabled onClick="this.select();"></td>
<td><i class="icon-trash tip del" id="' + count + '" title="Remove this Item" style="cursor:pointer;" data-placement="right"></i></td>');
newTr.prependTo("#dyTable");
count++;
an++;
total += parseFloat(item_price);
$("input[id^=size]").keyup(function () {
var sum = 0;
$("input[id^=size]").each(function () {
sum += (parseInt(this.value) ? parseInt(this.value) : 1);
});
$("input[id^=quantity]").val(sum);
});
I look forward to some help!

Create select box dynamically with jQuery

i am creating a dynamic dropdowns based on a scenario i need to. i am wondering how it possible to keep the states of those added drop downs dynamically when a page is loading after submit button is clicked.
i am able to stote a variable in jquery and check whether form is submitted or not and if submitted to load back the previously dynamically added dropdowns (html select box) but even though i load them back still i have a problem of getting the previously selected values of those dynamic dropdowns.
I have created a fiddler. http://jsfiddle.net/jBJSw/8/
My form
<form>
<div id="TextBoxesGroup">
<div id="TextBoxDiv1">
<label>Textbox #1 :</label>
<input type="text" id="textbox1">
</div>
</div>
<input type="button" value="Add Button" id="addButton">
<input type="submit" value="submit Button" id="subButton">
</form>
Script
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 10) {
alert("Only 10 allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Select #' + counter + ' : </label>' +
'<select id="select' + counter + '" ><option value="' + "val" + ' ">"' + "desc2" + '"</option><option value="' + "val2" + ' ">"' + "desc" + '"</option><option value="' + "val3" + ' ">"' + "desc3" + '"</option>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
Appreciate if any help on finding a way to get the previously selected values after form submission. (this is needed because when a form is submitted with errors, these selected values should be same but now it refreshes and comes to default. also in a view scenario also this should be preloaded)
You will have to send back the selected value to the page from server side in the querystring or post header. then select the option accordingly in jquery on the base of the the value sent back.
Sorry for getting late have trouble in my work. Here's a possible solution for your problem.
DOM:
<form id="myform" method="post"> <!--adding id attribute-->
<div id="TextBoxesGroup">
<div id="TextBoxDiv1">
<label>Textbox #1 :</label>
<input type="text" id="textbox1">
</div>
<!--check if POST is established-->
<?php if($_POST): ?>
<?php if(count($_POST['mySelect']) < 0 ): ?>
<?php
//Recreate your select DOM
$arr = $_POST['mySelect'];
foreach($arr as $ind => $val){
echo '<select>';
echo '<option val="val" ' . ($val == "val" ? "selected" : "") . '>desc2</option>';
echo '<option val="val2" ' . ($val == "val2" ? "selected" : "") . '>desc</option>';
echo '<option val="val3" ' . ($val == "val3" ? "selected" : "") . '>desc3</option>';
echo '</select>';
}
?>
<?php endif; ?>
<?php endif; ?>
</div>
<input type="button" value="Add Button" id="addButton">
<input type="submit" value="submit Button" id="subButton">
</form>
SCRIPT:
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 10) {
alert("Only 10 allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Select #' + counter + ' : </label>' +
'<select id="select' + counter + '" ><option value="' + "val" + ' ">"' + "desc2" + '"</option><option value="' + "val2" + ' ">"' + "desc" + '"</option><option value="' + "val3" + ' ">"' + "desc3" + '"</option>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
//adding hidden inputs
$('#myFORM').on('submit', function(){
$('#myFORM select').each(function(){
slct = $('<input type="hidden" name="mySelect[]" value="' + $(this).val() +'">');
$('#myFORM').append(slct);
});
});
});

Categories