Combine two form input values with jQuery - javascript

So I have a hidden field on my form which contains a URL (EG - http://www.domain.com?asset=)
What I need to do is on form submit extract the value from a checkbox and append it to the value in my hidden form so that the result will look something like:
http://www.domain.com?asset=123abc
Thanks in advance!

var url = 'http://www.domain.com?asset=',
jq_checkbox = $('input#my-check-box'), // suppose id of your checkbox is my-check-box
jq_hidden = $("input#my-hidden-field"), // and id of your hidden field is my-hidden-field
jq_form = $('form#my-form') // and id of your form is my-form
.submit(function(){
jq_hidden.val(url + jq_checkbox.val());
});

$("hiddenfield").val($("hiddenfield").val() + "123abc");

Simple call this function on form submir or click event you want you get your desired output here i check output by alert
<script>
function check(){
var checkbox= $("#checkbox").val();
var hidden_val= $("#url").val()+checkbox;
alert(hidden_val);
}
</script>
here
checkbox is checkbox ID
url is hideen item ID
hope it will help you

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);

Obtaining two values from two inputs to make subject line

I have a form which I am submitting which captures the subject line which is a hidden field and has a value of 'Faulty Item'
https://jsfiddle.net/k8tnns73/
$(document).ready (function(){
$('#zendesk_field_zen_subject input').val('Faulty Item');
});
What i require is when the form is posted that the subject line 'Faulty Item' is captured like so but also the order number entered value is appended to the subject line on form submission.
I have tried the following but to no avail:-
$(document).ready (function(){
$('#zendesk_field_zen_subject input').val('Faulty Item')&&('#45354949').val();
});
is there a method in jQuery that will allow me to do this?
You can read them into variables and then do with them as you please:
$(document).ready (function(){
var faulty = $('#zendesk_field_zen_subject input').val('Faulty Item');
var otherField = $('#45354949').val();
// do what you would like with the two fields
//...
});
Assuming #45354949 is an order number and not a HTML element, you can do this.
$(document).ready (function(){
//Select the input
var subject = $('#zendesk_field_zen_subject input');
//Store order number in a variable
var orderNumber = '#45354949';
//Use this to obtain order number from an element instead
//var orderNumber = $('#myElement').val();
// Select the input and make the value faulty item + order number
var finalSubject = subject.val('Faulty Item '+orderNumber);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zendesk_field_zen_subject">
<input type="text">
</div>
you can use + instead of && to append the values as shown below.
I have added extra space in between the two values
$(document).ready (function(){
$('#zendesk_field_zen_subject input').val('Faulty Item') +' '+ $('#45354949').val();
});

how to display data from DB on the .append input field

i have a button that creates a new input field and a default field
<div class="container1">
<button class="add_form_field">Add Title</button>
<div class="form-group label-floating">
<input type="text" id="title_name">
</div>
</div>
and this is the jquery that creates a new input field.
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div><input type="text" id="title_name"/>Delete</div>'); //add input box
}
else
{
alert('You Reached the limits')
}
});
$(wrapper).on("click",".delete", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
});
and i have ajax call to get the title name from my database based on the user logged in.
$.ajax({
url:'../ajax/getprofile.php',
type:'POST',
data:{userid:user},
dataType:'JSON',
success: function(result){
$('#title_name').val(result.title_name);
}
});
when i use console.log(result) to see what the data is being returned what happen is that only one data is being returned from my ajax request..
i just didn't include the other data on my question earlier cuz those data only return one data.. i only have problem with the title_name
this code works fine for only the default input field.. like the data from my database only shows up on the default input field not on the appended input field..
saying i have a user id of 10001 and my db is look like this
tbl_title
id | name
10001 | sample
10001 | test
what i want to achieve is that when i make a request from ajax and returned the requested value it will display on my input field.and since my id is similar to the tbl_title (id) it should display the two data on the input field. but unfortunately only the 1st data is being displayed only on the default input field what i wanted to make is that if the data is more than 1 it will also display on the appended input field.. but i dont have any idea how this works..
b4 i only got one data that is being returned so i updated my mysql to return all the data that have similar id so now i got array1 and array2 array1 is on the picture and the array2 is similar to the picture but the only difference is their title_name.. so what should i do to display my the two title_name on the array on my input field
The id is the same for each input. So jQuery takes the first catch in this line:
$('#title_name').val(result.title_name);
Thats why only the first input works ...
Try to change it something like this:
$(wrapper).append('<div><input type="text" id="input_' + x + '"/> ...
and:
$('#input' + x ).val(result.title_name);
Probably not exactly right but a push in the right direction ;) The id is the problem.

display all the values when i submit in form with edit and delete buttons

I am trying to display all the values when i submit in form with edit and delete buttons
but right now they are displaying only one values...
when i display new value the old value is replaced by new value...
can you tell me how to fix it...
providing my code in codpen below
http://codepen.io/schikara/pen/bpRMMq?editors=1010
$('#localStorageTest').submit(function(e) {
e.preventDefault();
var email = $('#email').val();
var name = $('#name').val();
var message = $('#message').val();
var div = "<div><span>"+name+"</span><span >"+email+"</span><span>"+message+"</span><input type='button' value='Edit' name='editHistory'><input type='button' value='Delete' name='deleteHistory'></div>"; //add your data in span, p, input..
//alert(div);
$('.gettingValues').html(div); //apendd the div
$('#localStorageTest')[0].reset(); //clear the form
localStorage.clear();
});
Change
$('.gettingValues').html(div);
To
$('.gettingValues').append(div);
The html method sets the element's inner HTML, overwriting any html that may have already been there. Append will just add the new div without overwriting the previous ones.

Get ID of form when using onsubmit

Javascript:
function submitComment(e){
e.preventDefault();
var comment = $('#????').val(); // how do I get the ID?
// ajax
}
Comment form:
<form id="comment-form[id]" onsubmit="submitComment(event)">
<input id="comment-input[id]" type="text" placeholder="Comment...">
</form>
[id] is the variable ID of the specific form. The reason it has an ID is because I have a for loop that displays a whole list of posts, and each post has its own comment form (think Facebook).
What I want to know is how I can get the value (text) of the comment input box when they submit it based on the ID of the form that was submitted.
You can use event.target.
var comment = $('input[id^="comment-input"]',e.target).val()
This will give you input value.
e.target will give you the current form.
Then you can use [^=""] - attribute starts with selector to find the input element.
how I can get the value (text) of the comment input box based on the ID of the form that was submitted
var formID = e.target.id; //get form ID
var comment = $('#'+formID+' input[id^="comment-input"]').val()
//use $('#parent child') selector.
With your setup(HTML/javascript) you can do this with pure javascript like
function submitComment(e) {
var id = e.target.id;
id = id.match(/\[(.*?)\]/)[1];
console.log(id);
var comment = document.getElementById('comment-input['+id+']').value;
console.log(comment);
}
function submitComment(e){
var id = e.target.id;
id = id.match(/\[(.*?)\]/)[1];
console.log(id);
var comment = document.getElementById('comment-input['+id+']').value;
console.log(comment);
}
<form id="comment-form[0]" onsubmit="submitComment(event)">
<input id="comment-input[0]" type="text" placeholder="Comment...">
<input type="submit" placeholder="submit">
</form>
function submitComment(e){
e.preventDefault();
var comment = $('input[id^="comment-input"]').val();
// ajax
}
Use of jquery start-with selector can be helpful.
function submitComment(e){
e.preventDefault();
// e.currentTarget gives you the form element and then you can extract its id
var formElementId = $(e.currentTarget).attr("id");
// Then replace the form text with input which will be your comment input id
var commentElementId = formElementId.replace("form", "input");
var comment = $(commentElementId).val(); // how do I get the ID?
// ajax
}

Categories