Retrieving ID from Javascript - Laravel - javascript

In my javascript code, i am able to output the id of a the selected item. I want to pass the id to my controller. I appended the input(created in the JS code) to my html form so as to get the id of the selected item but it wouldn't do the trick.
*HTML**
<form>
// inputs for form in here
</form>
JS
$(".myItem").append(
'<p name="item_id" id="item_id">Item ID: ' + item.id + '</p>').appendTo('form');
Controller
$getID = Input::get('item_id');
$fetchItem = Item::all()->where('id',$getID)->first();

Try to append an input element instead of a p:
$(".myItem").append(
'<input name="item_id" id="item_id" value=' + item.id + ' />).appendTo('form');
You can even have both; 1 to store the value (input) and the other to show it on screen (p).
$(".myItem").append('
<input type="hidden" name="item_id" id="item_id" value=' + item.id + ' />
<p>Item ID: ' + item.id + '</p>').appendTo('form');

Related

Loop through JSON name/value pair string to populate form input field values for edit mode

I'm trying loop through a json name/value pair string and populate generated input field values. Wanting this logic for edit mode. I feel I'm almost there but I'm only populating two fields. Oh, The input fields are in group of two (Title url and url itself)
// * Edit mode * - Populates input fields with current stored urls
let wrapper = '#wrapper';
let urlJson = '{\"Hello World\": \"www.google.com\"\r\n}'
if (urlJson) {
var result = $.parseJSON(urlJson);
var urlTitle = $('[name="url_title[]"]');
var url = $('[name="url[]"]');
$.each(result, function(key, value) {
console.log('key: ' + key + ' - value: ' + value);
urlTitle.val(key);
url.val(value);
$(wrapper).append(
'<div id="title_and_url_group"><br><hr class="title_and_url"><div class="col-md-9 title_and_url">' +
'{!! Form::text("url_title", old("url_title"), ["class"=>"form-control", "name" => "url_title[]", "placeholder"=>"Title of URL"]) !!}' +
'</div><br><div class="col-md-9 title_and_url">' +
'{!! Form::text("url", old("url"), ["class"=>"form-control", "name" => "url[]", "placeholder"=>"Ex: http or https in url"]) !!}' +
'X</div></div>'
);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="url_title[]" value="Bike"> URL Title<br>
<input type="checkbox" name="url[]" value="Car"> URL<br>
<div id="wrapper"></div>
You are using laravel's form facade in your javascript method, Laravel facade is executed at the server before the processed web page is passed to the client.
Since you're looping through js at client, form facade will be rendered as plain text, no php function will work, you'll need to write down the mark up instead of using Form Facade.
Document.querySelector('#wrapper').innerHTML =
result.forEach((res, index)=>{
`<div id="title_and_url_group">
<br>
<hr class="title_and_url">
<div class="col-md-9 title_and_url">
<input type="text" name="url_title[${index}]" value="${res.url_title}" class="form-control">
</div>
<br>
<div class="col-md-9 title_and_url">
<input type="checkbox" name="url[${index}]" value="${res.url}" class="form-control">
X
</div>`
}
I have this so far. I can't seem to get them into the values into the input fields. Here's the code. When I do a console.log it iterates correctly.
// *** Edit mode *** - Populates url tile and url fields
if (url) {
var result = JSON.parse(url);
var url_title = $('[name="url_title[]"]');
var url = $('[name="url[]"]');
$.each(result, function(key, value) {
console.log('key: ' + key + ' - value: ' + value);
url_title.val(key);
url.val(value);
$(wrapper).append(
'<div id="title_and_url_group"><br><hr class="title_and_url"><div class="col-md-9 title_and_url">' +
'{!! Form::text("url_title", old("url_title"), ["class"=>"form-control", "name" => "url_title[]"]) !!}' +
'</div><br><div class="col-md-9 title_and_url">' +
'{!! Form::text("url", old("url"), ["class"=>"form-control", "name" => "url[]"]) !!}' +
'X</div></div>'
);
});
}

How to set html id to a variable

$('#submit').click(
function (event) {
event.preventDefault();
let number = 0;
$("#tasklist").append("<li id='addedtask number'>" + $('#task_to_add').val() + "</li>" +
"<form action='index.html' method='get'> <input type='submit' id='remove index' value='remove'></input> </form>");
}
);//end of submit
I am adding this button dynamically with jquery and I would like to increment the id of this button, how would I do this?
I would like it to be equivalent of this after the first time it should be:
<input type='submit' id='remove index 1' value='remove>
and after second:
<input type='submit' id='remove index 2' value='remove>
If I try to put a variable int the id like 'remove index myvar' i think it will just treat myvar like a string. Is there a way to get to be treated like a variable?
Please advise and thanks.
var currentId = 1;
$("#submit").click(function(event) {
event.preventDefault();
$("#tasklist").append(
"<li id='addedtask'>" +
$('#task_to_add').val() +
"</li>" +
"<form action='index.html' method='get'>" +
"<input type='submit' id='remove-index-" + currentId++ + "' value='remove'></input>" +
"</form>"
);
});

How can I call a jquery function on selecting a dropdown option for dynamically created inputs?

So this is what the page looks like currently:
The first one is hardcoded in and then the rest are added/removed by the buttons. The first one can also be added and removed from the buttons. I want to call a jquery function when the dropdown is changed to change the type from textbox/radiobutton (and text)/checkbox (and text) etc.
Currently it only works on the first Question/Answer and only works if it is the original and not dynamically created. I'm not sure why that is.
Here is how the Q/A's are created and removed
$("#addButton").click(function () {
if (counter > max_fields) {
alert("Only " + max_fields + " Questions allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Question #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="questionbox' + counter + '" value="" />' +
' <select id="choice'+ counter +'"><option>Type</option><option>Radio Button</option><option>Text Box</option><option>Check Box</option></select>' +
'<button id = "remove' + counter + '">Remove</button>' +
'<br/><label>Answer #' + counter + ' : </label>' +
'<div id="Answers' + counter + '">' +
'Option 1: <input type="text" id="answerbox' + counter +
'1" name="answerbox' + counter + '" value="" />' +
'<br/>Option 2: <input type="text" id="answerbox' + counter +
'2" name="answerbox' + counter + '" value="" />' +
'<br/>Option 3: <input type="text" id="answerbox' + counter +
'3" name="answerbox' + counter + '" value="" />' +
'<br/>Option 4: <input type="text" id="answerbox' + counter +
'4" name="answerbox' + counter + '" value="" /></div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
This is how I tried to get it to change types
$('#choice1').change(function () {
var selected_item = $(this).val()
var searchEles = document.getElementById("Answers1").children;
alert(searchEles.length);
for(var i = 0; i < searchEles.length; i++) {
$('#answerbox1' + i).attr('type', selected_item);
//alert(searchEles.length);
}
});
The web page code is as follows
<input type='button' value='Add Question' id='addButton'/>
<input type='button' value='Remove Question' id='removeButton'/>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Question #1 : </label>
<input type='text' id='questionbox1'/>
<select id="choice1" onchange="$('#choice').val('id');"> //this on change was added and currently does nothing it seems.
<option value="">Type</option>
<option value="radio">Radio Button</option>
<option value="text">Text Box</option>
<option value="checkbox">Check Box</option>
</select>
<button id="remove1">Remove</button>
<br/><label>Answer #1 : </label>
<div id="Answers1">
Option 1: <input type="text" id='answerbox11' name='answerbox1' value="" />
<br/>Option 2: <input type="text" id='answerbox12' name='answerbox1' value="" />
<br/>Option 3: <input type="text" id='answerbox13' name='answerbox1' value="" />
<br/>Option 4: <input type="text" id='answerbox14' name='answerbox1' value="" />
</div>
</div>
</div>
I tried to do something like onchange and then get the ID and go from there but that didn't work. I know it doesn't match the back end jquery name.
TL;DR
I don't know how to dynamically write the jQuery function to work
for all of them.
I don't know why even if I hardcode it to #choice1 it will work
when its first created but not if i remove and add it even though it
has the same exact values. I think it might MAYBE have to do with
for loop, because the alert doesn't even trigger the second time
around.
You could try
$(document).on("change", ".selector", function(){
//do something
});
//Edit
Add to the select element class for example select-option and a tag that will hold the select's counter
//JS
...'<select id="choice'+counter+'" class="select-option" number="'+counter+'">'...
and then your on change function would look something like
$(document).on("change", ".select-option", function(){
//do something
var selected_type = $(this).attr('value');
var ans_number = $(this).attr('number');
$("#answerbox"+ans_number).children('input').attr('type', selected_type);
});
I hope this will help :)
For dynamically added elements use
$(selector).on("change", callback)
If element is dynamic then Jquery will not bind directly as
$('#choice1').change(function (){});
But for that you need to call same function with some static element.
For Ex:
$(".listingDiv").find('#choice1').change(function (){});
or
$(document).find('#choice1').change(function (){});
and it will work. try it.
When elements will be aded dynamically, best practice is to delegate the handler(s). Put your handler on the containing div or window/document
.
First
<select id="choice1" onchange="$('#choice').val('id');"> //this on change was added and currently does nothing it seems.
This is one reason your never be called. If you bind an event listener to an element, you should not write the actual JS code inside the element.
Second
Bind your listener like this:
$('#choice1').on("change", function () {
var selected_item = $(this).val()
var searchEles = document.getElementById("Answers1").children;
alert(searchEles.length);
for(var i = 0; i < searchEles.length; i++) {
$('#answerbox1' + i).attr('type', selected_item);
//alert(searchEles.length);
}
});

Accessing Textbox Value Using Inserted JavaScript

I'm Having a bit of an issue. I'm using JavaScript to inset HTML into a webpage along with an event handler for the onblur event. It looks like this:
return '<input id = "txtIn" type="text" value=" ' + dateTime + '" onblur= "submitManualDate(document.getElementById("txIn").value(), 2, 3);" />';
I'm getting a syntax error. However, the following works perfectly fine:
return '<input id = "txtIn" type="text" value=" ' + dateTime + '" onblur= "submitManualDate(1, 2, 3);" />';
Any idea what I'm missing?
Using " inside "(double quoted) expression will break the string.
It's better to pass this as an argument as you should not have multiple elements with same id attributes in a document.
Try this example:
(function() {
var input = '<input type="text" value="5" onblur= "submitManualDate(this, 2, 3);" />';
document.getElementById('parent').innerHTML = input;
})();
function submitManualDate(elem, j, k) {
alert(elem.value + ' ' + j + ' ' + k);
}
<div id='parent'></div>
Fiddle here

get text value from selected radiobutton with jquery

I'm trying to get the value of a selected radio button with jQuery. I generate my html-elements with jquery from a json-template, this is my code for generating radio buttons:
function AddRadio(labelName, buttons, i, paneIndex, dataID) {
$('#Ctabs1-pane' + paneIndex + '').append('<div class="form-group"><label class="col-lg-2 control-label">' + labelName + '</label><div class="col-lg-10" id="' + dataID + '"></div></div>');
$.each(buttons, function (j, value) {
$('#' + dataID).append('<div class="radio"><label><input type="radio" name="optionsRadios" value="' + value + '">' + value + '</label></div>');
});
}
i try to get the selected radiobutton with this code:
return $("input[type='radio'].radioBtnClass:checked").val();
But this gives me undefined
What am i doing wrong?
Your selector match input element with class radioBtnClass but you're not added it when append. Either add that class into your input:
$('#' + dataID).append('<div class="radio"><label><input type="radio" class="radioBtnClass" name="optionsRadios" value="' + value + '">' + value + '</label></div>');
or target it by name instead:
$("input[type='radio'][name='optionsRadios']:checked").val();

Categories