i have inserted one hidden form in the page using jquery and i am submitting the form using jquery on button click event.The hidden form is getting submitted in firefox but it does not get submitted in chrome.
Following is the form i have inserted using jquery on document.ready function.
$('#leftnav').after(
"<tr><td><form name='login1'" +
"action='https://abc.com/FormPost/Submit' method='post'" +
"id='login' >" +
"<input type='hidden' name='MerchantIdentifier' value='abc' />" +
"<input type='hidden' name='Url'" +
"value='http://chcnq.chxcg.servertrust.com/one-page-checkout.asp'/>"+
"<input type='hidden' name='Description'" +
"value='Volusion Order' />"+
"<input type='hidden' name='Data' value='' />"+
"<input type='hidden' name='TransactionIdentifier'"+
"value='12' />" +
"<input type='hidden' name='Amount' value='' />"+
"<input name='Token' type='hidden' value='" + token + "' />"+
"<input type='hidden' name='ErrorUrl' />" +
"</form></td></tr>");
and on button click i have written following code:
$("#btnSubmitOrder").click(function() {
$("#login").submit();
});
Please can you advise why it is not working in chrome browser.
try this:
$("#btnSubmitOrder").click(function() {
$("form[name=login1]").submit();
});
Based on my comments:
It is generally a bad practice to submit two forms on one action, but:
1) You can add target iframe to your both forms. That way Browser does not get redirected by submittin either of them.
or
2) you can prevent default behavior and send data to #login form url by using $.ajax and then (on callback) call submit on the first form.
Use this javascript code.
$("#btnSubmitOrder").click(function() {
document.forms['login1'].submit();
});
Related
I want to submit a form using an href tag and load that submitted form inside a pop-up.
<form method='post' action='" . $paymentURL . "' id='frmPaymentDtl' onsubmit='target_popup(this)'>
<a id=\"submit_full_payment\" onclick=\"target_popup(get_form(this).submit())\">Make Full Payment</a>
<input type='hidden' name='customer_id' value='" . $customer_id . "'/>
<input type='hidden' name='account_id' value='" . $account_id . "'/>
<input type='hidden' name='invoice_number' value='" . $invoice_model[0]->number . "'/>
<input type='hidden' name='detail_id' value='" . $bean->id . "'/>
<input type='hidden' name='header_id' value='" . $_GET['record'] . "'/>
<input type='hidden' name='detail_number' value='" . $bean->detail_id . "'/>
<input type='hidden' name='amount' value='" . number_format($bean->amount,2) . "'/>
<input type='hidden' name='description' value='" . $paymentSchedule->description . "'/>
<input type='hidden' name='invoice_id' value='" . $invoice_model[0]->id . "'/>
<input type='submit' name='submit_btn' class=\"listViewTdToolsS1\" value='Submit Bank/Credit Payment'/>
</form>
<script type='text/javascript'>
function get_form( element )
{
while( element )
{
element = element.parentNode
if( element.tagName.toLowerCase() == \"form\" )
{
//alert( element ) //debug/test
return element
}
}
return 0; //error: no form found in ancestors
}
function target_popup(form) {
window.open('', 'formpopup', 'width=800,height=600,resizeable,scrollbars');
form.target = 'formpopup';
}
</script>
What happens here is that the pop-up is displayed but the form is loaded on the main page, when I want it to be loaded inside the pop-up page. Also, I can only use link here to access the form as the submit buttons are not allowed.
You are submitting the form and then passing the return value of calling submit() to target_popup().
You need to first call target_popup() and pass it the form, then you need to submit the form.
onclick="var frm = get_form(this); target_popup(frm); frm.submit()">
That said, you would be better off using a regular submit button and applying CSS to make it look the way you want.
Ajax code to submit details and get result:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
$('#submit_full_payment').click(function () {
var url = 'YOUR_URL';
$.ajax({
type: 'POST',
url: url,//url to post data
data: "customer_id=" + $('name=customer_id').val() + "&account_id=" + $('name=account_id').val(),//add other form fields here
success: function (data) {//process data here
alert(data);
},
error: function (data) {
alert(data);
}
});
});
step2: Use the Dialog to display the form and link. refer link this will hide the form on main page and use ajax as given above to process form and retain in the pop-up only. If you do not want to remain in pop-up above step can be ignored.
You need to use Ajax. Here is the list what you need to do:
Stop Form's submit event (which you can use e.preventDefault();)
Send data's with ajax and then
Do what ever you want ajax's success or error callbacks..
Please let me know if you need any further help :)
This was my previous answer and i get a mines for this so let me explain it..
1-) You dont need to use window.open()for a pop-up page. You can simply create a modal(which is a bootstrap element : http://getbootstrap.com/javascript/#modals) and display whatever you want in modal. Which in your case it will be your form element again if i understand your question correctly.
2-) If you want to stop page's reload on submit use this:
$('#frmPaymentDtl').submit(function(e)
{
e.preventDefault();
//Take form's all data with this
var data = $('#frmPaymentDtl').serialize();
//Or you can assign all id's to a new variable if you'd like that way.
//After this open your modal which you have a form inside that.
//then write all data into input's from "data" variable.
});
I know this one is kinda different but i know this will work for you as well.
One more thing. If you want to send this "data" variable to another page you need use Ajax.
If you don't know how check this: jQuery AJAX submit form
Oww by the way if you will try to use my way please delete your form's onclick event. :)
So what I'm doing is after an AJAX call, I need to dynamically create a table row containing two hidden inputs, one regular input, and two buttons that have the same functionality as the buttons already on the page when it loads. My problem is that the form I try to serialize is empty, and I'm not sure why.
Here's how I'm generating my html:
function addNewPlayerRow(player, tid) {
var html = "<tr> <form role='form' name='editplayerform'>";
html += "<td>";
html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
html += "</td></form>";
html += "<td>";
html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(this)'>Save Name</button>";
html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(this)'>Remove</button>";
html += "</tr>";
$(html).hide().appendTo("#playersbody").fadeIn(300);
}
And here's the onclick function for buttons of the deleteplayerbutton class.
function deletePlayerSender(button) {
var form = $(button).parent().prev().prev();
console.log($(form));
console.log($(form).serialize());
}
When I click the button, the console logs and empty serialization form. Anyone know why?
A simple test like:
console.log($(button).parent().prev().prev().tagName);
should reveal which element you are targeting, which at first look seems to me the <tr> element and not the form. Furthermore, as other suggested you should revisit your html structure. Note that you forgot the closing </td> before the closing </tr>
The button has a reference to the form it belongs to:
<button type="submit" onclick="deletePlayerSender(this)">Remove</button> //add the type submit, which mimics the behaviour of input
var form = $(button).get(0).form; //access the DOM element using get(0)
//alternatively
var $form = $(button).parents('form'); //parents() in plural. Return the form element as jQuery element
console.log(form, $form);
console.log($(form).serialize());
console.log($form.serialize());
check https://jsfiddle.net/dk7qbfpd/. I did some corrections to your code and now is working.
there are some changes in both methods, add and delete
function addNewPlayerRow(player, tid)
{
var html = "<tr><td><form role='form' name='editplayerform" + player._id + "' id='editplayerform" + player._id + "' >";
html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
html += "</form></td>";
html += "<td>";
html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(" + player._id + ");'>Save Name</button>";
html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(" + player._id + ");'>Remove</button>";
html += "</td></tr>";
$(html).hide().appendTo("#playersbody").fadeIn(300);
}
function deletePlayerSender(playerId)
{
var form = $("#editplayerform" + playerId);
console.log($(form).serialize());
}
You can't put html where you want,
Form element can't be placed between Table blocks which means it can only
wrap a table, or be placed within td.
Also try replace
.parent().prev().prev()
with
$(button).parent().parent().find('form')
that will support structure changes
Working code below:
function addNewPlayerRow(player, tid) {
var html = "<tr>";
html += "<td><form role='form' name='editplayerform'>";
html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
html += "</form></td>";
html += "<td>";
html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(this)'>Save Name</button>";
html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(this)'>Remove</button>";
html += "</tr>";
$(html).hide().appendTo("#playersbody").fadeIn(300);
}
function deletePlayerSender(button) {
var form = $(button).parent().parent().find('form');
console.log($(form));
console.log($(form).serialize());
}
Thanks for all the help, everyone! I managed to fix it by putting the form inside the <td> and then finding the form starting at the button by doing this:
var form = $(button).parent().prev().children("form");
I have the following script constructing a form like so:
var sHTML = "";
sHTML += "<form id='formScore' method='post' action='q_process3.aspx’>";
sHTML += " ";
sHTML += "<input type='hidden' id='Title' name='Title' value= " + title + ">";
sHTML += "<input type='hidden' id='Result' name='Result' value= " + resultstatus + ">";
sHTML += "<input type='hidden' id='ScorePctg' name='ScorePctg' value= " + scorepctg + ">";
sHTML += "<input type='hidden' id='ScorePoints' name='ScorePoints' value= " + scorepoints + ">";
sHTML += "<input type='hidden' id='PassingPctg' name='PassingPctg' value= " + passingpctg + ">";
sHTML += "<input type='hidden' id='PassingPoints' name='PassingPoints' value= " + passingpoints + ">";
sHTML += "<br><input type='submit'><br>";
sHTML += "<form>";
document.getElementById("divEmail").innerHTML = sHTML;
document.getElementById("formScore").submit();
When this submits however, the action/url it points to is:
q_process3.aspx’%3E%20%3Cinput%20type=
So it looks like it is immediately concatenating the 1st input tag onto the the action property of the form element in the string. What am I doing wrong? Or overlooking? I know it's something simple.
In your code typo error
sHTML += "<form id='formScore' method='post' action='q_process3.aspx’>";
^ ^
sHTML += "<form>"; // ought to be </form>
Whether there is reason to submit form immediately?
document.getElementById("formScore").submit();
If I take your code and run it in jsFiddle, I get a long, mangled form action.
If I replace your action's ending smart quote with a plain old tick quote (I'm not sure of the correct namings), the form action is set properly.
Change your form tag string to:
sHTML += "<form id='formScore' method='post' action='q_process3.aspx'>";
That should do it.
I am dynamically creating input of type text in my form with a value. I can see the new input, but every time I'm sending this through ajax to my php file, it doesn't get the new created input.
The input is put into a table, which is in a form.
I tried with javascript and jQuery, but the two examples do not use the same data, because the javascript way was only for testing purpose
Javascript way
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","moi");
input.setAttribute("disabled","disabled");
input.setAttribute("value","HEY");
$('#actor_form').append(input);
jquery way
var r_name = "<td>" + "<input type='text' name='role[]' disabled value=" +$('#role_name').val()+ " ></td>" ;
var a_name = "<td>" + "<input type='text' name='name[]' disabled value=" +$('#actor_list').val()+ "></td>";
var r_gender = "<td>" + "<input type='text' name='gender[]' disabled value=" +$('#role_gender').val()+"></td>";
var tr = a_name + r_name + r_gender;
$('#actor_table').append("<tr>"+tr +"</tr>");
Sending of data
$.post("assign_roles.php", $("#actor_form").serialize() ,function(data){
alert(data);
});
PHP file
echo $_POST['element'];
The inputs are disabled, so they won't be included in the serialized data.
Ref: http://api.jquery.com/serialize/
"Note: Only "successful controls" are serialized to the string."
Ref: http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
"Controls that are disabled cannot be successful."
id car make sales
1 panamera porsche 100
2 italia ferrari 200
3 volante astonmartin 300
4 avantador lamborghini 400
5 slk mercedes 500
So guys, i have this simple table in my database. And i'm gonna echo this table in a while loop.
<ul>
<?php
$query = "SELECT * FROM inplace LIMIT 0, 6";
$result = mysql_query($query) or die ('Query couldn\'t be executed');
while ($row = mysql_fetch_assoc($result)) {
echo '<li class="editable" id="'.$row['id'].'">'.$row['car'].'</li>';
echo '<li class="editable2" id="'.$row['id'].'">'.$row['make'].'</li>';
}
?>
</ul>
The idea is to update this table using jQuery in-place editor. So here is the code-
$(document).ready(function()
{
$(".editable").bind("dblclick", replaceHTML);
$(".editable2").bind("dblclick", replaceHTML2);
$(".btnSave, .btnDiscard").live("click", handler);
function handler()
{
if ($(this).hasClass("btnSave"))
{
var str = $(this).siblings("form").serialize();
$.ajax({
type: "POST",
async: false,
url: "handler.php",
data: str,
});
}
}
function replaceHTML()
{
var buff = $(this).html()
.replace(/"/g, """);
$(this).addClass("noPad")
.html("<form><input type=\"text\" name=\"car\" value=\"" + buff + "\" /> <input type=\"text\" name=\"buffer\" value=\"" + buff + "\" /><input type=\"text\" name=\"id\" value=\"" + $(this).attr("id") + "\" /></form>Save changes Discard changes")
.unbind('dblclick', replaceHTML);
}
function replaceHTML2()
{
var buff = $(this).html()
.replace(/"/g, """);
$(this).addClass("noPad")
.html("<form><input type=\"text\" name=\"make\" value=\"" + buff + "\" /> <input type=\"text\" name=\"buffer\" value=\"" + buff + "\" /><input type=\"text\" name=\"id\" value=\"" + $(this).attr("id") + "\" /></form>Save changes Discard changes")
.unbind('dblclick', replaceHTML);
}
}
);
This is an in-place edit code i got it from the internet and i just tore it down to basic level just to understand the codes. Dont worry bout the update query, its is in "handler.php".
The problem here is, i have to write separate function for each column. In this case, i have to write a separate function to update 'car' column, separate function to update 'make' column and goes on. I dont think this is the correct method to do. Because, here i just have 3 columns. What if i had 10 to 15 columns? I dont think writing 15 functions is the correct method. And "$(this).html()" takes only one form's value. Please help.
Modify your PHP script to generate HTML similar to this:
<table>
<tbody>
<tr data-id="1">
<td data-col="car">panamera</td>
<td data-col="make">porsche</td>
<td data-col="sales">100</td>
</tr>
</tbody>
</tbody>
The id of the database row corresponding to each HTML table row is specified with data-id in each tr. And each td specifies to which DB column it corresponds using data-col.
Using these information you can pass enough information back to the PHP script that updates the database. So essentially when a cell is clicked, you can get its column name using:
$(this).data('col')
And you can get the ID for its row using:
$(this).parent('tr').data('id')
Then you can pass these to the PHP page that updates the DB.
EDIT 1:
You can use ul/li instead of table/tr/td. You can also use class=car, class=make, etc. instead of data-col='car', data-col='make', etc. if you are using an older version of jQuery that does not support HTML5-style data- attributes.
EDIT 2: Complete solution
Change your while loop to this:
while ($row = mysql_fetch_assoc($result)) {
echo '<li class="editable" data-id="'.$row['id'].'" data-col="car">'.$row['car'].'</li>';
echo '<li class="editable" data-id="'.$row['id'].'" data-col="make">'.$row['make'].'</li>';
}
As you can see we store the database row ID in data-id and the database column name in data-col.
Now with this setup you would only need one handler:
function replaceHTML()
{
var rowId = $(this).data('id');
var colName = $(this).data('col');
var buff = $(this).html().replace(/"/g, """); // Are you sure you need this?
$(this).addClass("noPad")
.html("<form><input type=\"text\" name=\"" + colName + "\" value=\"" + buff + "\" /> <input type=\"text\" name=\"buffer\" value=\"" + buff + "\" /><input type=\"text\" name=\"id\" value=\"" + rowId + "\" /></form>Save changes Discard changes")
.unbind('dblclick', replaceHTML);
}
$(".editable").bind("dblclick", replaceHTML);
Finally, always try to write readable code! Please! :)
EDIT 3: JSFiddle
Please see this live solution. It shows how you can get the column name and row ID. You just have to adopt it to work with your PHP script.