The post data is separated by commas. I need to add a delimiter (concatenate) such as '|' to all the input fields (text, textarea, select, etc) to the post data submitted by a form, but I do not want to change the value of the fields themselves in the form.
<form action="somepage.php" method="post">
<div class"line">
<input type="text" class="sometext" name="desc" />
</div>
<div class"line">
<input type="text" class="sometext" name="desc" />
</div>
<div class"line">
<input type="text" class="sometext" name="desc" />
</div>
<input type="submit" id="submitbutton" />
</form>
I tried the below code, but it changes the data in the form itself
$(document).on('click', '#submitbutton', function(){
$('.sometext').each(function(){
var descVal=''
var descVal = $('.sometext').val() + '|';
$(this).val(descVal);
});
});
When using $('.sometext').val() you're not specifying exactly which element you want the value of. Change:
var descVal = $('.sometext').val() + '|';
To:
var descVal = $(this).val() + '|';
Alternatively you can simply use:
$(this).val(this.value + '|');
$(document).on('click', '#submitbutton', function(){
$('.sometext').each(function(){
$(this).val(this.value + '|');
});
});
Related
I'm trying to add another input field as the user clicks on the "add another field" button.
Although it works perfectly, there's this minor issue as the name in the input field supposed to add +1 to the earlier name value in the additional field, which returns as a string instead of int.
Upon clicking on "Add Additional field" a new input appears with name value as name="asin1" and further on goes as name="asin11" & name="asin111". How can I add it up as a count?
And on the other hand, how can I know on the backend page how many fields were actually user added using PHP.
Any help is greatly appreciated.
$('.extra-fields-customer').click(function() {
$('.customer_records').clone().appendTo('.customer_records_dynamic');
$('.customer_records_dynamic .customer_records').addClass('single remove');
$('.single .extra-fields-customer').remove();
$('.single').append('Remove Fields');
$('.customer_records_dynamic > .single').attr("class", "remove");
$('.customer_records_dynamic input').each(function() {
var count = 1;
var fieldname = $(this).attr("name");
$(this).attr('name', fieldname + count);
count++;
});
});
$(document).on('click', '.remove-field', function(e) {
$(this).parent('.remove').remove();
e.preventDefault();
});
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<div class="customer_records">
<input type="text" class="input" id="fname" name="asin" required placeholder="ASIN/FSIN or Wesite Link of the product">
<a class="extra-fields-customer button" href="#">Add Another Field</a>
</div>
<br>
<div class="customer_records_dynamic"></div>
First solution:
defined count & fieldname out of function .each
$('.extra-fields-customer').click(function() {
$('.customer_records').clone().appendTo('.customer_records_dynamic');
$('.customer_records_dynamic .customer_records').addClass('single remove');
$('.single .extra-fields-customer').remove();
$('.single').append('Remove Fields');
$('.customer_records_dynamic > .single').attr("class", "remove");
var count = 1;
var fieldname='asin';
$('.customer_records_dynamic input').each(function() {
$(this).attr('name', fieldname + count);
count++;
});
});
$(document).on('click', '.remove-field', function(e) {
$(this).parent('.remove').remove();
e.preventDefault();
});
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<div class="customer_records">
<input type="text" class="input" id="fname" name="asin" required placeholder="ASIN/FSIN or Wesite Link of the product">
<a class="extra-fields-customer button" href="#">Add Another Field</a>
</div>
<br>
<div class="customer_records_dynamic"></div>
Another solution:
edit input field Like:
<input type="text" class="input" id="fname" name="asin[]" required placeholder="ASIN/FSIN or Wesite Link of the product">
now you don't need to count your inputs and use this.
$('.customer_records_dynamic input').each(function() {
$(this).attr('name', fieldname + count);
count++;
});
just edit your back-end and receive input data asin as Array
Since you are using PHP on the backend, you really do not need to keep track of the names like you would for a set static number of fields.
Have a look at this:
<input type="text" name="asin[]" />
<input type="text" name="asin[]" />
<input type="text" name="asin[]" />
// php will convert it to an array in the backend as $_POST['asin']
In your PHP you'll want something like:
<?php
foreach ($_POST['asin'] as $asinInputValue) {
// iterate over each input's value
echo $asinInputValue . "<br>";
}
HTML:
<form id=f1>
<div>
<input id=text>
</div>
</form>
<form id=f2>
<div>
<input id=text>
</div>
</form>
jQuery:
$('form').submit(function(){
var id=$(this).attr('id');
var text=$('#'+id+'#text').val();
alert(text);
});
Result:
Undefined
I need to select the input but I dont know how,
This question is Corrected
You need a space between the parts of the selector:
var text = $("#" + id + " #text").val();
But there's no need to use the ID at all:
var text = $(this).find("#text").val();
Also, IDs are supposed to be unique, you can't have id="text" multiple times. You should use class="text", and then it would be:
var text = $(this).find(".text").val();
$('form').submit(function(){
var text=$(this).find(".text").val();
console.log(text);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id=f1>
<div>
<input class=text>
</div>
</form>
<form id=f2>
<div>
<input class=text>
</div>
</form>
First of all you shouldn't use multiple id's! ID should be unique.
In your example, you pass wrong selector to jQuery function, it should be:
var text = $('#' + id + ' #text'); (missing space between selectors)
I have a code (down below) that has a text-box and a comment section. I also have a button where it's supposed to add that comment. I don't know the code that will post the comment below the comment section. This is my code:
<div id="comments">
<fieldset><legend>Post Your Comments!</legend>
Name: <input type="textbox" name="name"><br><br>
</fieldset><br>
<textarea rows="10" cols="30" placeholder="Your Comments!"></textarea>
<button>Add!</button>
I'm sure you'll want to do some kind of server-side saving of the comments, but the code below answers your question by adding the elements to the DOM. You'll see some changes to your code, including some IDs and proper closing of input and br tags.
HTML:
<div id="comments">
<fieldset>
<legend>Post Your Comments!</legend>Name:
<input type="textbox" id="txtName" name="name" />
<br />
<br />
</fieldset>
<br />
<textarea id="txtComments" rows="10" cols="30" placeholder="Your Comments!"></textarea>
<button id="btnAdd">Add!</button>
</div>
<div id="postedComments"></div>
JavaScript:
$(document).ready(function () {
$('#btnAdd').on('click', function (event) {
event.preventDefault();
// Create new HTML string containing name & comment
var newComment = '<hr /><div class="name">' + $('#txtName').val() + '</div>' +
'<div class="comment">' + $('#txtComments').val() + '</div>';
// This creates a new jQuery object containing newComment
// and appends it to the posted comments section
$(newComment).appendTo('#postedComments');
// Clear input
$('#txtComments').val('');
$('#txtName').val('');
});
});
Demo: http://jsfiddle.net/BenjaminRay/85k8y6eo/
If you want to post the comments to the server and only add them to the DOM after they have been saved on the server, look into jQuery's post() (or other similar AJAX functions). https://api.jquery.com/jquery.post/
Something along these lines (in pure JavaScript):
window.onload = function() {
var addButton = document.getElementById("add");
addButton.addEventListener("click", addComment);
var theDiv = document.getElementById("comments");
function addComment() {
var name = document.getElementById("name").value;
var comments = document.getElementById("post").value;
var newPara = document.createElement("P");
newPara.innerHTML = "<u>" + name + "</u><br/>" + comments;
theDiv.appendChild(newPara);
}
};
<div id="comments">
<h3>Post Your Comments!</h3>
Name:
<input type="textbox" name="name" id="name">
<br/>
<br/>
<textarea id="post" rows="10" cols="30" placeholder="Your Comments!"></textarea>
<br/>
<button id="add">Add!</button>
</div>
Hi I've found a Javascript function I'm quite fond of which send the user to a page which depends on what they've entered into the text fields and want to implement into my new website. Only issue is this code only places one input fields text and I want 2!
Being quite new at this I could do with a little help understanding how to achieve this.
http://www.example.com/input1/*input2*.php
is what I want it to output.
Here is the code I' working with.
<script type="text/javascript">
function getURL(val){
base = 'http://www.example.com/';
exten = '.php';
var split = val.split(" ")
valup = split[0].toUpperCase();
valup2 = valup.replace(/ /, "");
location = base + valup2 + exten;
return false;}
</script>
<form id="form1" name="form1" method="post" action="" onsubmit="return getURL(this.url.value)">
<label>
<input type="text" id="suggest1" maxlength=4 size="4" style="color: #fff;" name="url" />
</label>
<label>
<input type="submit" class="button" name="Submit" value="GO" />
</label>
</form>
You would need to get the value of both input, and it's best done before the submit button.
var formElem = document.getElementById('form1');
var input1 = document.getElementById('suggest1');
var input2 = document.getElementById('suggest2');
formElem.onsubmit = function() {
location = 'http://example.com/' + input1.value + '/' + input2.value + '.php';
};
I have a form with some input checkboxes. For example:
<input type="checkbox" name="felhasznal_1" id="felhasznal_1" onclick="felhasznal(this)">
<input type="checkbox" name="felhasznal_2" id="felhasznal_2" onclick="felhasznal(this)">
<input type="checkbox" name="felhasznal_3" id="felhasznal_3" onclick="felhasznal(this)">
I have hidden value for a form:
<input type="hidden" name="felhasznalas" value="">
My form is named like this:
<form method="post" name="ujpartner_ceg" enctype="multipart/form-data" id="ujpartner_ceg">
And I want to add a masked id for the value of felhasznalas. But I have 2 forms with the same inputs, so that's why I named the forms, and I want to access to them by getelementByid using the form name.
Here is my javascript (generated by php):
function felhasznal() {
document.ujpartner_ceges.getElementById('felhasznalas').value = '|x|';
if (document.ujpartner_ceges.getElementById('felhasznal_1').checked) {
document.ujpartner_ceges.getElementById('felhasznalas').value = document.ujpartner_ceges.getElementById('felhasznalas').value + '1|x|';
}
if (document.ujpartner_ceges.getElementById('felhasznal_2').checked) {
document.ujpartner_ceges.getElementById('felhasznalas').value = document.ujpartner_ceges.getElementById('felhasznalas').value + '2|x|';
}
if (document.ujpartner_ceges.getElementById('felhasznal_3').checked) {
document.ujpartner_ceges.getElementById('felhasznalas').value = document.ujpartner_ceges.getElementById('felhasznalas').value + '3|x|';
}
}
What did i do wrong?
EDIT: I get this error:
TypeError: document.ujpartner_ceges is not a function.
NOTICE: I have a form with the same inputs named ujpartner_magan!
first, I would use document.getElementById without the "ujpartner_ceges."
and the main problem is that your inputs don't have IDs, if you use the IDs exactly like the names your function will work as intended.
This might be a problem: onclick="felhasznal(this)"
But your function takes no parameter...
function felhasznal() {
Add a parameter to function:
function felhasznal(myCheckbox) {
or
remove the this from the onclick handler.
your hidden input has no ID just a name.
use <input type="hidden" id="felhasznalas" value=""> instead.
The ID must be unique for the DOM (page) not just the form, so if you have several forms you must prefix the control eg: <input type="hidden" id="form1_felhasznalas" value="">.
Then use document.getElementById instead of document.ujpartner_ceges.getElementById.
I would also take a couple of hours to learn jquery, it's an amazing javascript-cross-browser-framework / helper for doing things like this :) !
Here is a fiddle: http://jsfiddle.net/3AguQ/
I have changed the hidden inputs to text so you can se the results...
Here is some code:
<script>
function felhasznal(prefix)
{
document.getElementById(prefix + '_felhasznalas').value = '|x|';
if (document.getElementById(prefix + '_felhasznal_1').checked)
{
document.getElementById(prefix + '_felhasznalas').value = document.getElementById(prefix + '_felhasznalas').value + '1|x|';
}
if (document.getElementById(prefix + '_felhasznal_2').checked)
{
document.getElementById(prefix + '_felhasznalas').value = document.getElementById(prefix + '_felhasznalas').value + '2|x|';
}
if (document.getElementById(prefix + '_felhasznal_3').checked)
{
document.getElementById(prefix + '_felhasznalas').value = document.getElementById(prefix + '_felhasznalas').value + '3|x|';
}
}
</script>
<form method="post" enctype="multipart/form-data">
<input type="hidden" id="form1_felhasznalas" value="">
<input type="checkbox" name="felhasznal_1" id="form1_felhasznal_1" onclick="felhasznal('form1')">
<input type="checkbox" name="felhasznal_2" id="form1_felhasznal_2" onclick="felhasznal('form1')">
<input type="checkbox" name="felhasznal_3" id="form1_felhasznal_3" onclick="felhasznal('form1')">
</form>
<form method="post" enctype="multipart/form-data">
<input type="hidden" id="form2_felhasznalas" value="">
<input type="checkbox" name="felhasznal_1" id="form2_felhasznal_1" onclick="felhasznal('form2')">
<input type="checkbox" name="felhasznal_2" id="form2_felhasznal_2" onclick="felhasznal('form2')">
<input type="checkbox" name="felhasznal_3" id="form2_felhasznal_3" onclick="felhasznal('form2')">
</form>