How to create and remove an HTML hidden field using jQuery? - javascript

First of all here is my code so that you can test it to see what's wrong: JSFiddle
I want to create a new hidden field every time the user selects from the left <select> element and remove / destroy the hidden field when the user clicks the right <select> element.
I used the jQuery command $("<input type='hidden' value=selectedAddFootballPlayerId>"); but when I checked of Firebug I can't see any hidden field being created. For removal of the hidden field I really don't know.

For this you can use .append().
$("body").append("<input type='hidden' value=selectedAddFootballPlayerId>");
For removal, use .remove().
$("input[type='hidden']").remove();
Be careful when using my example, as it'll remove all form elements that are hidden. If you want more prescision, you can assign an id value to the hidden input and then call that as your selector in the second example.

To create -
var $ip = $('<input>').attr({
type: 'hidden',
id: 'yourid',
name: 'yourname',
value: 'yourvalue'
})
$(ip).appendTo('body');
Then to remove -
$ip.remove();

I think you are confused when defining the selector or where you want to display your new item. Try with this (I use text inputs):
http://jsfiddle.net/Lzw4e/6/

You have to append the field:
$("<input type='hidden' value=selectedAddFootballPlayerId>").appendTo('#someSelector');

Working version
http://jsfiddle.net/Lzw4e/7/
Changes
1
$("<input type='hidden' value=selectedAddFootballPlayerId>");
to
$('body').append("<input type='hidden' value=\""+selectedAddFootballPlayerId+"\">");
2
$('#listboxFootballPlayers').append(option);
to
$('#listboxFootballPlayers').append(option);
$('input[type="hidden"][value="'+selectedRemoveFootballPlayerId+'"]').remove();

You can try this:
<input type="hidden" name="image" id="input-image{{ image_row }}" />
inputt= "<input type="hidden" name="product_image' value="abcd">"
$("#input-image"+row).remove().append(inputt);

Related

How can I apply a dynamic mask in an dynamic form?

I have a problem with my dynamic form. This input is:
<input type="text" class="form-control" placeholder="EX: (XX)-XXXX-XXXX" name="phone[]" id="phone">
This input have a mask
$('#phone').mask('(00)-0000-00000');
Everything works fine, but when I add a button who append a new input after the first the .mask filter doesn't work to the new .
How can I apply a dynamic mask in an dynamic form?
The .append function is:
$('#plusPhone').click(function(){
$('#appendPhone').append("<div class=\"row\"><div class=\"col-md-6\"><div class=\"form-group\"><label class=\"control-label col-md-3\">Phone</label><div class=\"col-md-9\"><input type=\"text\" class=\"form-control\" placeholder=\"EX: (XX)-XXXX-XXXX\" name=\"phone[]\" id=\"phone\"></div></div></div></div>"); });
You will have to add it dynamically just like this.
This is an untested code but the idea remains the same.
$('#plusPhone').click(function(){
$('#appendPhone').append("<div class=\"row\"><div class=\"col-md-6\"><div class=\"form-group\"><label class=\"control-label col-md-3\">Phone</label><div class=\"col-md-9\"><input type=\"text\" class=\"form-control\" placeholder=\"EX: (XX)-XXXX-XXXX\" name=\"phone[]\" id=\"phone\"></div></div></div></div>");
var code = "<script>$('#telefone').mask('(00)-0000-00000');</scr"+"ipt>";
$('#appendPhone').append($(code)[0]);
)};
Here is an example of how to execute js by appending it dynamically in htmls - enter link description here
This way you can append the code snippet to dynamically created htmls. Hope it helps
Pamio is on the right track. But appending the script to the page doesn't seem to work(?).
The following works for me:
$('#plusPhone').click(function(){
var HTML = 'this contains an input field with the class you want to mask';
jQuery('#element-you-want-to-append-to').append(HTML);
jQuery('.class-you-want-masked').mask('99-99-9999');
//Just call the mask AFTER appending the input, and it should be applied.
)};

how to assign value to textbox usingJavascript/ jquery when texbox is not having id?

Here is sample HTML code
<input name="DPAAP" type="hidden" value="Estambul Turquía - Todos los aeropuertos (IST)">
<input type="hidden" name="acArrValues" value="IST|Todos los aeropuertos|Estambul||Turquía|TR|110TR-010041.0138428.94966">
I can not change HTML code . How shall I assign another value to above textbox using Javascript/jquery
try this:
$('input[name="DPAAP"]').val('whatyouwant');
or if you want the second change try this:
$('input[name="acArrValues"]').val('whatyouwant');
Obviously you on't have multiple input with that name and if you have to change it when the page is loaded and not when for example click on a buottn you need to include the code inside $(document).ready() like this:
$(document).ready(function(){
$('input[name="DPAAP"]').val('whatyouwant');
$('input[name="acArrValues"]').val('whatyouwant');
});
You can select it by the name:
$('input[name="DPAAP"]').val('Your value');
But you have to make sure there are not inputs with the same name.
With Javascript:
document.getElementsByName("DPAAP")[0].value = "your value";
With jQuery:
$('input[name="DPAAP"]').val('your value');

How to name inputs when having several jquery raty in one form?

I'm using the jquery raty plugin http://www.wbotelhos.com/raty/ to make a form with star rating.
The plugin generates a hidden field for each star rating input like this :
<input id="question8-score" type="hidden" name="score">
<input id="question6-score" type="hidden" name="score">
<input id="question5-score" type="hidden" name="score">
The is when I validate the form (I use codeigniter) It just get confused with 3 input with the same name. So I want to make a script that do something like :
For each input with name="score", put the id attribute value as the name attribute value.
I think it's probably possible with jQuery but I don't know how to do that. Could someone help me? Thanks!!
$("input[name=score]").each(function () {
this.name = this.id;
});
Edited the selector
$(document).ready(function() {
$('input[name^="score"]').each(function() { // starts with score
this.name=this.id;
});
}
$('input[name=score]').each(function(){
$(this).attr("name", $(this).attr("id"));
});

MooTools DatePicker library: 'value' is empty if the form is submitted

I'm trying to use DatePicker library for Date fields but when the form is submitted, the 'value' of the input field is empty.
I copied the code from here: http://www.monkeyphysics.com/mootools/script/2/datepicker
<script>
window.addEvent('load', function() {
new DatePicker('.demo_vista', { pickerClass: 'datepicker_vista' });
new DatePicker('.demo_dashboard', { pickerClass: 'datepicker_dashboard' });
new DatePicker('.demo_jqui', { pickerClass: 'datepicker_jqui', positionOffset: { x: 0, y: 5 } });
new DatePicker('.demo', { positionOffset: { x: 0, y: 5 }});
});
</script>
<li>*DATE : <input name='date' type='text' value='' class='date demo_vista' /></li>
This is my website: http://iconceptsolutions.com.my/projects/grandevest/online-product-registration/
The point with this library is that the field you write into your HTML document is not the same that is shown by the browser.
When you build the DatePicker object, it takes the input fields which match its first parameter, and for each of them it builds another input field wich actually gets the dates selected by the user and is shown by the browser.
So, to get the value you are looking for, you must get a reference to the original input field, and with it call the MooTools function getNext(), so that you can retrieve the wanted value:
So, for this HTML:
<input name='date' type='text' value='' class='date demo' id='dateField' />
you can get the wanted value with this code:
$('dateField').getNext().get('value')
Wich can be called, for example, when the user clicks the submit button. If you need the value at a PHP script which will process the form, then with the MooTools line above you could set the value of the original input field, and then send it to the PHP.
UPDATE
I've set up this JsFiddle for testing purposes.
Not sure, but I wonder if your
value=''
in
<li>*DATE : <input name='date' type='text' value='' class='date demo_vista' /></li>
is overwriting the calendar?
What happens if you remove it?
Try this:
<input id="datepicker" name='date' type='text'/>
The javascript function new datepicker is creating 'datepicker' as a DOM object with the ID datepicker. You need the ID in the tag to specifiy this. You don't need the value in there at all, you can set a default value in the datepicker script itself in the header. That is also where you pick the theme, not in your HTML tags.

How can I create a dynamic form using jQuery

How can I create a dynamic form using jQuery. For example if I have to repeat a block of html for 3 times and show them one by one and also how can I fetch the value of this dynamic form value.
<div>
<div>Name: <input type="text" id="name"></div>
<div>Address: <input type="text" id="address"></div>
</div>
To insert that HTML into a form 3 times, you could simply perform it in a loop.
HTML:
<form id="myForm"></form>
jQuery:
$(function() {
var $form = $('#myForm'); // Grab a reference to the form
// Append your HTML, updating the ID attributes to keep HTML valid
for(var i = 1; i <= 3; i++) {
$form.append('<div><div>Name: <input type="text" id="name' + i + '"></div><div>Address: <input type="text" id="address' + i + '"></div></div>')
}
});
As far as fetching values, how you go about it would depend on your intent. jQuery can serialize the entire form, or you can select individual input values.
.append() - http://api.jquery.com/append/
This is a pretty broad question and feels a lot like 'do my work' as opposed to 'help me solve this problem.' That being said, a generic question begets an generic answer.
You can add new address rows by using the append() method and bind that to either the current row's blur - although that seems messy, or a set of +/- buttons that allow you to add and remove rows from your form. If you're processing the form with PHP on the server side, you can name the fields like this:
<input type='text' name='address[]' />
and php will create an array in $_POST['address'] containing all the values.

Categories

Resources