I have a function called makehash()
I have to fill the value of hash field with the return value of makehash()
<form action="http://example.com/test.php" enctype="multipart/form-data" method="post">
<input type="file" name="datafile" size="40">
<input type="hidden" name="upload_mode" value="0">
<input type="hidden" name="hash" value="">
<input type="submit" value="Upload">
</form>
document.forms[0].elements["hash"].value = makehash();
This assumes you have only one form, if you have more specify the form name instead of 0 or give ID to the hidden input and use document.getElementById instead.
You can do it by grabbing the input (document.getElementsByName) and setting the .value, like this:
document.getElementsByName("hash")[0].value = makehash();
There are other ways as well, if it's unique an id is a good option for example.
Related
How can I set the maxlength attribute in my text input field equal to the value the user enters in the number input field in the same form?
<form action="/action_page.php">
<input id="number" type="number" value="20" max="40">
<input type="text" id="username" name="username" maxlength="10"><br><br>
<input type="submit" value="Submit">
</form>
I'm guessing this maybe requires JavaScript?
You can set the maxlength property on the input event.
document.querySelector("#number").addEventListener("input", function(e){
document.querySelector("#username").maxLength = this.value;
});
<form>
<input id="number" type="number" value="20" max="40">
<input type="text" id="username" name="username" maxlength="20"><br><br>
<input type="submit" value="Submit">
</form>
Yes, this requires JavaScript. You would do something like this:
document.querySelector('#number').addEventListener('input', (e) => {
e.target.closest('form').querySelector('[name="username"]').maxLength = e.target.value;
});
JSFiddle: https://jsfiddle.net/63cpv8rk/
Here, we add an event handler for the input event for the element selected by #number. (You should avoid using these ID attributes though... they clutter up the global scope needlessly.)
Then on input, we find the parent form, and then select the input by name. Finally, we set its max length to the value that was just put in our field.
I have a form with which a user can dynamically add text inputs. This generates a form with multiple text inputs that have the same name. If this form is submitted they overwrite each other. To solve this I need change the names so that they are appended with an incremented prefix when the form is submitted. Can anyone help?
Example of form (once three inputs have been added):
<form action="" method="post">
<td class="recipe-table__cell">
<input id="answer" name="the_answer" type="text" value="" >
<input id="answer" name="the_answer" type="text" value="" >
<input id="answer" name="the_answer" type="text" value="" >
</td>
<input type="submit" value="Submit">
</form>
Desired Post output on submission:
Array ( [1-answer] => test [2-answer] => ok [3-answer] => nice)
rather than Array ( [answer] => test )
First, select all of the elements that you want to add the attribute for. This can be done with .querySelectorAll().
Second, loop over those elements.
Third, use .setAttribute() to change the name attribute to append the index from the loop.
Note that you'll also want to increment the ID attribute, as you can't have duplicate IDs on the same page. You'll also want to swap your <td> elements for <div> elements to both allow .querySelectAll() to work correctly, and ensure valid markup.
This can be seen in the following example:
var inputs = document.querySelectorAll("form div input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].setAttribute("id", "answer" + i);
inputs[i].setAttribute("name", "the_answer" + i);
console.log(inputs[i]); // Added purely to show the change
}
<form action="" method="post">
<div class="recipe-table__cell">
<input id="answer" name="the_answer" type="text" value="">
<input id="answer" name="the_answer" type="text" value="">
<input id="answer" name="the_answer" type="text" value="">
</div>
<input type="submit" value="Submit">
</form>
Hope this helps! :)
I'm having an issue with passing hidden values. I have a search field that onclick calls my javascript function with the intention of setting a hidden fields value further down the page.
<div class="search">
<input type="text" name="username" class="mySearch" value="">
<input type="button" class="myButton" value="" onclick="setSearch();">
</div>
My javascript, i is set outside of the function.
setSearch(){
if(i == 0){
$('input:hidden[name="search1"]').val($(".mySearch").val());
}
else if(i == 1)
{
$('input:hidden[name="search2"]').val($(".mySearch").val());
}
i++;
}
and then the field I'm try to set
<div class="sendallHolder">
<form method="post" action="getTweets.php">
<input type="hidden" name="fromTest" id="fromTest"/>
<input type="hidden" name="untilTest" id="untilTest"/>
<input type="hidden" name="latTest" id="latTest"/>
<input type="hidden" name="longTest" id="longTest"/>
<input type="hidden" name="search1" id="search1" />
<input type="hidden" name="search2" id="search2" />
<input type="submit" class="sendAll" value="Gather News!">
</form>
</div>
It runs through the loop twice but each time its not setting the values properly in my hidden fields. the dev tools in chrome tell me that the 'value' is popping up but no value is being set. I'm not entirely sure what I'm doing wrong.
Any ideas?
The :hidden selector doesn't do what you think. It matches elements that have been hidden using CSS, it doesn't match type="hidden" inputs. Just use
$("#search1")
since you have an id on the elements.
Use hidden input ID like this :
$('#search1').val($(".mySearch").val())
$(".mySearch").keyup(addhjc);
function addhjc(){
$('#search2').val($(".mySearch").val());
}
or
$('.myButton').click(function(){
$('#search2').val($(".mySearch").val());
});
also
function setSearch(){
if(i === 0){........
and define i var
I apologize for asking such a "noob" question but I'm outside my area of expertise here.
I'm using Dojo 1.9 and I need to walk through a submitted form and determine if any of the input fields are blank. The tricky part is that the form is dynamic, it can contain an array of child elements of each array element, with names like itemList[1].myName:
<form id="businessReferences" action="/yabba/dabba/doo" method="post">
<input id="itemList[0].myName" name="itemList[0].myName" type="text" value=""/>
<input id="itemList[0].myAddress" name="itemList[0].myAddress" type="text" value=""/>
<input id="itemList[1].myName" name="itemList[1].myName" type="text" value=""/>
<input id="itemList[1].myAddress" name="itemList[1].myAddress" type="text" value=""/>
<input id="itemList[2].myName" name="itemList[2].myName" type="text" value=""/>
<input id="itemList[2].myAddress" name="itemList[2].myAddress" type="text" value=""/>
</form>
What is the best way to walk through this form and check to see if all the fields for each parent element are empty? For example if all the fields for itemList[2] are empty? Is there a particular method for doing this? Seems like it would be a fairly common problem but I haven't been able to track down an answer.
Just add an submit button in the form
<form id="businessReferences" action="/yabba/dabba/doo" method="post" onsubmit="return validate()">
<input id="itemList[0].myName" name="itemList[0].myName" type="text" value=""/>
<input id="itemList[0].myAddress" name="itemList[0].myAddress" type="text" value=""/>
<input id="itemList[1].myName" name="itemList[1].myName" type="text" value=""/>
<input id="itemList[1].myAddress" name="itemList[1].myAddress" type="text" value=""/>
<input id="itemList[2].myName" name="itemList[2].myName" type="text" value=""/>
<input id="itemList[2].myAddress" name="itemList[2].myAddress" type="text" value=""/>
<input type='submit' value="Submit"/> <!-- to trigger validation on this button click -->
</form>
Javscript for validation , it will account for dynamically added element also
<script type='text/javascript'>
function validate(){
FromRef = document.getElementById('businessReferences');
for(i=0; i<FromRef.elements.length; i++)
{
if((FromRef.elements[i].value).trim() ==""){ // see if the value is blank popup and alert
alert( FromRef.elements[i].name +"is required");
return false; // not to submit form
}
return true;//submit form
}
</script>
I have multiple of this div in my form generated dynamically by the user
<div class="property-container">
<input type="hidden" name="proposal[process][systems][1][id]">
<input type="hidden" name="proposal[process][systems][1][name]">
<input type="hidden" name="proposal[process][systems][1][stations][2][id]">
<input type="hidden" name="proposal[process][systems][1][stations][2][name]">
<input type="hidden" name="proposal[process][systems][1][stations][2][price]">
</div>
And this is how I name them using jQuery
stationFieldsNames:function(station_container, system_id){
var hidden = station_container.find('.property-container input[type=hidden]:first');
station_container.find('.property-container').each(function(propCon){
hidden.attr('name','proposal[process][systems]['+ system_id +'][id]');
hidden.next().attr('name','proposal[process][systems]['+ system_id +'][name]');
hidden.next().next().attr('name','proposal[process][systems]['+ system_id +'][stations]['+propCon+'][id]');
hidden.next().next().next().attr('name','proposal[process][systems]['+ system_id +'][stations]['+propCon+'][name]');
hidden.next().next().next().next().attr('name','proposal[process][systems]['+ system_id +'][stations]['+propCon+'][price]');
});
}
The problem I have with this is that I get duplicated field names. When I submit the form I see in the array that the data is missing. Where do I do wrong?