This input tag is disabled but I want to submit this form value.
<input type="text" name="quantity" value="400" class="field left" disabled />
Please help me about this tag. Thanks in advance.
Try using readonly instead of disabled
<input type="text" name="quantity" value="400" class="field left" readonly />
If you still want it grayed out, you can set a background color:
<input type="text" name="quantity" value="200" style="background-color: #f0f0f0;" readonly />
Use hidden field.
<input type="hidden" name="quantity" value=400>
Disabled one can be there too, just remove the name attribute.
<input type="hidden" name="quantity" value=400>
<input type="text" value="400" class="field left" disabled>
Take hidden field
<input type="hidden" name="quantity" value="400" class="field left"/>
So it will not be visible and it will also be submitted in the form
Use read-only and hidden to do this as disabled values cannot be submitted.If you do not want the user to edit the values ,then use a text element instead and read its value along the form using onsubmit attribute of form tag.
Related
I have this
<input type="number" disabled name="amount" id="amount" placeholder="0.00" >
and this Jquery
$('#amount').val(100);
it goes smoothly and it shows in the UI. my problem is when I submit the button the value of $request->amount is null? how can I fix it? please help and save my day guys. thank you
Instead of disabled use readonly
<input type="number" name="amount" id="amount" placeholder="0.00" readonly>
I'm working on <form> that have multiple groups of <input> with the same attributes name='product-code' and name='amount' (because of structure).
For better understanding, example: form where you can choose color and amount of one specific product to add in a basket, but I want to send product code from the catalog (because each color of this product is another item in a catalog) instead of sending color names.
And I'm trying to understand how it should be done semantically correctly and serialized. Should it be one form and one post request or many forms and many post requests? What's your opinion?
<form>
<div>
<input type="text" name="product-code" value="ST912600">
<input type="number" name="amount" value="2">
</div>
<div>
<input type="text" name="product-code" value="ST821806">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST467165">
<input type="number" name="amount" value="1">
</div>
<div>
<input type="text" name="product-code" value="ST348499">
<input type="number" name="amount" value="1">
</div>
<div>
<input type="text" name="product-code" value="ST545081">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST430287">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST988144">
<input type="number" name="amount" value="4">
</div>
<button type="submit">Send</button>
</form>
I'm expecting the server will parse request with multiple data as an array
You can't use the same name in form tag. Visual your form like an associated array.
name => value
name2 => value2
So if you send a form with the same name, you create a conflict.
But you can use a simple form, change name attribut like you want and set a class named product-code for example. preventDefault with JS on your submit button and use getElementsByClassName and get his value etc. save in an array and create a loop for submit one by one with formElt.submit() funtion.
Or create a lot of forms in HTML.
Cursor showing on ReadOnly Input in IE only. I try to disable the input but this jquery datepicker it is disabling everything.
I tried KeyCode===8 and return false. User complaining they are doing back space it is go to previous page.
<input name="BirthDate" class="SPE-Formcontrol section_detail-font-14 calendar hasDatepicker" id="BirthDate"
style="display: inline;" type="text" readonly="readonly" value="">
I don't see any valid answers for this.
Don't use the attribute "disabled" because the input would not be submitted when it is part of a form
$('#BirthDate').focus(function(){
this.blur();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="BirthDate" class="SPE-Formcontrol section_detail-font-14 calendar hasDatepicker" id="BirthDate"
style="display: inline;" type="text" readonly="readonly" value="">
<form>
<input tabindex="1" required>
<input tabindex="2" required>
<input>
<input tabindex="3" required>
<input>
<input tabindex="4" required>
<input tabindex="5" required>
<button type="button" tabindex="6"></button>
<button type="submit" tabindex="7"></button>
</form>
Here I have a form with some input fields and two button at the end of the form... and I am using tabindex attribute to focus them in order... now on tab key down I need to focus the first input field with tabindex="1" after release focus from the submit button as like as the form focus input field of tabindex="3" after releasing focus from input field of tabindex="2"... How can I do that...??
please don't use any jQuery... only javascript or html...
Black Cobra's answer works, unless you're using your id attributes for something (which I was). It's easy enough to edit his code to work for anyone though:
<form>
<input tabindex="2" autofocus required>
<input tabindex="3" required>
<input>
<input tabindex="4" required>
<input>
<input tabindex="5" required>
<input tabindex="6" required>
<button type="button" tabindex="7"></button>
<button type="submit" tabindex="8" id=""
onFocus="this.tabIndex=1;"
onBlur="this.tabIndex=8;">
</button>
</form>
I just changed this:
onFocus="this.id=this.tabIndex;this.tabIndex=1"
onBlur="this.tabIndex=this.id">
to this:
onFocus="this.tabIndex=1;"
onBlur="this.tabIndex=8;">
It's not dynamic, but it's really easy. If you want dynamic, see here.
Finally, I have solved my problem... with HTML and a little javascript it can be done easily... means loop focus of input fields inside a form...
<form>
<input tabindex="2" autofocus required>
<input tabindex="3" required>
<input>
<input tabindex="4" required>
<input>
<input tabindex="5" required>
<input tabindex="6" required>
<button type="button" tabindex="7"></button>
<button type="submit" tabindex="8" id=""
onFocus="this.id=this.tabIndex;this.tabIndex=1"
onBlur="this.tabIndex=this.id">
</button>
</form>
Here I skip the tabindex="1" and start with tabindex="2"... then I add 2 more attribute in the submit button... onFocus & onBlur... moreover, I am using the id attribute to memory the primary or real tabindex number of the submit button... when the user will focus on the submit button, javascript will change its tabindex from 8 to 1... now if the user hit the tab button the form will try to find out the element that have the next tabindex... means the first input field... again, when the focus will leave the submit button, javascript will retrieve its real tabindex from its id... means the tabindex will be changed from 1 to 8... in this way the focus will keep looping inside the form...
Live Demo
Interesting problem. I have a client who wants the add to cart button to be an image. That's fine, submit via javascript in an onclick on the image. But when I look at the values being sent, quantity is always 1 (or whatever I set it as in the code). In other words, I can't change the value of quantity.
<form name="AddToCartForm<?=$index?>" id="AddToCartForm<?=$index?>" action="[cartaddress]" method="post">
<input type="hidden" value="1" name="insert" />
<input type="hidden" value="<?=$subcategory['Name'];?>" name="category" />
<input type="hidden" value="<?=$item['ProductNumber'];?>" name="prodnumber" />
<input type="hidden" value="<?=$item['Name'];?>" name="prodname" />
<input type="hidden" value="<?=$item['Price'];?>" name="prodprice" />
<input type="hidden" value=".10" name="handling"/>
<input type="hidden" value="10" name="weight" />
<p><?=$item['Description'];?></p>
<p><strong>Quantity:</strong> <input type="text" name="quantity" size="10" value="1"/></p>
<p><strong>Price:</strong> $<?=number_format($item['Price'], 2);?></p>
<p>
<img onclick="document.getElementById('AddToCartForm'+<?=$index?>).submit();" style="cursor:pointer;" src="images/cart_button.png" width="100" height="111" alt="add to cart" />
</p>
</form>
(If I use a submit button, the quantity goes through.)
You can use <input type="image"> instead of <img>. It acts like submit button.
Your onlcick merely submits, it doesn't do anything to change the value of quantity...so it's doing what you told it to. Before submitting you need to read the value of quantity, add 1 to that, and write the new value back to quantity.
Although the solution is already given, I think I got the cause of the problem:
document.getElementById('AddToCartForm'+<?=$index?>).submit();
I think the 'onclick' submits the wrong form. Would it also work if you changed it to document.getElementById('AddToCartForm<?=$index?>').submit();?