javascript using variable value in document.nameofformtosubmit.submit() - javascript

How would I submit the id into the form name to submit a certain form?
function submitComment(id)
{
alert('comment on song id: '+[id]+'');
document.postcomment.submit();
}
I want to be able to submit.. postcomment43 or postcomment 42.. whatever the value of ID is joint to postcomment
Tried this:
function submitComment(id)
{
alert('comment on song id: '+[id]+'');
var formToSubmit = 'postcomment' + id;
alert( ''+ formToSubmit +'' );
document.formToSubmit.submit();
}
creates the formToSubmit name correctly but doesn't fire. how do I properly place the formToSubmit variable in the document.form.submit
It seems that just putting in formToSubmit is going to look for the form with name formToSubmit

Give your forms an unique ID:
<form id="postcomment42" action="..."></form>
<form id="postcomment43" action="..."></form>
<form id="postcomment44" action="..."></form>
Then use the getElementById function to get the desired form:
function submitComment(id)
{
var formToSubmit = document.getElementById('postcomment' + id);
if (formToSubmit != null) formToSubmit.submit();
}
Although I suspect there's something wrong with your design. Why do you have multiple forms? Can't you have a single form to submit a comment like:
<form id="postcomment" action="comment?id=42" method="post"></form>
Could you give a little more details on what the interface looks like and what you are trying to achieve?

If your forms only have names, and not ID's, then you could do the following:
// by name
function submitComment(id)
{
var theForm = 'postcomment' + id;
document.forms[ theForm ].submit();
}
The are many, many ways to submit a form via JS, but considering your question I think this is the most applicable manner.

Related

How to get the json object from an form exception some especial name?

I have some input in my form,now I want to get the json object from the form without some input named point,What's wrong with my code?I have to remove them.It seems not work for not() function.How to fix my code?
<form id="myform">
<input name='student' value='a'/>
<input name='student' value='b'/> '
...
<input name='point' value='90'/>
<input name='point' value='95'/>
</form>
Now I only want to submit the student data to the server.So I write the code:
var data = $('#myform').not("input[name='point']").serializeArray();
var objParam = {};
$.each(data, function(i, v) {
objParam[v.name] = v.value;
});
but the result still have point data.What's wrong with not() function?
breaking down your code $('#myform') selects your form, in this case, only one object, then you filter that object with .not("input[name='point']") but there is only one object which is the form itself.
You want to filter the form's children instead, so just add .children() like this:
var data = $('#myform').children().not("input[name='point']").serializeArray();
var objParam = {};
$.each(data, function(i, v) {
objParam[v.name] = v.value;
});
Hope this will help you.
$('#myform input[name!=point]').serializeArray()
Your selector is faulty.
$('#myform').not("input[name='point']").serializeArray()
...says, "Serialise the form with ID 'myForm' which is not also an input and has the name 'point'.
Rather, you mean: "Serialise the form with ID 'myForm' but omit its child inputs with name 'point'.
Here's a non-jQuery way, using native FormData.
//get the form as form data
var fd = new FormData(document.querySelector('#myform'));
//delete any elements pertaining to [name=point]
fd.delete('point');
//et voila; this shows we retain only the student fields
for (var key of fd.keys()) alert(key);

Extracting data from array after HTML form submission (keypress event)

So I have a HTML form with a keypress event listener recording the charCode of the key pressed and then convert that charCode to a String of the letter related to the key.
Each time a letter is entered to the form, a new entry is created in input_array[].
I have each letter in the alphabet stored as a SVG within JS variables in a different part of my main.js file and I would like to be able to read what letters have been stored in input_array[] and then display the SVG appropriate to that letter on a new page once the form has been submitted.
I've tried using the method below to extract the data from the array, but it fires on the first keypress and therefore I can't get all of the array data to then display the 4 letters. I also feel like there has to be a more efficient way.
var letter_one = input_array[0];
var letter_two = input_array[1];
var letter_three = input_array[2];
Here's a JSFiddle, to show a basic version of what I'm trying to do. If you open the console you will see how input_array[] is being created.
I'm still very new to this language, so any help would be greatly appreciated.
As you suspected, this is much simpler than you're making it :)
When the form is submitted you can just snag the value from the input:
function handleSubmit() {
var val = document.getElementById('user_input').value;
validate(val);
console.log(val);
var letter_one = val[0];
var letter_two = val[1];
var letter_three = val[2];
var letter_four = val[3];
return false; // stops POST for dev
}
https://jsfiddle.net/1htpm6ag/
That being said, if you are actually doing this on a POST then on the page you are POSTing to you'll have to snag this from the POSTed form data, which is entirely different. Are you trying to do this in client side JS or a POST handler?
If I am understanding you correctly is sound like you want to do the following.
On Page 1 user enters text into textfield.
On Submit send that text to page 2.
On Page 2 convert that text into an array of letters to associate with SVG paths to display.
If the above is the case you need a lot less javascript.
Page 1: Should only have your form with your text box and a submit button so the data is submitted to the next page using the GET method.
Page 2: Here is where you will need the Javascript to retrieve that data sent across and process it into your array of letters. I would also filter for non-letter characters as well.
I have created an example form in the code below that submits to itself and then the javascript script tag will pull the variable from the url and process it into an array of letters. In your case you would move the Javascript to page 2.
<script type="text/javascript">
(function(){
function getParamValue(param) {
var urlParamString = location.search.split(param + "=");
if (urlParamString.length <= 1) return "";
else {
var tmp = urlParamString[1].split("&");
return tmp[0];
}
}
function isLetter(c) {
return c.toLowerCase() != c.toUpperCase();
}
var user_input = getParamValue('user_input');
var char_array = null;
if(user_input !== ''){
char_array = user_input.split("");
char_array = char_array.filter(isLetter);
for(var i in char_array){
console.log('Char ' + i + ' = ' + char_array[i]);
}
}
})();
</script>
<body>
<form id="user_form" class="" action="?" method="GET">
<input type="text" name="user_input" />
<input type="submit" value="submit">
</form>
</body>

How do you pass html input text into a javascript function as a parameter?

My code is below. I would like the player to input their name into the html form and for this value to be submitted into the javascript scorecard class so that this.players = "name". How would I best do this? I have been trying to use jquery but am having no success.
HTML:
<section class="name1-2-12">
<form class='name' action=''>
<input type="text" name="name" placeholder="NAME">
<input type='submit' name='submit'>
</form>
</section>
JAVASCRIPT:
var Scorecard = function() {
this.players = 0;
};
Scorecard.prototype.addPlayer = function(name) {
this.players = name
};
The jQuery solution is nice, but a bit overdressed for the occasion.
Plain JavaScript:
You aren't really accustomed to JavaScript I guess:
var Scorecard = function() {
this.players = 0;
};
Scorecard.prototype.addPlayer = function(name) {
this.players = name
};
This code does two things:
It creates a constructor function called Scorecard. With this function you can create instances (simply put copies) of Scorecard.
You add a function to the Scorecard master object by using the prototype. Everything added via prototype will be shared by all instances of Scorecard
To sum this up. This isn't the way to go for the functionality you want. Consider this:
var Scorecard = function() {
this.players = 0;
this.playerList = []; //create a new Array() using shorthand [];
this.addPlayer = function(name)
{
this.players++; //add one to the player count.
this.playerList.push(name); //add a player to the playerlist using array.push().
}
};
What is this code doing:
It creates a master object called Scorecard.
A public variable is assigned called this.players. Public because it can be called upon outside the function Scorecard.
The same is done for the array: this.playerList.
A public method is added. Note this function only applies to the instance and is not shared with all instances.
The method addPlayer does two things. It takes name as argument. First it adds one to the public variable this.players by using ++, which means add one. Secondly it adds a player to the array list by using the method push. Which appends an item to an array.
Now we need to create a submit event. When the user submits the form, a player is added to the Scorecard.
var scorecard = new Scorecard(); //first create an instance of Scorecard
document.querySelector("form").addEventListener("submit", formAddPlayer, false);
function formAddPlayer(e)
{
e.preventDefault(); //e is the submit event. preventDefault stops it from actually posting the form, causing the page to reload.
var name = e.target.querySelector("input[name='name']").value //get the value from the input element.
scorecard.addPlayer(name);
//show the results
alert("Player amount: " + scorecard.players + "\nPlayers: \n -" + scorecard.playerList.join("\n -") ); //show the results
}
What is the code doing:
It creates a new instance (copy) of Scorecard named scorecard.
That instance has two properties: players and playerList and one method: addPlayer.
Attach an onsubmit event to the form. I used document.querySelector for this. Since your page only has one form, we can select the first form that the querySelector function comes across. We use addEventListener to attach the event. When the submit button is clicked the function formAddPlayer will fire. Note that formAddPlayer is passed as a reference not as a function call.
The actual formAddPlayer function: the argument e refers to the event. In this case a submit event. The actual submitting is cancelled using e.preventDefault(). The we use querySelector on the form element (retrieved using the target, which is the form, of the submit event). We select the input element with the name : name and retrieve it's value using value. We pass this value to the method addPlayer of the instance scorecard.
Al together:
function Scorecard() {
this.players = 0;
this.playerList = []; //create a new Array() using shorthand [];
this.addPlayer = function(name) {
this.players++; //add one to the player count.
this.playerList.push(name); //add a player to the playerlist using array.push().
}
};
var scorecard = new Scorecard(); //first create an instance of Scorecard
function formAddPlayer(e) {
e.preventDefault(); //e is the submit event. preventDefault stops it from actually posting the form, causing the page to reload.
var name = e.target.querySelector("input[name='name']").value //get the value from the input element.
scorecard.addPlayer(name);
//show the results
alert("Player amount: " + scorecard.players + "\nPlayers: \n -" + scorecard.playerList.join("\n -")); //show the results
}
document.querySelector("form").addEventListener("submit", formAddPlayer, false);
<section class="name1-2-12">
<form class='name' >
<input type="text" name="name" placeholder="NAME">
<input type='submit' name='submit'>
</form>
</section>
http://jsfiddle.net/55u2b81j/
With jQuery:
var aScorecard = new Scorecard();
$('form.name').on('submit',function(e){
e.preventDefault();
var name = $(this).children('input[name="name"]').val();
aScorecard.addPlayer(name);
});

Referencing a form assigned to a variable in jQUERY

I have a form with id='form1' as well as another one with 'form2'. On submit, i want to pass both forms as objects to a single validate function which can validate them. I am confused on how to do this.
If i do something like
var form = $('#form1');
Validate(form);
how do i access the text-fields of the variable form?
i don't want to write duplicate validate functions as both forms are ALMOSt similar.
You can do following also...
A Complete example is here...
function validate(formid){
var form = $("#"+formid);
var name = form.find("#name");
var number = form.find("#number");
alert(name.val());
alert(number.val());
}
validate("form1");
validate("form2");
Try .find. Your form will serve as the context and you could reuse it for different forms.
See below:
var form = $('#form1');
function Validate(form){
var field1 = form.find(".field1");
}
With the name of the fields, you can do this:
function Validate(form) {
form = form[0]; // raw element
if (check_syntax(form.name.value)) { doSomething(); }
if (check_syntax(form.email.value)) { doSomething(); }
if (check_syntax(form.anotherfield.value)) { doSomething(); }
}
If every field in the form has a name, you can access it via form.fieldName or form['fieldName'].
Regards.
Assuming both forms are similar:
ValidateForm($("#form1, #form2"));
function ValidateForm(forms){
forms.each(function(){
$(this).find('input[type=text]').each(function(){
//Do something to validate text field
})
$(this).find('input[type=checkbox]').each(function(){
//Do something to validate checkbox
})
})
}

jQuery hidden value not being sent

Is there a certain or special of dealing with hidden fields in jQuery? I am using a hidden input field and am not receiving a value. Obviously, my code is incorrect and would be grateful if someone could show me the error. many thanks
<input id="customer" name="customer" type="hidden" value="<?php echo $_SESSION['kt_idcode_usr']; ?>" />
$('#submit').click(function () {
var name = $('.uname').val();
var customer = $('.customer').val();
var department = $('#department').val();
var email = $('.email').val();
var position = $('.position').val();
var feedback = $('.feedbacknew').val();
var data = 'uname=' + name +
'&customer=' + customer +
'&department=' + department +
'&email=' + email +
'&position=' + position +
'&feedbacknew=' + feedback;
$.ajax({
type: "POST",
url: "feedback.php",
data: data,
success: function (data) {
$("#feedback").get(0).reset();
$('#message').html(data);
//$("#form").dialog('close');
$("#flex1").flexReload();
}
});
return false;
});
$('.customer').val(); ???
not ., #
result
$('#customer').val(); // works
try changing
var customer = $('.customer').val();
to
var customer = $('#customer').val();
you don't have such a class customer anywhere in this code
This line of code is wrong
var customer = $('.customer').val();
you have defined your hidden field by id, not by class, so you would need to use a # instead of a . on the selector
var customer = $('#customer').val();
The line you have here:
var customer = $('.customer').val();
...is looking for elements with a class called "customer". You don't have any such element. You have an element with an id of "customer". I suspect it will work if you simply change this line to:
var customer = $('#customer').val();
I'd suggest doing this for the rest of your input fields as well. Generally you'll want to identify them by id when collecting values to submit the form. Identifying them by class is typically more for things like styling different kinds of fields, binding event handlers, and so on.
note the difference:
alert($('.customer').val());
and
alert($('#customer').val());
. is for classes, see http://api.jquery.com/category/selectors/
I can see that for customer you are using jquery selector ".customer" which searches for an element with class name "customer" but your input has id equal to this, so:
var customer = $('#customer').val();
may I suggest serialize()?

Categories