Dynamically changing string - correct value not being submitted? - javascript

I recently posted another question about how to add content to a string (Dynamically change string with JS?), and I made progress on that front but it seems the updated variable is not being submitted. Am I missing something?
Here is my code:
<script type="text/javascript">
var selections = 'Gender, ';
jQuery(".add-to-form").click(function () {
var title = jQuery(this).attr("title");
selections += title + ', ';
console.log(selections);
});
var ss_form = {'account': 'XYZ', 'formID': 'XYZ'};
ss_form.width = '100%';
ss_form.height = '1000';
ss_form.domain = 'app-XYZ.marketingautomation.services';
ss_form.hidden = {'field_XXXXX': selections };
</script>
This works great in that the correct values are showing up in the console log, but when I submit the form and look in SharpSpring the only value getting through is the initial variable value (Gender, ). Do I need to somehow refresh the variable value in the hidden field?
All help is appreciated, thank you!

The following line is executed on page load:
ss_form.hidden = {'field_XXXXX': selections };
This assigns the value of selections as it is at that moment. The field_XXXXX property is a separate variable that will not change when you assign a different value to selections later.
So when the click event fires, and you assign a new (longer) value to selections, then only that variable changes. It is not connected to the property above.
How to solve? Just do another assignment to the ss_form.hidden.field_XXXXX property within the click handler:
jQuery(".add-to-form").click(function () {
var title = jQuery(this).attr("title");
selections += title + ', ';
ss_form.hidden.field_XXXXX = selections; // <-------
console.log(selections);
});
I assume that ss_form.hidden is some API driven way to set a hidden input element, and that this works. If not, make sure to identify the input element that needs to get a new value, which could look like this:
$('#id_of_hidden_input').val(selections);

Related

jQuery accessing updated values from variables on different events

I have a function which copies the values of a group of inputs to another group of inputs if the user clicks a button.
The function works fine but I'm having trouble with the vars I'm using to get the information. I want to use global variables because I want to use the same variables later on but it only works when I wrap those vars inside the function.
I've posted the two scenarios where it's working and not working below. Can anyone explain why I cannot access the correct value at that given time using a global variable?
EDITS: The 3 elements #admin-name, #admin-email and #admin-number are all present in the DOM when the script is called, as I am doing everything with document ready. I understand that when the script first runs these values will be blank because they haven't been filled out by the user yet. What I don't understand is why can't jQuery get the value once it has been filled out and I call the variable on the click function.
Not Working
var contactName = $('#contact-name').val();
var contactEmail = $('#contact-email').val();
var contactNumber = $('#contact-number').val();
$(".step-two .copy-details").on('click', function(){
$('#admin-name').val(contactName);
$('#admin-email').val(contactEmail);
$('#admin-number').val(contactNumber);
});
Working
$(".step-two .copy-details").on('click', function(){
var contactName = $('#contact-name').val();
var contactEmail = $('#contact-email').val();
var contactNumber = $('#contact-number').val();
$('#admin-name').val(contactName);
$('#admin-email').val(contactEmail);
$('#admin-number').val(contactNumber);
});
Man I struggled with this one, this post helped flesh it out for me, jQuery Global Variable. The problem is the variable called in the click function was still getting the original value of 0. To make the variable update when a new value is added you need to declare it and then wrap it in a change function like so:
JS
// declare the variable
var contactName;
// wrap it in a change function so the value updates
$('#contact-name').on('change', function(){
contactName = $('#contact-name').val();
});
// use the variable inside the function and it will show the updated value
$('.step-two').on('click', 'button', function(){
$('#admin-name').val(contactName);
console.log('contactName = ' + contactName);
});

JS Function calling displaying odd text & not working more than once

I have a problem, when I run my function "addMoney(amount)" (shown below) it works and shows the following: 100[object HTMLButtonElement]
My question is this, is there a way to get rid of the [object HTMLButtonElement] while keeping the number from moneyAmount when the function is called? And additionally, is there a way to call the function multiple times and add the money accordingly? As it only works the first time I call it, calling it more than once with the same or different amounts of moneyAmount displays no more or no less than what displays the first time.
My HTML:
<li class="item_shown" id="money">Shrill: <button class="moneyButton" id="moneyAmount">0</button></li>
Calling the function in HTML:
<a class="button" onclick="javascript:addMoney('100');">Add 100 Money</a>
My JS Function:
function addMoney(amount) {
document.getElementById('moneyAmount')
var newBalance = amount + moneyAmount;
document.getElementById('moneyAmount').innerHTML = newBalance;
}
The text inside an element is considered to be a text node and since the button node has no other children, is the button node's first child. The text node's value (in this case "0") is the value of its nodeValue property. Assigning a new value to the nodeValue will change the text displayed. So in your case the following code should work:
function addMoney(amount) {
var node = document.getElementById('moneyAmount');
var textNode = node.childNodes[0];
var moneyAmount = parseInt(textNode.nodeValue, 10);
textNode.nodeValue = amount + moneyAmount;}
In your JavaScript, + moneyAmount; does not do anything. It returns what you see: [object HTMLButtonElement].
I think you want to add some numbers but it's not yet completely clear to me what you're trying to achieve. Could you elaborate?
Chris
EDIT:
Thank you for clarifying your question.
Try updating your function like this:
function addMoney(amount) {
var oldBalance = document.getElementById('moneyAmount').value;
var newBalance = amount + oldBalance;
document.getElementById('moneyAmount').innerHTML = newBalance;
}
Try to find value by document.getElementById('moneyAmount').innerHTML and use some global variable say total_value to store retrieved value and then for each function call try to add the retrieved value to the previously stored value.

Change textbox value in javascript

I want to update the value of text box from where I'm getting initial value to add product to cart.
Now I'm applying round function & I want to update the value of text box that is because I'm using ajax & if I'm applying round function, user must know how system calculated everything.
Here's my simple code:
<script>
$(document).ready(function(){
$(document).delegate('.purchasenow','click', function(e){
var buynow=this;
var productid = $(this).attr('id');
var quantity = $('.quo_'+productid).val();
var quantity = Math.round(quantity);
alert(quantity); //This gives the value
$('.quo_'+productid).value = quantity; //This is not working
});
});
Can anyone tell why it's not working? It's very simple but I'm not able to find out the cause.
Have you tried
$('.quo_'+productid).val(quantity);
The jQuery selector returns a wrapped object, not the actual DOM element. I don't think wrapped object has the .value property
you are almost correct the only thing why it is not working because your syntax is wrong
this is the correct syntax for jQuery
$('.quo_'+productid).val(quantity);
if you want it in javascript
var txt = document.getElementById("quo_"+productid);
txt.value = quantity;

Getting value from a drop down box

I have hopefully a simple javascript problem.
I am trying to get the value of a drop down box to help create a dynamic URL. The problem is I am a Javascript novice and where the value should appear in the URL it says "undefined"
This is the script:
var imgcon = document.getElementById('imgcon');
var imgconval = imgcon.value;
function getdata(id){window.location = "index.php?id="+id+"&img="+imgconval;}
'imgcon' is a drop down box and the number values are appearing correctly when viewing the ource code. Does anyone know how to have var imgconval show the value and not say undefined?
Thanks
Create an onchange event:
document.getElementById('imgcon').onchange = function() {
var imgconval = this.value;
}

How can I update the background color of a dynamic input control?

I'm successfully creating some dynamic input textboxes using the following javascript:
var type = "Textbox";
var foo = document.getElementById("fooBar");
for (i = 1; i <= totalQty; i = i + 1) {
var textbox = document.createElement("input");
//Assign different attributes to the element.
textbox.setAttribute("type", type + i);
//textbox.setAttribute("value", type + i);
textbox.setAttribute("name", type + i);
textbox.setAttribute("id", type + i);
textbox.setAttribute("style", "width:300px");
textbox.setAttribute("width", "300px");
//Append the element in page (in span).
var newline = document.createElement("br");
foo.appendChild(newline);
foo.appendChild(textbox);
}
Everything works fine with that. Once the user keys in data and clicks submit however, I need to go back and set the background-color of any textboxes with an error to red. I found some code to do the actual coloring:
textbox.style.backgroundColor = "#fa6767";
...and I know the exact name of the textbox with the error (i.e. "Textbox1", "Textbox2", "Textbox3", etc) but I'm not sure how to programatically assign this background color code to the specific textbox. I can't use something like this, since all code is dynamically generated:
errorTextbox = $("#Textbox1");
Any suggestions?
It looks like you're building a form validation script. Here's an easier way to do this:
1) Create an entry in your stlyesheet for your error class. Adding and removing a class requires fewer steps than assigning properties individually.
.error {
background-color: #ff0000;
}
2) Give all the textboxes you wish to validate a unique class name "valMe", for example.
3) Then loop through them during the validation step:
$('.valMe').each(function() {
$(this).removeClass('error');
if($(this).text=='') {
$(this).addClass('error');
}
})
By using "this" you refer to the current element, so you don't even need to know the ID of the element.
If you already know the name (in this case identical to the id) of the element, you can use jQuery to select the element by forming the selector using string concatenation. Assuming you have a variable that stores the name/id of the text box that has the error, then it's a relatively simple process:
var errorTextboxName = 'Textbox1';
$('#' + errorTextboxName).css('background-color', 'red');
I ended up going with the following:
document.getElementById('Textbox1'.style.backgroundColor = "#fa6767";
I originally didn't think I would be able to capture my "Textbox1" control in this fashion since when I viewed the html source code, there was no "Textbox1" due to the fact I dynamically created it.
Thanks.

Categories

Resources