We Keep Coding

Form not getting submitted using jquery

I am trying to validate user using oAuth 2.0 which works fine and am obtaining user information from google using jquery which I want to send to the next page. So to do that, I am making form programmatically using jQuery and submitting using same. But unfortunately, form is not getting submitted. I have seen various answers on stack-overflow and have tried to implement using that things but none of them is working.
Here is my code..
customButtonRender.js
function onSuccess(googleUser){
console.log('Logged in as '+googleUser.getBasicProfile().getName());
var profile = googleUser.getBasicProfile();
submit_form(profile);
}
var submit_form = function(profile){
console.log(profile.getId());
console.log(profile.getName());
console.log(profile.getImageUrl());
console.log(profile.getEmail());
var user_url = "localhost:8080/NUConnect_JSP/jsp/home.jsp";
var val_form = $('<form data-ajax="false" method="POST" id="val_form" action="' + user_url + '">'+
'<input type="text" name="user_name" value="' + profile.getName() + '">'+
'<input type="text" name="user_email" value="' + profile.getEmail() + '">'+
'<input type="submit" name="user_submit" id="user_submit">'+
'</form>');
$('body').append(val_form);
// $("#val_form").submit();
// $("#val_form")[0].submit();
// $("#user_submit").click();
document.getElementById("val_form").submit();
console.log("After submit");
};
I have included customButtonRender.js file in head section.
As you can see I have tried various methods to submit form written in comments but none of them worked.
All the logs are printed successfully.

Do one thing if your data is not so confidential then pass that information in your url like this
window.location.href = "localhost:8080/NUConnect_JSP/jsp/home.jsp?user_name="+profile.getName()+"&user_email="+ profile.getEmail();

JSF param POST parameter not retrieving

I've been looking an answer, but I don't find anything.
I got a JSF page with a button. This button call a JavaScript function :
function postAdd(id) {
var quant = document.getElementById("hell:quantite");
$('<form action="addto.xhtml" method="POST">' +
'<input type="hidden" name="productkey" value="' + id + '">' +
'<input type="hidden" name="howmany" value="' + quant.value + '">' +
'</form>').submit();
}
This works fine, I've tested it.
But in my addto.xhtml page, when I call param.productkey and param.howmany, I got nothing.
I used this method on other page and works fine but here, it doesn't work...
Any idea ?
Thanks.

The answer was to add to form inside the JSF page directly and get all parameters with #{function(param[form:idOfInput]}

Can I exclude a input field from form.reload?

I've got a form.reload piece of JS that adds the chosen form dropdown to a variable, and to the head of the document so I can pass variables to the next page.
Sadly, my form reload is removing input fields that have been inputted.
Here's my simple JS reloading the form:
function reload(form) {
var val=form.cat.value;
var val2=form.cat2.value;
var val3=form.val3.value;
var val4=form.val4.value;
var val5=form.val5.value;
self.location='mypage.php?val=' + val + '&val1=' + val2 + '&val2=' + val3 + '&val4=' + val4 + '&val5=' + val5;
}
My call:
<select name='val' onchange=\"reload(this.form)\">
It's removing (reloading) my inputs. Is there a way around this?
I want to keep the form input when reloading the form.

You could try something like this in your php file
<input type='text' name='cat' value='<?php print $_REQUEST[val]; ?>'>
an alternate suggestion to add all the values to the header is this
function reload(form) {
self.location='mypage.php?' + $(form).serialize();
}

Converting pairs of input elements into json

I have a simple ui which has a link that says "add item". When this is clicked, a pair of input boxes appears below it. If it is clicked again, yet another pair appears. I'm trying to think of the best way to generate these elements and turn it into some sort of json array of key value pairs (the first input element in each pair being the key and the second input element being the value).
Right now I just have a counter and I generate the ids using it, such as (in the click event of the "add item" link):
$('#features').append('<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" /><a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input id="feature-description-' + self.featureCount + '" type="text" name="asdf" />');
I don't know what to use as the "name" attributes in order to make it easy to create a json array from them.

you can do something like this without using id attributes.
$('#features').append('<div><input type="text" />
<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input type="text" /></div>');
And your javascript,
var yourArray=[];
$('#yourButton').click(function(){
$('#features div').each(function(){
var div=$(this);
var k=$('input:first',div).val();
var v=$('input:first',div).next().val();
yourArray.push({key:k, value: v});
});
});

It doesn't matter what you use for a name attribute, so long as there name and description names are different. Let's say that these elements are all appended to a form with the id myform. Give each pair its own wrapper object. Here, I've used a div, but a fieldset is equally appropriate.
$('#features').append(
'<div class="feature-div">
'<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" />' +
'<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a>' +
'<input id="featurena-description-' + self.featureCount + '" type="text" name="asdf" />' +
'</div>');
Now, it's possible to extract each pair sensibly:
var myarray = [];
$('#myform .feature-div').each(function(i, v) {
myarray.push([
$('input[name=name]', v).val(), $('input[name=description]', v).val()]);
});
Or however you want the data to be presented.

Calendar Control on Dynamically created forms

I’m trying to accomplish a small task where I have one single Form ITERATED with a Date textinput which gets its Value by a Javascript DatePicker control.
My problem is, the datepicker on all these dynamically created forms only prints value on the first textbox element in the first form, how do I give it Dynamic reference to forms[x] text box element.
My form names are being generated Dynamically as form1, form2, form3, form[x], how do I reference the inner element of that particular form whose DatePicker is being clicked.
you can download the Zip file which has the datepicker & the HTML page for the Dynamic forms from here enter link description here

function addElement() {
intTextBox = intTextBox + 1;
intTextArea = intTextArea + 1;
var contentID = document.getElementById("new-field-back");
var newTBDiv = document.createElement("div");
newTBDiv.onclick=function(){ current=this; }
newTBDiv.setAttribute("id","strText"+intTextBox);
newTBDiv.innerHTML = "<br/><br/><form method='post' name='form" + intTextBox + "'><input
id='date_of_event' name='date_of_event" + intTextBox + "' class='date-pick' value=''><div
class='date-text'><a href='#' onclick=displayDatePicker('date_of_event" + intTextBox +
"');>Calendar</a></div></div><input type='submit' value='Update'><input type='button'
onclick='removeElement()' value='Remove'></form><br/><br/>";
contentID.appendChild(newTBDiv);
}
this is the correct function

if you are sending all data using one click of a button then you need to add a hidden field on the html form containing the total number of dates to be sent.
$num=$_POST['no_of_dates'];
$i;
for ($i=1;$i<=$num;$i++)
{
$_field_name="date_of_event".$i;
$_date_get=$_POST[$_field_name];
//now you can insert the $_date_get variable into the database by running a query.
}