Level 1
Help me please
Sep 1, 2022
18
Level 1
Issue with Select Option.
I have a Select menu where have 4 Options. 1.Text 2.Textare 3.Checkbox 4.Radio Everytime will chose an option will get the an input with the appropriate selection. Issue will happen when chose Checkbox or Radio, will want to show another input with buttons that allow user to add more options, but on select all this will be show and instantly removed. Please help me fixing the code to work.
Blade
<h2 class="text-white font-bold flex items-center justify-center">Add Question</h2>
<div class="bg-white rounded shadow p-2">
<form wire:submit.prevent="editsurveyqdata">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row">
<div class="input-field col s12">
<select wire:model="question_type" id="question_type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:outline-none block w-full p-2.5">
<option value="" disabled selected>Choose your option</option>
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="checkbox">Checkbox</option>
<option value="radio">Radio Buttons</option>
</select>
</div>
<div class="p-1 mb-2">
<label for="title" class="text-gray-700 font-semibold">Question</label>
<input id="title" type="text" wire:model="qtitle" class="bg-gray-50 border border-gray-300 text-gray-700 text-sm rounded focus:outline-none block w-full p-1" required>
</div>
<!-- this part will be chewed by script in init.js -->
<span class="form-g"></span>
<div class="input-field col s12">
<button type="submit" class="px-2 py-1 rounded bg-green-700 text-white">Submit</button>
</div>
</div>
</form>
</div>
Java Script
<script>
$(document).ready(function() {
// will replace .form-g class when referenced
var material = '<div class="input-field input-g p-1 flex space-x-2">' +
'<input id="option_name[]" wire:model.defer="qoption_name[]" type="text" class="bg-gray-50 border border-gray-300 text-gray-700 text-sm rounded focus:outline-none block p-1">' +
'<span class="add-option bg-green-700 rounded px-2 py-1 text-white cursor-pointer">Add Another</span>' +
'<span class="delete-option bg-red-700 rounded px-2 py-1 text-white cursor-pointer">Delete</span>' +
'</div>';
$(document).on('click', '.delete-option', function() {
$(this).parent(".input-field").remove();
});
// for adding new option
$(document).on('click', '.add-option', function() {
$(".form-g").append(material);
});
// allow for more options if radio or checkbox is enabled
$(document).on('change', '#question_type', function() {
var selected_option = $('#question_type :selected').val();
if (selected_option === "radio" || selected_option === "checkbox") {
$(".form-g").html(material);
} else {
$(".input-g").remove();
}
});
});
</script>
Level 73
@emilpapelas4@gmail.com Relax. People are helping on this forum for free, so if it takes some time before someone tries to help you, you will just have to accept that. Bumping threads is considered rude, so please don't do that.
Level 1
@Tray2 ok may did u know what was the error in my situation?
Level 122
for starters, try writing valid html
secondly, you expect to insert a new field and just have livewire automatically recognise it?
livewire is built to avoid this sort of javascript dom manipulation, so workout how you can tell livewire to add an extra field
Level 1
@Snapey i have javascript for adding new extra field.
Level 122
@emilpapelas4@gmail.com yes, how is that working out for you?
Level 1
@Snapey The first 2 options works , issue happen on next 2 options That is Radio and Checkbox , becuse this allow multiple options to be added but once selected will automatically disappear.
Level 73
@emilpapelas4@gmail.com Here is your answer
if (selected_option === "radio" || selected_option === "checkbox") {
$(".form-g").html(material);
} else {
$(".input-g").remove();
}
The selected option does not equal radio or checkbox so you end up removing it.
Level 1
@Tray2 Thanks for your answer , but same issue happens once added your code. Not sure why
Level 1
@Tray2 as u can see the select options is equal with selected_option but still remove it,
<select wire:model="question_type" id="question_type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:outline-none block w-full p-2.5">
<option value="" disabled selected>Choose your option</option>
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="checkbox">Checkbox</option>
<option value="radio">Radio Buttons</option>
</select>
Level 73
@emilpapelas4@gmail.com That is because I pointed out the error for you. I did not make any solution to the problem.
None of these are true
if (selected_option === "radio" || selected_option === "checkbox")
So you never hit the code that adds it, just the code that removes it.
Level 1
@Tray2 ok but need a solution to make this works thats why i asking here for help. Hope can u help me. Thank you.
Level 1
@Tray2 This will work if use without livewire but once added with Livewire issue happen.
Level 102
@emilpapelas4@gmail.com Pick one. Either use livewire on that page or use jquery. Livewire replaces the dom on updates, so it will remove any changes you make. So you would need to instruct livewire about any change you make to it can update the dom, not jquery
Level 73
@emilpapelas4@gmail.com See @snapey answer
secondly, you expect to insert a new field and just have livewire automatically recognise it?
livewire is built to avoid this sort of javascript dom manipulation, so workout how you can tell livewire to add an extra field
Level 51
Use Livewire or jQuery, not both.
1 like
Level 73
@lancashireman Agreed.
1 like
Level 1
@Tray2 Maybe Livewire , but need help to remake all this only with livewire because I can't do it by my own.
Please or to participate in this conversation.