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."
Related
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>
I have 2 forms with the same ids.
I want when you type a key in the text area with id=ingevuldNotitie then javascript will submit the form. Is there a way to do this and so how?
<div id="response">
<div id="child_response">
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan();">
<input type="text" id="clientNotitieDatum" value="2022-10-17" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan();">
<input type="text" id="clientNotitieDatum" value="2022-10-18" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
</div>
</div>
<script>
// I tried this
$("#response").bind("keyup", function () {
$(this).closest('[name=clientNotitieDatum]').submit();
});
// And I tried this
$("text[name='ingevuldNotitie']").bind("keyup", function () {
$(this).closest('form').submit();
});
</script>
Because the elements are dynamically added via ajax, you should use $(document).on('keyup', "textarea[name='ingevuldNotitie']", function() {.
Alo, in your forms onsubmit, add an argument to the function:
onsubmit="return notitieOpslaan(this);"
And use that argument to get the form's data, such as clientNotitieDatum.
See working demo below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="response">
<div id="child_response">
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan(this);">
<input type="text" id="clientNotitieDatum" value="2022-10-17" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan(this);">
<input type="text" id="clientNotitieDatum" value="2022-10-18" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
</div>
</div>
<script>
$(document).on('keyup', "textarea[name='ingevuldNotitie']", function() {
$(this).closest('form').submit();
});
function notitieOpslaan(theForm) {
var clientNotitieDatum = theForm['clientNotitieDatum'].value;
console.log('form would have been submitted', clientNotitieDatum);
return false;
}
</script>
I am simply trying to display data in my console. For some reason it just flashes the result and refreshes the console. I am running the html file on server.
Code-
<html>
<body>
<form>
<label>Name:</label>
<input type="text" id="fname" >
<label>Email:</label>
<input type="text" id="email" >
<input type="submit" value="Submit" id="fetch">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#fetch').click(function(){
var str = $("#fname").val();
console.log(str);
});
</script>
</body>
</html>
I am unable to debug this. Any suggestions?
You need to return false to prevent reloading:
$('#fetch').click(function(){
var str = $("#fname").val();
console.log(str);
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>Name:</label>
<input type="text" id="fname" >
<label>Email:</label>
<input type="text" id="email" >
<input type="submit" value="Submit" id="fetch">
</form>
Another way to prevent the default behavior:
$('#fetch').click(function(e){
e.preventDefault();
var str = $("#fname").val();
console.log(str);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>Name:</label>
<input type="text" id="fname" >
<label>Email:</label>
<input type="text" id="email" >
<input type="submit" value="Submit" id="fetch">
</form>
Clicking the submit button will submit the form, and thus refresh the page, which is the reason why the console is clearing.
Since you're using jQuery, you can add return false; right after your console.log(str);, so the original action (here, the form submission) will be cancelled.
this is my code.jsp file and I've written javascript in it to enable/disable textbox name=uinp when toggling checkbox name=input but it is not working!
<html>
<body>
<form action="compile.jsp" method="get">
Custom Input: <input type="checkbox" name="input" onchange="toggle('input','uinp')"><br><br>
<textarea rows="5" cols="15" name="uinp" style="display: none"></textarea><br><br>
<br><input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(chk,txt)
{
if(document.getElementById(chk).checked)
document.getElementById(txt).style.display='';
else
document.getElementById(txt).style.display='none';
}
</script>
</body>
</html>
Please anyone help me with this!
You need to set id for textarea otherwise getElementById() returns null, since there is no element with that id. Also you can pass this context to refer the checkbox.
<form action="compile.jsp" method="get">
Custom Input:
<input type="checkbox" name="input" onchange="toggle(this,'uinp')">
<br>
<br>
<textarea rows="5" cols="15" id="uinp" style="display: none"></textarea>
<br>
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(ele, txt) {
if (ele.checked)
document.getElementById(txt).style.display = '';
else
document.getElementById(txt).style.display = 'none';
}
</script>
I have the following code
function submitSelf() {
var adhocMainJspPane = getFrameObject('adHocMainJSPPane',openerObject);
document.Form.action="something";
document.getElementById("tabID").value = adhocMainJspPane.cubeTreeFrame.document.getElementById("arePropertiesChanged").value;
document.selfCloseForm.target="advancedPropertiesJSPPane";
var tmpSum = getTmpSum();
document.selfCloseForm.action += "&tmpChk="+tmpSum;
document.selfCloseForm.method="post";
document.selfCloseForm.submit();
}
There is no other submit in the script.
The Html is
<BODY onload="submitSelf();">
<FORM name="selfCloseForm" id="selfCloseForm" action="" method="post">
<INPUT type="hidden" id="tabID" name="tabID" value="">
<INPUT type="hidden" id="fromPage" name="fromPage" value="">
<INPUT type="hidden" id="elementNo" name="elementNo" value="">
<INPUT type="hidden" id="elementName" name="elementName" value="">
<INPUT type="hidden" id="cubeAction" name="cubeAction" value="">
<INPUT type="hidden" id="arePropertiesChanged" name="arePropertiesChanged" value="">
</FORM>
<BODY>
The above for is submitted twice on SAFARI browser. How can I prevent it from doing so.