I have a really big form (too many values for a post request) and now I tried to minimy reduce the number of post parameters by summarizing the values line by line.
<form name="old_postform" method="post" action="https://example.com" />
<input type="text" name="1_firstname" />
<input type="text" name="1_lastname" />
<input type="text" name="1_age" />
<input type="text" name="2_firstname" />
<input type="text" name="2_lastname" />
<input type="text" name="2_age" />
<input type="text" name="3_firstname" />
<input type="text" name="3_lastname" />
<input type="text" name="3_age" />
</form>
I already tried to react on the submit event of the form by interrupting this and submitting another form instead, but this didnt work well because I have some other values which need to be submitted too:
$('form[name="old_postform"]').submit(function (e) {
let new_postform = '<form id="new_postform" method="post">';
for(var i = 0; i < 1000; i++) {
new_postform += '<input type="hidden" name="' + i + '" value="';
new_postform += $('input[name=' + i + '_firstname' + ']').val() + ';';
new_postform += $('input[name=' + i + '_lastname' + ']').val() + ';';
new_postform += $('input[name=' + i + '_age' + ']').val() + ';';
}
new_postform += '</form>';
$("#new_postform").submit();
});
Is there a simple way to remove all post parameters which start with a one, two or three digit from the old form and add my new post_form instead ?
I really would appreciate your help! ;)
you don't need to create another form to submit. Read all parameters and remove unwanted inputs from the form, add semicolon separated values as hidden input and submit the form.
See below code
$('form[name="old_postform"]').submit(function (e) {
var $form = $(this);
var $inputs = $form.find(":input");
var len = $inputs.length/3; // calculate number of firstname, lastname and age per index
for(var i=1; i<=len; i++){
var $fn = $('input[name=' + i + '_firstname]');
var $ln = $('input[name=' + i + '_lastname]');
var $age = $('input[name=' + i + '_age]');
var values = '<input type="hidden" name="' + i + '" value="';
values += $fn.val() + ';';
values += $ln.val() + ';';
values += $age.val() + ';">';
//remove read elements
$fn.remove();
$ln.remove();
$age.remove();
//append hidden input
$form.append(values);
};
$form.submit();
});
Related
I want to upload in the database using pure javascript in my following input fields.
var i = 2;
var id=1;
function addkid() {
var div = document.createElement('div');
console.log('my id cj '+id)
div.innerHTML = 'Day' + id + ': <input type="text" name="child_' + id + '"/>' + '<input type="button" class="submit_but" id="rem_kid()_' + id + '" onclick="remkid(this)" value="-" />';
//div.innerHTML = 'Day' + id + ': <input type="text" name="child_' + id + '"/>' + ' <input type="button" id="add_kid()_' + id + '" onclick="addkid()" value="+" />' + ' <input type="button" id="rem_kid()_' + id + '" onclick="remkid(this)" value="-" />';
// event.stopPropagation();
document.getElementById('kids').appendChild(div);
id++;
}
function remkid(div) {
document.getElementById('kids').removeChild(div.parentNode);
i--;
}
/////////////////////////////////////////
var i = 1;
var idd = 1;
function addmen() {
var div = document.createElement('div');
console.log('my id cj '+idd);
//var id = i;
// alert(id);
div.innerHTML = 'img' + idd + ': <input type="file" name="child_' + id + '"/>' + '<input type="button" class="submit_but" id="rem_kid()_' + id + '" onclick="remmen(this)" value="-" />';
//div.innerHTML = 'Day' + id + ': <input type="text" name="child_' + id + '"/>' + ' <input type="button" id="add_kid()_' + id + '" onclick="addkid()" value="+" />' + ' <input type="button" id="rem_kid()_' + id + '" onclick="remkid(this)" value="-" />';
document.getElementById('menand').appendChild(div);
idd++;
}
function remmen(div) {
document.getElementById('menand').removeChild(div.parentNode);
i--;
}
Title:
<input type="text" name="name">
<br/>
<div id="kids">
Day/s:
<!--<input type="text" name="child_1">-->
<input type="button" class="submit_but" id="add_kid()_1" onclick="addkid()" value="Add tour day" /><br>
</div>
<div id="menand">
Img/s:
<!--<input type="file" name="img">-->
<input type="button" class="submit_but" id="add_kid()_1" onclick="addmen()" value="Add tour Image" /><br>
</div>
<div>
<input type="button" value="Save" name="Save" class="submit_but" onclick="saveroute()">
</div>
I want to know how to upload this multiple same name input field into the database. I'm never doing this type of code in before. please help solve my problem
The id is an unique identifier. The means that your 'id=add_kid()_1' can't repeat for more than one . The class attribute can repeat. In this case, you'll use the class="submit_but" to catch the two input tags.
Then, the first step is extract the info. There's only two inputs to extract info from and they have the tag in common: "submit_but".
const infoElements = document.querySelector('.submit_but');
infoElemnts contains all nodes with class="submit_but".
Here your answer pt1
If you wanna store the info of inputs in an array:
const infoValues = infoElements.map((element) => {
return element.value;
}
Now, infoValues has all inputs values. You can do all this process with yours childs inputs that will be created.
div.innerHTML = '<input class="dayTour"></input>'
div.innerHTML = '<input class="whatever"></input>'
const dayTourElements = document.querySelector('.dayTour');
const dayTourValues = dayTourElements.map((element) => {
return element.value;
}
Here your answer pt2
I don't how you wanna save this, but for simple approach you can simple write it to your local storage into a '.txt' file.
const fs = require('fs');
fs.appendFile('mynewfile1.txt', 'Hello content!', function (err) {
if (err) throw err;
console.log('Saved!');
});
Here tutorial: https://www.w3schools.com/nodejs/nodejs_filesystem.asp
I want to add text to dynamically created textbox.
var dynamicTextBox= "";
for (var i = 0; i < vm.FitToWork.length; i++) {
dynamicTextBox+= '<input class="form-control" name = "DynamicTextBox" id= "DynamicTextBox" type="text" value = "'vm.FitToWork[i]'" /> ' +
'<button id="btnAdd" class="delete-decl">+</button>';
}
document.getElementById("TextBoxContainer").innerHTML=dynamicTextBox;
its not working..
You have syntax error. You are trying to concatenate a variable vm.FitToWork[i] but not using concatenation operator (+). Try the following code:
var dynamicTextBox= "";
// ignore this. just have this to get the code working
var vm = {FitToWork : ["test","rest","vest"]};
for (var i = 0; i < vm.FitToWork.length; i++) {
dynamicTextBox += '<input class="form-control" name = "DynamicTextBox" id= "DynamicTextBox" type="text" value = "' + vm.FitToWork[i] + '" />';
dynamicTextBox += '<button id="btnAdd" class="delete-decl">+</button></br>';
}
document.getElementById("TextBoxContainer").innerHTML = dynamicTextBox;
<div id="TextBoxContainer"></div>
You missed concat.
var dynamicTextBox= "";
for (var i = 0; i < vm.FitToWork.length; i++) {
dynamicTextBox+= '<input class="form-control" name = "DynamicTextBox" id= "DynamicTextBox" type="text" value = "'+vm.FitToWork[i]+'" /> ' + '<button id="btnAdd" class="delete-decl">+</button>';
}
document.getElementById("TextBoxContainer").innerHTML=dynamicTextBox;
You forgot to add pluses in value:
... value="' + vm.FitToWork[i] + '" ...
value should be in + + value = "' + value + '"
so value = "'+vm.FitToWork[i]+'"
or you can try this
'<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
'<input type="button" value="+" id="btnAdd" class="delete-decl" />'
I have form and it look like this:
<div class="fieldWrapper">
<label for="id_rooms">Rooms:</label>
<input id="id_rooms" type="number" name="rooms" min="1">
</div>
<div class="extrafieldWrapper">
</div>
And I have script that add or delete couple of fields 'adult' and 'children' depending on value of field 'room'. Now i want to do the same thing with field 'children': depending on value of field 'children' script should add or delete fields 'children_age'. I tried to realize it something like this, but it isn't work.
$(function () {
$('#id_rooms').bind('blur keyup change', function () {
var n = $('#id_rooms').val() || 0;
$("input[id='id_form-TOTAL_FORMS']").attr('value', n);
$(".extrafieldWrapper").empty();
for (var i = 0; i < n; i++) {
$(".extrafieldWrapper").append("<br/><label for='id_form-" + i + "-adult'>Adult:</label> <input id='id_form-" + i + "-adult' type='number' name='form-" + i + "-adult'/> <label for='id_form-" + i + "-children'>Children:</label> <input id='id_form-" + i + "-children' type='number' name='form-" + i + "-children'/><div id='extrafieldWrapperChAge'></div>");
$("#id_form" + i + "children").bind('blur keyup change', function() {
var n = $("#id_form" + i + "children").val() || 0;
$(".extrafieldWrapperChAge").empty();
for (var i = 0; i < n; i++) {
$(".extrafieldWrapperChAge").append("<br/><label for='id_form-" + i + "-childrenage'></label><input id='id_form-" + i + "-childrenage' type='number' name='form-" + i + "childrenage' />");
}
});
}
});
});
I am newbie in java-script, can you tell me what i'm doing wrong. Thanks a lot.
Extract your inner code and use only one event handler for the childrens age field(s). In the code below I have added the class children_age to the input fields and then attached a event handler to listening for changes on all elements with that class.
Note 1: It should be enough to listen for change events.
Note 2: Use on instead of bind since it's recommended by the jQuery team
$(function(){
$('#id_rooms').on('change', function(e){
var n = $('#id_rooms').val() || 0;
var html = "";
for (var i = 0; i < n; i++) {
html += "<br/><label for='id_form-" + i + "-adult'>Adult:</label>"
+ "<input id='id_form-" + i + "-adult' type='number' name='form-" + i + "-adult'/>"
+ "<label for='id_form-" + i + "-children'>Children:</label>"
+ "<input id='id_form-" + i + "-children' type='number' name='form-" + i + "-children' class='children_age'/>"
+ "<div class='extrafieldWrapperChAge'></div>";
}
$(".extrafieldWrapper").html(html);
});
$(".extrafieldWrapper").on('change', '.children_age', function(e){
// $(this) refers to the element that changed
var n = $(this).val() || 0;
var html = "";
for (var i = 0; i < n; i++) {
html += "<br/><label for='id_form-" + i + "-childrenage'>Age of child "+(i+1)+"</label>"
+ "<input id='id_form-" + i + "-childrenage' type='number' name='form-" + i + "childrenage' />";
}
//.next - finds the next occurrence that matches the selector
$(this).next('.extrafieldWrapperChAge').html(html);
});
});
I am dynamically adding and removing textboxes though I can successfully adds textbox but unable to remove textbox on clicking the remove button every time i have to reload the browser to remove the textboxes after clicking remove button.
here is my javascript for adding and removing textboxes.
<script type="text/javascript">
$(document).ready(function(){
var COUNTER = 3;
var labelArray = ["answer", "rank"];
$("#addButton").click(function () {
for(var i = 0; i < labelArray.length; i++){
createNewInput(labelArray[i]);
}
COUNTER++;
});
function createNewInput(label){
var tbDiv = $('#TextBoxesGroup');
var str = '<div class="control-group">';
str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
str += '<div class="controls">';
str += '<input type="text" id="' + label + '_' + COUNTER + '" name="'+ label +'_' + COUNTER + '" />';
str += '</div>';
str += '</div>';
tbDiv.append(str);
};
$("#removeButton").click(function () {
if(COUNTER==3){
alert("No more textbox to remove");
return false;
}
COUNTER--;
$("#TextBoxesGroup" +COUNTER).remove();
});
});
</script>
here is my html for textboxes.
<div id="TextBoxesGroup">
<div class="control-group">
<label class="control-label">answer_1: </label>
<div class="controls">
<input type="text" name="answer_1" id="answer_1" required="true" >
</div>
</div>
<div class="control-group">
<label class="control-label" for="rank1">Rank 1</label>
<div class="controls">
<input type="text" name="rank_1" id="rank_1" required="true">
</div>
</div>
<div class="control-group">
<label class="control-label">answer_2: </label>
<div class="controls">
<input type="text" name="answer_2" id="answer_2" required="true" >
<button class="btn btn-mini btn-danger" data-toggle="button" type="button" id="removeButton">
-
</button>
<button class="btn btn-mini btn-success" data-toggle="button" type="button" id="addButton">
+
</button>
</div>
</div>
<div class="control-group">
<label class="control-label" for="rank1" required="true">Rank 2</label>
<div class="controls">
<input type="text" name="rank_2" id="rank_2" required="true">
</div>
</div>
</div>
can anyone what's wrong in it so that I am unable to remove textboxes on clicking the button ? Thanks
you need to modify 2 things here:
1- when appending the new elements, mark their holding div with the current COUNTER value at the end, so it's easy to target them later (like on step 2 below).
so adding new elements should be like this:
function createNewInput(label){
var tbDiv = $('#TextBoxesGroup');
var str = '<div class="control-group'+COUNTER+'">';
str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
...
...
instead of this:
function createNewInput(label){
var tbDiv = $('#TextBoxesGroup');
var str = '<div class="control-group">';
str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
2- when removing elements, we will target those with the current COUNTER value at the end of their class name,this way you will remove the last group, and still check if the groups are 3 or lower, no removal should happen.
$("#removeButton").click(function () {
if(COUNTER==3){
alert("No more textbox to remove");
return false;
}
COUNTER--;
$(".control-group"+COUNTER).remove();
});
});
Update: check my updated fiddle http://jsfiddle.net/qqqyC/1/
note: considering that we are appending the COUNTER value at the end of the class name. if class is giving you any styles it will not work. in this case you should not use class name as the target property and consider marking the new group using another attribute/property, and target this attribute/property when removing your elements.
Use .on as you want to bind $("#removeButton").click(function () { to dynamically added elements. It should be
$("#removeButton").on("click", function () {
//.....
});
$(document).ready(function(){
var COUNTER = 3;
var labelArray = ["answer", "rank"];
$("#addButton").click(function () {
for(var i = 0; i < labelArray.length; i++){
createNewInput(labelArray[i]);
}
COUNTER++;
});
function createNewInput(label){
var tbDiv = $('#TextBoxesGroup');
var str = '<div class="control-group">';
str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
str += '<div class="controls">';
str += '<input type="text" id="' + label + '_' + COUNTER + '" name="'+ label +'_' + COUNTER + '" />';
str += '</div>';
str += '</div>';
tbDiv.append(str);
};
$("#removeButton").click(function () {
if(COUNTER==3){
alert("No more textbox to remove");
return false;
}
COUNTER--;
$("#answer_" +COUNTER).parent('div').parent('div').remove();
$("#rank_" +COUNTER).parent('div').parent('div').remove();
});
});
Please update script or check this fiddle http://jsfiddle.net/Cne2Q/
$("#removeButton").click(function () {
if(COUNTER==3){
alert("No more textbox to remove");
return false;
}
COUNTER--;
$("#TextBoxesGroup" +COUNTER).remove();
});
What you're doing here, - you're trying to remove an element like $("#TextBoxesGroup1") which obviously doesn't exist. So what you need to do is modify your create new input like this:
function createNewInput(label){
var tbDiv = $('#TextBoxesGroup');
var str = '<div id="textBoxContainer'+COUNTER+'" class="control-group">';
str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
str += '<div class="controls">';
str += '<input type="text" id="' + label + '_' + COUNTER + '" name="'+ label +'_' + COUNTER + '" />';
str += '</div>';
str += '</div>';
tbDiv.append(str);
};
and your remove button
$("#removeButton").click(function () {
if(COUNTER==3){
alert("No more textbox to remove");
return false;
}
COUNTER--;
$("#textBoxContainer" +COUNTER).remove();
});
html code:
<div id="localPropList"></div>
<div id="assignedPropList"> </div>
js code:
function getLocalProposals()
{ // filling these radio buttons dynamically
var htmlStringLocalPro = '<fieldset id="local_proposal_id_div" name ="radioGroup" data-role="controlgroup">';
for (var k = 0; k < result.rows.length; k++) {
var localProposal = result.rows.item(k);
if( !(jQuery.inArray( localProposal.id, arrForQueuePropId ) >=0 ) )
{var fieldId = 'localPro' + k;
htmlStringLocalPro += '<input group="1" type="radio" name="local_proposal_id" id="' + fieldId + '" value="' + localProposal.enquiry_no + ',' + localProposal.id + '"/>'
+ '<label for="' + fieldId + '" data-iconpos="right">' + localProposal.enquiry_no+'-'+localProposal.caller_name+'</label>';
}
htmlStringLocalPro += '</fieldset>';
}
function getAssignedproposals()
{
var htmlString = '<fieldset id="assigned_proposal_id_div" name ="radioGroup" data-role="controlgroup">';
for (var i = 0;i < obj.Proposal.length; i++) {
proposalIds += obj.Proposal[i].id + ',';
if( !(jQuery.inArray( obj.Proposal[i].id, arrForQueuePropId ) >=0 ) ){
var fieldId = 'ap' + i;
htmlString += '<input group="1" type="radio" name="assigned_proposal_id" id="' + fieldId + '" value="' + obj.Proposal[i].enquiry_no + ',' + obj.Proposal[i].id + '"/><label for="' + fieldId + '" data-iconpos="right">' + obj.Proposal[i].enquiry_no + '-' + obj.Proposal[i].caller_name + '-' + obj.Proposal[i].post_code + '</label>';
// htmlString += '<input type="radio" name="local_proposal_id" id="' + fieldId + '" value="' + obj.Proposal[i].enquiry_no + ',' + obj.Proposal[i].id + '"/><label for="' + fieldId + '" data-iconpos="right">' + obj.Proposal[i].enquiry_no + '-' + obj.Proposal[i].caller_name + '-' + obj.Proposal[i].post_code + '</label>';
}
}
htmlString += '</fieldset>';}
$("input:radio[name=local_proposal_id]:checked").each(function () {
var prop = $(this).val().split(',');
});
$("input:radio[name=queue_proposal_id]:checked").each(function () {
var prop = $(this).val().split(',');
});
i need to select only one radio button at a time if radiobutton having name="assigned_proposal_id" is selected then it should not allow to select any radio buttons for name="local_proposal_id]" i cannot assign id different i need to do selection on the basis of name and i cant assign same name to separate group as well
please tell me whats the solution
Checking / Unchecking in jQuery Mobile, you need to use .prop to checked or unchecked and then call .checkboxradio('refresh').
Demo
$(document).on('pageinit', function () {
$(document).on('change', '[type=radio]', function (e) {
// Uncheck radio buttons in #group1 and #group2
$('#group1 [type=radio]:checked, #group2 [type=radio]:checked').prop('checked', false).checkboxradio('refresh');
// "OR" to select all radio buttons in DOM
$('[type=radio]:checked').prop('checked', false).checkboxradio('refresh');
// Check clicked radio
$(this).prop('checked', true).checkboxradio('refresh');
});
});
try the following
if($('input [name="assigned_proposal_id"]').is(':checked')){
$('input [name="local_proposal_id"]').attr('disabled' , true)
}
$('input [name="assigned_proposal_id"]').click(function(){
if($('input [name="assigned_proposal_id"]').is(':checked')){
$('input [name="local_proposal_id"]').attr('disabled' , true)
}
});
It will work like what hussain told
Here A FIDDLE for your purpose. It will uncheck all the radio button, then check the one we clicked on.
HTML :
<div id="localPropList">
<input name="assigned_proposal_id" type="radio" value="value1-1" />value1-1
<input name="assigned_proposal_id" type="radio" value="value1-2" />value1-2
<input name="assigned_proposal_id" type="radio" value="value1-3" />value1-3
</div>
<br/>
<div id="assignedPropList">
<input name="local_proposal_id" type="radio" value="value2-1" />value2-1
<input name="local_proposal_id" type="radio" value="value2-2" />value2-2
<input name="local_proposal_id" type="radio" value="value2-3" />value2-3
</div>
div selected : <span></span>
JQUERY :
$('#localPropList input[name="assigned_proposal_id"], #assignedPropList input[name="local_proposal_id"]').change(function(){
$('#localPropList input[name="assigned_proposal_id"], #assignedPropList input[name="local_proposal_id"]').prop('checked', false);
$(this).prop('checked', true);
$('span').html($(this).val());
});
Disable Syntax:
$('input[name="name_here"]').attr('disabled', 'disabled');
Don't go for the hardest thing
Hussein Nazzal is correct but space matters
between input and '[' bracket
if($('input[name="assigned_proposal_id"]:checked').val() != '')
{
$('input[name="local_proposal_id"]:radio').attr('disabled', 'disabled');
}
Demo
This worked for me, take into account that according to the selector this change will apply to all RadioButtons in the document with the same class, in this case class="chartIndex":
$(".chartIndex").change(function () {
$('[type=radio]:checked').prop('checked', false);
$(this).prop('checked', 'checked');
});
Hope this helps someone. Regards.