We Keep Coding

Javascript from processor - unable to debug issues

I have a form that I'm trying to submit and process with javascript using the code outlined below:
Form:
<form id="my_form_id" method="POST" action="my_processor_script.php">
<input type="text" id="form_id_1" name="form_field_1">
<input type="text" id="form_id_2" name="form_field_2">
<input type="text" id="form_id_3" name="form_field_3">
<input class="cbp-mc-submit" type="submit" name="save_settings_button" id="save_settings" value="Save Settings" />
</form>
Script:
<script>
$(document).ready(function(){
var $form = $('form');
$form.submit(function(){
$.post($(this).attr('action'), $(this).serialize(), function(response){
// do something here on success
alert("Form Processed");
},'json');
return false;
});
});
</script>
Processor:
<?php if (isset($post_data['save_settings_button']))
{
$form_field_1 = $_POST['form_field_1'];}
$form_field_2 = $_POST['form_field_2'];}
$form_field_3 = $_POST['form_field_3'];}
}
?>
Once I have the variables I then store them in a database.
The form works great if I just post from the form to the processor script without using the javascript however when I use the javascript nothing happens. I'm obviously doing something very wrong but can work this out at all as I cant see what is being received by the processor. Has anyone got any ideas on how i can get this to work?
It would also be great if I can return the data so that I can see what is being passed to the script as this would help me to debug any issues?

pass js variable to form action

I have a dynamic variable in js. I have to get this variable in my form action.
Here is my code
<script type="text/javascript">
$(document).on('click', 'span', function () {
var AutoPath = $(this).attr('automationpath');
// or var AutoPath="Redirect.jsp";
}
</script>
<form action="%{#AutoPath}" method="get">
<input name="AutoRun" id="AutoAction" value="Auto Action" type="submit" />
</s:form>
But this does not redirect to the Redirect.jsp page
If I manually set as below, it will redirect to the Redirect.jsp
<s:set var="formAction" value="'Redirect.jsp'" />
<s:form action="%{#formAction}" >
<input name="AutoRun" id="AutoAction" value="Auto Action" type="submit" />
</s:form>
Can somebody help me with this.

In your javascript code, you are not inserting the automation path into your markup.
Instead the code should look something like this:
$(document).on('click', 'span', function () {
//saving the value to variable
var AutoPath = $(this).attr('automationpath');
//Inserting value int he form
$('form').attr('action', autoPath);
})

I don't know what you are trying to do but if you want to change the action attribute of a form element you simply do the following:
$('form').attr('action','Redirect.jsp');

Post form via javascript?

I'm working on my first php project and I appear to have hit a milesone, I'm trying to get my form to post via javascript so that the webpage does not have to refresh but I cannot see to get it to work, any help appreciated :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function say(){
var theusername = $("#message").val();
$.post("q3/say.php", {
message: message,
}
{
return false;
}
}
</script>
<form><input type="text" name="message"><input type=BUTTON value="Submit" onClick="say()"></form>

Seems like you haven't closed properly curly braces and there is no need for return false as you already use type="button" on form. See below code :
function say(){
var theusername = $("#message").val();
$.post("q3/say.php", { message: theusername }, function ( data ) {
// populate data here
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="message">
<input type=BUTTON value="Submit" onClick="say()">
</form>
You might need to read this POST. The callback function is optional in case you want to populate or doing something after request being made

My page goes to the onclick event before submit

I have used submit and added an onclick event to it and I want to call the controller method save for it, and after that I want to redirect my page to another method of the controller for that I have used onclick where I have used opener.href = "". My problem is that sometimes it goes to the save page but oftenly it goes to the onclick event first. I have searched it on google and all the methods tell me to the way I did but something is not right. Please help me.
Here is the code:
<input id="m_bs_btnNext" type="submit" value="Save" onclick="closeWindow();" />
and the onclick function is:
function closeWindow() {
window.opener.location.reload();
window.opener.location.href = "ViewDesign";
setTimeout("window.close()", 800);
}

I would have your close window happen after the save by using onsubmit on your form:
<form id="form" action="/save" onsubmit="saveAndCloseWindow()">
<-- Other form elements -->
<input id="m_bs_btnNext" type="submit" value="Save" onclick="closeWindow();" />
</form>
Then your save function would look like this:
function saveAndCloseWindow() {
$.ajax({
url: $('#form').attr('action'),
method: 'POST',
success: function() {
window.opener.location.reload();
window.opener.location.href = "ViewDesign";
setTimeout("window.close()", 800);
}
})
}

how to submit the form without refreshing the page

I am trying to add product in to the cart using jQuery and AJAX. The situation is that I am getting more then 30 forms that are generated dynamically using foreach loop. after page loading i get product list but need to add only one product in to the cart , and dont want reload the page , so i am using AJAX. please help me how can i achieve this.
Most important thing is when i tried without <form> tag , the value of productId always goes 1 because its the first value of id attribute, and saves product in to the cart whose id is one. So I am using <form>.
this is code (its a sample code) :
<form id="addToCartForm" action="" method="post">
<input type="hidden" id="productId" value="${products.productid}">
<button id="btnSubmit">Add to Cart</button>
</form>
<form id="addToCartForm" action="" method="post">
<input type="hidden" id="productId" value="${products.productid}">
<button id="btnSubmit">Add to Cart</button>
</form>
<form id="addToCartForm" action="" method="post">
<input type="hidden" id="productId" value="${products.productid}">
<button id="btnSubmit">Add to Cart</button>
</form>
I already tried lots of things, like jquery.form.min.js, but nothing is going on as according just i like want.
please help. thnx in advance.
Edited
script.js:
$(document).ready(function(){
$(".addToCart").click(function(){
$.post('addToCart.htm', {productId: $('input[type=hidden]#productIdId').val()},
function(message){
$("#message").html(message);
}
);
});
});

You are looking for something like:
$(document).on('click', '#btnSubmit', function(){
var value = $(this).prev().val();
$.ajax({
url: 'path/to/server/script',
type: 'post',
data: { productid: value },
success: function(){
alert('succeeded');
}
});
});
Anyway, you have to use classes instead ids if you have same kind elements. An id is an identifier, so it must to be unique.

You could do something like this:
$("#addToCartForm").on("submit", function(e) {
var $form = $(this);
e.preventDefault();
e.stopPropagation();
$.ajax({
method: "POST",
action: $form.attr("action"),
data: $form.serialize()
}).done(function() {
...
});
});
UPDATE: Oh! and yeah, the IDs of your forms should be unique.
UPDATE 2: Without forms
<a class="addToCart" href="#" data-productid="${products.productid}">Add to Cart</a>
JavaScript:
$(".addToCart").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$.ajaxPost({
action: "addToCart.html",
data: {productId: $(this).data("productid")}
}).done(function() {
...
});
});