I tried to add dynamically a form in JavaScript, but when I click on the submit button nothing happens. I know that is because the button has no listener, but I don't know what I have to add in the listener for a normal sending button behavior.
Here some of my code
document.getElementById("partTwo").innerHTML += "<form id='download_report' method='post' class='form-horizontal' role='form' action='include/client.process.php'>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='jobid' value='" + jobId + "'/>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='job' value='" + job_details.heavyInfosJson + "'/>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='download_report' value='1'/>";
document.getElementById("partTwo").innerHTML += "<button id='download_report_button' type='submit' class='btn btn-default btn-xs'>Télécharger le rapport</button>";
document.getElementById("partTwo").innerHTML += "</form>";
I want from the listener to juste send the form to my client.process.php
I know that it s a beginner question but any help would be appreciated.
Thanks
Working fiddle.
You should add the inputs inside form and not inside div partTwo, so your code should be like :
document.getElementById("partTwo").innerHTML += "<form id='download_report' method='post' class='form-horizontal' role='form' action='include/client.process.php'>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='jobid' value='" + jobId + "'/>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='job' value='" + job_details.heavyInfosJson + "'/>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='download_report' value='1'/>";
document.getElementById("download_report").innerHTML += "<button id='download_report_button' type='submit' class='btn btn-default btn-xs'>Télécharger le rapport</button>";
Hope this helps.
The problem is that <form> tag is autoclosed. innerHTML returns well formed html. See this question
You should consider using createElement rather than innerHTML, see 2946656
Here is a basic example of how to create a form and append it to the page:
var form = document.createElement("form");
form.setAttribute('action', 'contact.php');
form.setAttribute('method', 'POST');
var inputField = document.createElement("input");
inputField.setAttribute('value', 'example');
form.appendChild(inputField);
document.body.appendChild(form);
Related
I have a button that calls a script method named add_Fields(). I used .innerHTML to add fields in a form.
The problem is when i put the attribute action with a value of {{route('stock.store')}} the whole script code doesn't work.
Can anybody help me with this?
var i = 0;
var d = document.getElementById("content");
d.innerHTML += "<div class='form-group row'>"+
"<span class='col-md-2'>UNIT:<input form='form"+i+"' id='unit' type='text' name='unit' class='form-control' required></span>"+
"<span class='col-md-2'>QTY:<input form='form"+i+"' id='quantity' type='number' name='quantity' class='form-control' required></span>"+
"<span class='col-md-4'>UNIT COST:<input form='form"+i+"' id='unit_cost' type='number' name='unit_cost' class='form-control' required></span>"+
"<span class='col-md-4'>AMOUNT:<input form='form"+i+"' id='unit_cost' type='number' name='unit_cost' class='form-control' required></span>"+
"</div>"+
"<form id='form"+i+"' action='\"{{route('stock.store')}}\"' method='post'>#csrf</form>"+
"";
replace below code for form tag and make sure the route is defined in routes\web.php file
"<form id='form"+i+"' action='{{route('stock.store')}}' method='post'>#csrf</form>"+
I am trying to generate li elements for each checkbox that has been checked. It works when there is only one checked, but when I check 2 checkboxes, only the last checkbox and its hidden inputs (hidden inputs used to populate specific values inside the li element) are generated.
Here is the code I use now:
attachPanelListeners : function() {
$('#sc-accordion').bind('click', function(e) {
var items,
target = $(e.target);
if ( target.hasClass('submit-add-to-menu') ) {
var t = $(this).parent().parent(),
checkboxes = t.find('.sc-pagelist li input:checked');
// If no items are checked, bail.
if ( !checkboxes.length )
return false;
var structure;
$(checkboxes).each(function(){
var hidden = $(this).closest('li').find(':hidden');
structure = "<li class='menu-item menu-item-depth-0'>"+
"<div class='menu-item-bar'>"+
"<div class='menu-item-handle ui-sortable-handle'>"+
"<span class='item-title'><span class='menu-item-title'>" + hidden[0].value + "</span></span>"+
"<span class='item-controls'><span class='item-type'>Pagina</span><a href='#' class='item-edit'></a></span>"+
"</div>"+
"</div>"+
"<div class='menu-item-settings sc-clearfix' style='display:none;'>"+
"<p class='description description-wide'>"+
"<label for='edit-menu-title'>Navigatielabel</label>"+
"<input type='text' class='form-control' id='edit-menu-title' value='" + hidden[0].value + "'>"+
"</p>"+
"<fieldset class='field-move hide-if-no-js description description-wide'>"+
"<span class='field-move-visual-label' aria-hidden='true'>Verplaatsen</span>"+
"<button type='button' class='button-link menus-move menus-move-up' data-dir='up' style='display: none;'>Eén omhoog</button>"+
"<button type='button' class='button-link menus-move menus-move-down' data-dir='down' style='display: inline;' aria-label='Verplaats één omlaag'>Eén omlaag</button>"+
"<button type='button' class='button-link menus-move menus-move-left' data-dir='left' style='display: none;'></button>"+
"<button type='button' class='button-link menus-move menus-move-right' data-dir='right' style='display: none;'></button>"+
"<button type='button' class='button-link menus-move menus-move-top' data-dir='top' style='display: none;'>Naar boven</button>"+
"</fieldset>"+
"<div class='menu-item-actions description-wide submitbox'>"+
"<a class='item-delete submitdelete deletion' id='' href='#'>Verwijderen</a>"+
"</div>"+
"<input type='hidden' value='"+ $(this).val() +"'>"+
"<input type='hidden' value='"+ hidden[2].value +"'>"+
"</div>"+
"</li>";
});
$('#menu-to-edit').append(structure);
checkboxes.prop('checked', false);
};
})
},
Cheers
You're assigning the string on each loop, rather than appending - meaning you only ever get the last one.
One option is to change...
structure = "<li class='menu-item menu-item-depth-0'>"+
To...
structure += "<li class='menu-item menu-item-depth-0'>"+
An alternative option is to append the string on each loop directly...
$(checkboxes).each(function(){
var hidden = $(this).closest('li').find(':hidden');
$('#menu-to-edit').append(
"<li class='menu-item menu-item-depth-0'>"+
"<div class='menu-item-bar'>"+
...
"</div>"+
"</li>");
});
I made a simple example below ( as you didn't share the HTML and a bunch of code you shared is not relevant to the problem itself )
Basically you need to append to the existing HTML. WHat you are doing is replacing it with a new li every time you check a checkbox. So it overrides the previous html.
I also removed the corresponding li when the checkbox is unchecked.
THere might be a more straight forward solution out there but this is the best i came up with for now :)
var chkBox = $(".checkbox")
$(chkBox).on('change', function(){
var index = $(this).index()
var menuItem = `<li class=${index}>${index} list item</li>`
if ($(this).is(':checked') ) {
$('.menu').html($('.menu').html() + menuItem)
} else {
$(`li.${index}`).remove()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
</ul>
<div>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
</div>
i am trying to create a back-end for a contest page..By default here are two input boxes with a radio button stating which one is true and an add button which dynamically generates the input boxes and radio buttons through javascript..I have given same "Name" to the two radio boxes which are by default available and the ones which are dynamically generated..I have used array to name them..Still when i select one radio box still i am able to select other radio button as well..I want to unable this option..kindly help..
Here is the javascript code for dynamically generated input box and radio box
var doc_index = <?php echo $fans; ?>;//rows - 1
function AddDocRow(){
doc_index ++;
index = doc_index;
doc_html = "<tr id='doc_" + index + "'>" +
"<td>"+ (index+1) +"</td>" +
"<td>" +
"<input type='text' class='span12' id='option[" + index + "]' name='option[" + index + "]' placeholder='' />" +
"</td>" +
"<td><a href='javascript:void(0);' onclick='RemoveDocRow(" + index + ")'><i class='icon-remove red'></i></a></td>"+
"<td>"+
"<label>"+
"<input type='radio' name='right[" + index + "]' value='1' /><span class='lbl'></span>"+
"</label>"+
"</td>"+
"</tr>";
$('table#doc_rows tbody').append(doc_html);
//number ++;
}
And here is the code for the default two options..
<td>
<label>
<?php $check=($r['is_true']==1) ? 'checked="checked"' :''; ?>
<input type="radio" <?php echo $check; ?> name="right[<?php echo $counter1; ?>]" value="1" id="radio" /><span class="lbl"></span>
</label>
Please Help!!
Two or more radio button need to have the same EXACT name to give them the "unique" selection option. Your radios name are Dynamic, with different Name for each one.
The name of radio should be unique ie, what are the radio button which you want group.
"<input type='radio' name='radioGroupName' value='1' /><span class='lbl'></span>"+
You can apply index logic for id attribute.
The radio buttons do not have the same name - they must have the same name in order to be grouped as the same set of radio buttons.
I believe simply changing the name of each to name="right" should suffice
change
"<input type='radio' name='right[" + index + "]' value='1' /><span class='lbl'></span>"
to
"<input type='radio' name='right' id='right[" + index + "]' value='1' /><span class='lbl'></span>"
or
"<input type='radio' name='right' value='+ index +' /><span class='lbl'></span>"
this way you can give them same name, and differentiate between the two by id
I'm trying to get a form to submit with javascript in innerHTML, and the submit button just doesn't work. How do I make the form submit with innerHTML? The form works perfectly when it's in the body, but I need it in the function because I need the picdata data[1].
function photoShowcase(picdata){
var data = picdata.split("|");
_("picbox").style.display = "block";
_("picbox").innerHTML += '<div id="contain" style="background: url(\'user/<?php echo $u; ?>/'+data[1]+'\') center no-repeat rgba(0,0,0,.8);">';
if("<?php echo $isOwner ?>" == "yes"){
_("picbox").innerHTML += '<div id="deletelink">';
_("picbox").innerHTML += '<form method="POST" action="php_parsers/change_image.php" name="ChangeImage">';
_("picbox").innerHTML += '<input type="hidden" value="'+data[1]+'" name="file_name" />';
_("picbox").innerHTML += '<input type="submit" value="Set as Profile Picture" name="SetImage" />';
_("picbox").innerHTML += '</form>';
_("picbox").innerHTML += 'Delete Photo';
_("picbox").innerHTML += '</div>';
}
_("picbox").innerHTML += '</div>';
}
There is some points:
1/ Where is your PHP code?
2/ Where did You call the function? here is the function without any call... You have to call the function with right argument to work..
3/ You used (( += )) for first innerHTML...? why is that??? have you used this command before?
I think your answer is in this 3 point.
for more help, please make a jsfiddle...
In your code you are inserting incomplete html fragments and this is likely to cause the issue.
I would recommend to store the innerHTML in a variable and only append it to the document after it contains all the required closing tags:
var htmlString = '<div id="contain" style="background: url(\'user/<?php echo $u; ?>/'+data[1]+'\') center no-repeat rgba(0,0,0,.8);">';
//...
_("picbox").innerHTML += htmlString;
I am making an HTML form in JavaScript and it works, but the two buttons: cancel and submit are on seperate lines (one above the other). How can I make them horizontally aligned?
Here is the code that I have:
var new_comment_form = "<form id='add_comment' method='post'><textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>" + problem_comment_text + "</textarea><input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' /><input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' /><input type='submit' class='button' value='Edit Message' /><input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' /></form>";
And by the way, it looks very messy :) How do people usually do this sort of thing so that it is cleaner?
Thanks!
http://jsfiddle.net/G2qsp/1/
As far as I can tell, they are on the same line :P
The normal way of making it cleaner (at least, as I do it) is to just put it on new lines with +'s at the end of each line.
aka:
var new_comment_form =
"<form id='add_comment' method='post'>"+
"<textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>"+
problem_comment_text +
"</textarea>"+
"<input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' />"+
"<input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' />"+
"<input type='submit' class='button' value='Edit Message' />"+
"<input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' />"+
"</form>";
Edit:
If you're still experiencing some alignment issues, this is approximately what you'd want to do with the floats
http://jsfiddle.net/G2qsp/2/
Now, to flee before someone attacks me for using clear:both...
You can solve this problem using two ways,
1) Use table with two columns, one contain first button and other one contain second button.
2) You can also use margin-top style whose value is negative.