We Keep Coding

Submit div content as textarea with hidden fields

Got a form and I need to submit the content of five divs. I read many solutions and I figured I could use hidden fields, but I don't know how. Javascript or jquery would be great
<form name="module" id="module" method="post" action="" title="postthis">
<div name="mytext" id="mytext">Here's something I want to pass</div>
<div name="mytext2" id="mytext2">Again, I want this div to act as a text area</div>
<div name="mytext3" id="mytext3">Another text</div>
<div name="mytext4" id="mytext4">Yet another</div>
<div name="mytext5" id="mytext5">Last one</div>
<input name="mytext" type="hidden" id="mytext" value="mytext" />
<input name="mytext2" type="hidden" id="mytext2" value="mytext3" />
<input name="mytext3" type="hidden" id="mytext3" value="mytext4" />
<input name="mytext4" type="hidden" id="mytext4" value="mytext5" />
<input name="mytext5" type="hidden" id="mytext5" value="mytext6" />
<input name="insert" type="submit" class="btn btn-primary" id="insert" value="Save my fields" onClick="return validate_login(module);" />
</form>

Please see below code snippet. to help you achieve your goals. This solution is broken into two parts, the HTML markup and the Javascript code. data-input is used to connect corresponding hidden fields ids. These is then submitted to the server for processing.
function augmentValues(divClass = "mytext") {
const divs = document.getElementsByClassName(divClass);
Array.from(divs).forEach(divElem => {
const inputId = divElem.getAttribute("data-input");
const hiddenInput = document.getElementById(`${inputId}`)
hiddenInput.value = divElem.textContent
})
}
function handleSubmit(event) {
event.preventDefault()
augmentValues();
const formData = new FormData(event.target);
const formValues = Object.fromEntries(formData.entries())
// Validate inputs
// Submit form
console.log(formValues)
event.target.submit()
}
<form name="module" id="module" method="post" action="" title="postthis" onsubmit="handleSubmit(event)">
<div class="mytext" data-input="mytext">Here's something I want to pass</div>
<div class="mytext" data-input="mytext2">Again, I want this div to act as a text area</div>
<input name="mytext" type="hidden" id="mytext" value="" />
<input name="mytext2" type="hidden" id="mytext2" value="" />
<button name="insert" type="submit" class="btn btn-primary">
Save my fields
</button>
</form>

Vue.js submit text button

I have a noob question.
i have a form with a text field. If i type something in, and push enter, no result. If i type something in, and push the button, i get the result i want. Can someone help me fix this - this is written in vue.js
<div class ="well">
<form class="form-inline" onsubmit="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
</form>
</div>
<input id="clickMe" type="button" value="clickme" v-on:click="searchName" />

You may add an event in your text field.
<input
type="text"
name="name"
class="form-control"
v-model="search"
v-on:keyup.enter="searchName"
/>
Or add a submit event in your form
<form
class="form-inline"
v-on:submit.prevent="searchName"
>

put your button inside the <form> tag and change the button type to submit:
<div class ="well">
<form class="form-inline" #submit.prevent="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
<input id="clickMe" type="submit" value="clickme"/>
</form>
</div>
EDIT
instead of onclick event in the button, use #submit.prevent in the form.

getElementById and multiple forms

I am having this situation with many forms (for instance I show you a coupe of them):
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content" class="form-control" required=""></textarea>
<input name="code" id="code" type="hidden" value="1180224194">
<input name="postId" id="postId" type="hidden" value="167">
<button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content" class="form-control" required=""></textarea>
<input name="code" id="code" type="hidden" value="95959622661">
<input name="postId" id="postId" type="hidden" value="144">
<button class="btn btn-commenta">Say something</button>
</form>
And I have some javascript like this:
<script type="text/javascript">
$("form").submit(function (e) {
e.preventDefault();
var comment = document.getElementById("content").value;
var postId = document.getElementById("postId").value;
var code = document.getElementById("code").value;
if(comment && postId && code){
$.ajax({
type: 'POST',
...SOME AJAX
});
}
else {
console.log("error");
console.log(comment);
console.log(postId);
console.log(code);
}
return false;
});
</script>
Everything works fine when I have a single form (or when I use the first one), but when I try to get the values of the inputs in a different form than the first one, I get an error and my fields are empty.
How can I tell the script to select the values (with getElementById) of the submitted form? I tried with "this" but the console tells me "Cannot read property 'getElementById' of undefined".

The id attribute should be unique in the same document, use common classes instead like :
<form method="POST" enctype="multipart/form-data">
<textarea name="content" class="form-control content" required=""></textarea>
<input name="code" class="code" type="hidden" value="1180224194">
<input name="postId" class="postId" type="hidden" value="167">
<button class="btn btn-commenta">Say something</button>
</form>
Then get the element values using this to refer to the curren form :
var comment = $(".content", this).val();
var postId = $(".postId", this).val();
var code = $(".code", this).val();
Hope this helps.
$("form").submit(function(e) {
e.preventDefault();
var comment = $(".content", this).val();
var postId = $(".postId", this).val();
var code = $(".code", this).val();
console.log(comment);
console.log(postId);
console.log(code);
if (comment && postId && code) {
console.log("ajax query");
} else {
console.log("error");
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" class="form-control content" required=""></textarea>
<input name="code" class="code" type="hidden" value="1180224194">
<input name="postId" class="postId" type="hidden" value="167">
<br>
<button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" class="form-control content" required=""></textarea>
<input name="code" class="code" type="hidden" value="95959622661">
<input name="postId" class="postId" type="hidden" value="144">
<br>
<button class="btn btn-commenta">Say something</button>
</form>

Try using different id's for different elements. Id's should always be unique. If you want to use the same name for multiple elements (e.g for styling) use a class.
I suggest changing your ID's to something like:
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content1" class="form-control" required="">
</textarea>
<input name="code" id="code1" type="hidden" value="1180224194">
<input name="postId" id="postId1" type="hidden" value="167">
`enter code here`<button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content2" class="form-control" required="">
</textarea>
<input name="code" id="code2" type="hidden" value="95959622661">
<input name="postId" id="postId2" type="hidden" value="144">
<button class="btn btn-commenta">Say something</button>
</form>
https://www.w3schools.com/tags/att_global_id.asp W3Schools explains:
"The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet,
and by JavaScript (via the HTML DOM) to manipulate the element with
the specific id."

How to change Input Name Attribute Value using JavaScript

I have project here were in I need to change the default name attribute value when a link is clicked. Here's my form at the moment:
<form id="searchform" action="" method="GET">
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
<input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit">
<div class="search-filter">
Search By: <a id="FilterByContinent">Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a>
</div>
</form>
======================
As you can see, the default name value of my input #intextbox is q and I want to change it to listingfields[1] when the Continent link is clicked.
so from:
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
to:
<input id="intextbox" maxlength="150" size="20" value="" name="listingfields[1]" type="text" placeholder="Insert your keyword here..">
How can I do this with JavaScript?

Your solution is here :
<form id="searchform" action="" method="GET">
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
<input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit">
<div class="search-filter">
Search By: <a id="FilterByContinent" onclick="changename();" >Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a>
</div>
</form>
<script>
function changename(){
document.getElementById('intextbox').name = "listingfields[1]";
}
</script>

Check this out:
//getting the name attribute before:
var currentName = document.getElementById("intextbox").name;
document.getElementById("intentBoxName").innerHTML = currentName;
//Now for changing the name attribute of input,
//first add an Event Listener to the continent link:
var continentLink = document.getElementById("FilterByContinent");
continentLink.addEventListener("click", function() {
document.getElementById("intextbox").name = "listingfields[1]";
//Just for showing the change in the name attribute:
var newName = document.getElementById("intextbox").name
document.getElementById("intentBoxName").innerHTML = newName;
});
<form id="searchform" action="" method="GET">
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
<input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit">
<div class="search-filter">
Search By: <a id="FilterByContinent">Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a>
</div>
</form>
<br/>
<br/>
<h5> Name Attribute: </h5>
<div id="intentBoxName"></div>
If you had just googled "change name attribute using javascript" you'd have found the answer easily. You should spend some time looking up on google before posting it as a question. I hope my snippet above does what you were expecting.

Convert / Change Div element with Form element

I'm using panelbar, hence form tag is disturbing it's open/close animation
I found that form tag is creating issue, so I want div tag to convert to form tag when I click submit button.
Eg:
<div class="myForm">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income"/>
</div>
<input type="submit" value="Submit" />
</div>
Convert to:
<form name="input" id="" action="html_form_action.php" method="post">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income"/>
</div>
<input type="submit" value="Submit" />
</form>
So all I want is change the div with class ".myForm" to Form element
and closing div with closing form tag.
Is there any way to do this?

Use Javascript + jQuery:
$('.myForm').children().unwrap().wrapAll("<form name='input' id='' action='html_form_action.php' method='post'></form>");
This removes the wrapping div ".myForm" with the unwrap method. Then wraps it's children with the wrapAll method.

You can done this work simply using Jquery -
$(document).ready(function(){
$('form').html($('.myForm').html());
});
But if you want to do this, this is not correct because you use assign id of some element. So after append whole HTML into <form> you should remove .myForm.
Try This
For remove div with class .myForm after append innerhtml into form, you can simply use .remove.
$(document).ready(function(){
$('form').html($('.myForm').html());
$('.myForm').remove();
});
Try This

If you do like html5, you can check out html5 "form Attribute", which allows you to use the form elements wherever you like, and you don't need to wrap the contents inside form tags.
Check this out
<form name="input" id="myform" action="html_form_action.php" method="post"></form>
<div class="myForm">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit" form="myform" />
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income" form="myform" />
</div>
<input type="submit" value="Submit" form="myform" />
</div>